lovecoding
/
W260426


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
							<!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;
        }

        .box{
            width: 600px;
            margin: 100px auto;
            box-shadow: 0 0 10px #999;
            text-align: center;
            padding: 30px;
        }
        .box .title{
            color: #ff5252;
            font-size: 40px;
        }
        .box .desc{
            color: #666;
            margin:10px 0;
        }
        .box .range{
            background-color: #e3f2fd;
            font-size: 20px;
            padding: 10px 0;
            font-weight: bold;
            border-radius: 5px;
        }
        .box .guess{
            margin: 20px 0;
        }
        .box .guess input{
            padding: 12px 15px;
            border-radius: 5px;
            border:2px solid #ccc;
            font-size: 18px;
        }
        .box .guess button{
            padding: 12px 25px;
            background-color: #ff5252;
            color: #fff;
            font-size: 18px;
            font-weight: bold;
            border:0;
            border-radius: 5px;
        }
        .box .gameTip{
            background-color: #e8f5e9;
            color: #4caf50;
            font-size: 18px;
            padding: 10px 0;
            font-weight: bold;
            border-radius: 5px;
        }
        .box .result{
            margin-top: 20px;
        }
        .box .result li{
            text-align: left;
            border-left: 3px solid #2196f3;
            padding:5px;
            margin:5px 0;
        }
    </style>
</head>
<body>
    <div class="box">
        <h1 class="title">数字炸弹</h1>
        <p class="desc">猜中隐藏的数字炸弹，考验你的运气和策略！</p>
        <!-- 范围提示区域v -->
        <div class="range">范围: 1 到 100</div>
        <!-- 猜数字区域 -->
        <div class="guess">
            <input type="text" id="guess" placeholder="请输入你猜的数字">
            <button id="guessBtn">猜</button>
        </div>
        <!-- 游戏提示区域 -->
        <div class="gameTip">比0大</div>
        <!-- 结果提示区域 -->
        <div class="result">
            <h2>猜测记录</h2>
            <ul>
                <!-- <li>10:猜小了</li> -->
            </ul>
        </div>
    </div>
    <script>
        // 获取元素
        var guessBtn = document.querySelector("#guessBtn");
        var range = document.querySelector(".range");
        var guessNum = document.querySelector("#guess");
        var gameTip = document.querySelector(".gameTip");
        var result = document.querySelector(".result ul");
        // 定义一个随机数1-100
        var randomNum = Math.floor(Math.random()*100+1);
        // 定义最大最小值 猜测的数字区间
        var maxNum = 100;
        var minNum = 1;
        // 事件处理函数
        guessBtn.addEventListener("click",function(){
            // 获取用户输入的数字
            var num = parseInt(guessNum.value);
            // 游戏提示区域内容
            var tipText = "";

            // 判断用户输入的数字
            if(num<randomNum){
                // 用户输入的数字比随机数小
                // 更新最小值
                minNum = num;
                // 游戏提示区域内容
                tipText = "比" + num + "大";
            }else if(num>randomNum){
                // 用户输入的数字比随机数大
                // 更新最大值
                maxNum = num;
                // 游戏提示区域内容
                tipText = "比" + num + "小";
            }else{
                // 用户输入的数字等于随机数
                // 游戏提示区域内容
                tipText = "恭喜你猜对了！";
            }
            // 更新范围提示区域
            range.innerText = "范围: " + minNum + " 到 " + maxNum;
            // 更新游戏提示区域
            gameTip.innerText = tipText;
            // 更新结果区域
            // 创建一个li元素
            var li = document.createElement("li");
            // 设置li元素的内容
            li.innerText = tipText;
            // 将li元素添加到ul元素中
            result.appendChild(li);
            // 清空输入框
            guessNum.value = "";
        })
    </script>
</body>
</html>