Javascript---猜数迷

最新推荐文章于 2024-06-14 15:02:13 发布

China_WUCH

最新推荐文章于 2024-06-14 15:02:13 发布

阅读量628

点赞数 4

本文链接：https://blog.csdn.net/China_WUCH/article/details/125295246

版权

1、要求：

在输入框中输入你猜的数字，然后会和系统里随机的数字进行比较返回比较结果，如果你手动输入的数字比随机的数字大，会在页面里输出“猜大了”,若比随机数字小，会在页面里输出"猜小了"，否则，就是"猜对了"，会出现对应提醒。如果猜对的话，会出现之前隐藏的一个按钮，提醒你是否继续游戏，点击代表继续游戏，小按钮也会消失。

2、案例代码：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
           #box{
               width: 200px;
               height: 100px;
               border: 1px solid;
           }
       </style>
   </head>
   <body>
       <div id="box"></div>
       <input id="first" type="text" placeholder="请输入你猜到的数值" value=""><button οnclick="test()">猜一猜</button><br>
       <button id="second" style="display: none;" οnclick="test2()" >再来一次？</button>
       <script>
           // var num=Math.random()*100;
           // var num1=parseInt(num);
           // console.log(num1);
           var num2=Math.random()*100;
           var num3=parseInt(num2);
           console.log(num3);
           var _first=document.getElementById("first");
           var _box=document.getElementById("box");
           var _second=document.getElementById("second");
           function test(){
               var num4=_first.value;
               if(num4<num3){
                   _box.innerHTML="猜小了！";
               }else if(num4>num3){
                   _box.innerHTML="猜大了！";
               }else if(num4==num3){
                   _box.innerHTML="恭喜你猜对了！";
                   _second.style.display="block";
               }
               num5=Math.random()*100;//暗示全局变量
               num6=parseInt(num5);//暗示全局变量
           }
           function test2(){
               _box.innerHTML="";
               _second.style.display="none";
               _first.value="";
               num3=num6*1;   //全局变量
               console.log(num3);

           };
       </script>
   </body>
</html>