|
|
@@ -0,0 +1,149 @@
|
|
|
+<!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>
|
