猜数字游戏

最新推荐文章于 2022-08-02 15:29:34 发布

ACE1125

最新推荐文章于 2022-08-02 15:29:34 发布

阅读量317

点赞数 2

分类专栏：前端文章标签：猜数字游戏 HTML

本文链接：https://blog.csdn.net/h_h_1122/article/details/97392243

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

实现功能：1.随机产生一个数，在文本中输入猜的数；2.猜对了弹出正确窗口信息；3.猜大猜小也会弹出提示信息；4.点击刷新可以刷新网页，重新进行游戏。

代码如下：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
   </head>
   <body bgcolor="aqua" style="padding-top: 18%;">

       <center>
       <div style="width: 200px;height: 200px;border: 8px double #CC0099;background: #6633CC;">
           <h3 style="font-style: oblique;font-size: larger;font: 'agency fb';"><font color="#CCFF00">猜数字游戏</font> </h3>
       <script type="text/javascript">
        var number=Math.floor(1+10*Math.random());//获取1到10之间的整数
        document.write("<br />");
        function guess(){
       var info=document.getElementById("txtGuess").value;//获取用户输入的内容
       if(info.trim()!=""&&!isNaN(info)){
           var input=Math.floor(info);//向下取整数
           if (number==input) {
               alert("正确");

           }else if(number>input){
               alert("猜小了");

           }else{
               alert("猜大了");
           }
       }else{
           alert("请输入整数");
       }
   }
       function load(){
          location.reload(location);
       }
   </script>
        <input type="text" id="txtGuess" style="text-align: center;width: 90px;height: 50px;font-size: larger;" /><br /><br />
       <input type="button" style="background-color: #6699CC;" value="确定" width="20px" height="10px" οnclick="guess()" />
       <input type="button" style="background-color: #9966CC;" width="20px" height="10px" value="刷新" οnclick="load()" />
       </div>
       </center>
   </body>
</html>

运行结果：

ACE1125

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
猜数字游戏

实现功能：1.随机产生一个数，在文本中输入猜的数；2.猜对了弹出正确窗口信息；3.猜大猜小也会弹出提示信息；4.点击刷新可以刷新网页，重新进行游戏。代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></...
复制链接

扫一扫