js完成猜数字大小的游戏,详细步骤和分析
猜数字游戏:像框内数字数字,点击猜一猜,如果与后台的数字一样,则提示“ 恭喜猜对了”,并且可以再来一次,继续游戏。猜大了提示猜大了,猜小了提示猜小了!
HTML代码如下:
<div id="result1"></div> <input id="number" type="text" placeholder="请输入你所猜到的数字"> <button id="btn">猜一猜</button> <button id="btn1"></button>
CSS代码如下:
<style> #btn1{ display: none; } </style>
js代码:
<script> //获取内容 //获取input框 var _input = document.querySelector("#number"); var _btn = document.querySelector("#btn"); //结果框 var _result1 = document.querySelector("#result1"); var _btn1 = document.querySelector("#btn1"); //设置随机数 var num = parseInt(Math.random()*100)+1; //可以在控制台查看每次的输出值 console.log(num); //给按钮1“猜一猜”添加点击事件,比较大小 _btn.onclick = function(){ if(_input.value > num){ _result1.innerText = `猜大了`; } if(_input.value < num){ _result1.innerText = `猜小了`; } if(_input.value == num){ _result1.innerText = `恭喜你,猜对了`; _btn1.innerText = `再来一次?`; _btn1.style.display=block; } } //正确后给按钮2“再来一次”添加点击事件 _btn1.onclick = function(){ _input.value = ; _result1.innerHTML=""; //!!!重点,一定要再生成一次会随机数 num = parseInt(Math.random()*100)+1; //这个控制台输出便于自己看程序是否正确,可以不写 console.log(num); _btn1.style.display=none; } </script>
上一篇:
通过多线程提高代码的执行效率例子
下一篇:
nvm安装使用及npm包安装失败问题记录