lovecoding
/
W250913


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }

        body{
            background-color: #f5f5f5;
        }
        .box{
            width: 500px;
            background-color: #fff;
            border-radius: 10px;
            margin: 100px auto;
            box-shadow: 1px 1px 10px rgba(0,0,0,.5);
            padding: 50px;
            text-align: center;
        }
        .game-title{
            color: #ff5252;
            font-size: 40px;
            font-weight: bold;
        }
        .game-info{
            color: #666;
            margin: 10px 0;
        }
        .game-logo{
            font-size: 50px;
        }
        .range-content,.alert-content{
            font-size: 20px;
            background-color: #e3f2fd;
            padding: 10px;
            font-weight: bold;
            border-radius: 5px;
        }
        .form-content{
            margin-top: 20px;
        }
        input{
            font-size: 18px;
            padding: 12px 15px;
            border:2px solid #ddd;
            border-radius: 10px;
            text-align: center;
        }
        button{
            background-color: #ff5252;
            color: white;
            padding: 12px 25px;
            font-size: 16px;
            font-weight: bold;
            border: none;
            border-radius: 10px;
        }
        .alert-content{
            background-color: #e8f5e9;
            color: #4caf50;
            margin-top: 20px;
        }
        h2{
            margin: 20px 0;
        }
        ul li{
            text-align: left;
            border-left: 3px solid #2196f3;
            padding: 8px;
            margin: 5px 0;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="game-title">💣 数字炸弹 💣</div>
        <p class="game-info">猜中隐藏的数字炸弹，考验你的运气和策略！</p>
        <div class="game-logo">💣</div>
        <div class="range-content">范围: 1 到 100</div>
        <div class="form-content">
            <input type="text" placeholder="输入数字">
            <button>猜测</button>
        </div>
        <div class="alert-content">比0大</div>
        <div class="guess-list">
            <h2>猜测记录</h2>
            <ul>
                
            </ul>
        </div>
    </div>
    <script>
        var oInput = document.getElementsByTagName("input")[0];
        var oButton = document.getElementsByTagName("button")[0];
        var alertContent = document.getElementsByClassName("alert-content")[0];
        var rangeContent = document.getElementsByClassName("range-content")[0];
        var oUl = document.getElementsByTagName("ul")[0];
        // 生成随机数字 1-100的随机数字
        var ranNum =Math.floor(Math.random()*100) + 1;

        // 猜测过程中最大值最小值
        var guessMax = 100;
        var guessMin = 1;
        // function playGame(){

        // }

        // 为按钮绑定事件
        oButton.onclick = function(){
            var val = oInput.value;
            var listStr = document.createElement("li");
            if(ranNum > val){
                console.log("猜小了")
                guessMin = val > guessMin?val:guessMin;
                alertContent.innerText = "比"+val+"大";
                listStr.innerText = val+": 猜小了。"
            }else if(ranNum < val){
                console.log("猜大了");
                guessMax = val > guessMax?guessMax:val;
                alertContent.innerText = "比"+val+"小";
                listStr.innerText = val+": 猜大了。"
            }else{
                console.log("猜对了");
                alertContent.innerText = "猜对了"
                listStr.innerText = val+": 猜对了。"
            }
            oInput.value = "";
            rangeContent.innerText = "范围："+guessMin + " 到 " +guessMax;
            oUl.append(listStr);
        }
    </script>
</body>
</html>