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