猜数字 js

最新推荐文章于 2024-08-23 20:55:13 发布

原ℳ来

最新推荐文章于 2024-08-23 20:55:13 发布

阅读量47

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/weixin_52983838/article/details/129830297

版权

这是一个使用HTML和JavaScript编写的猜数字小游戏，用户输入猜测的数字，程序会生成一个1到10之间的随机数进行比较。如果猜大了或猜小了，页面会给出提示，猜对后用户可以选择再来一次。游戏逻辑包含在JavaScript函数中，包括生成随机数、处理用户输入和显示结果。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #reguess{
            display: none;
        }
    </style>
</head>
<body>
    <div id="res"></div>
    <input id="num" type="text">
    <button id="guess" onclick="guess()">猜一猜</button>
    <button id="reguess" onclick="reguess()">再来一次</button>
    <script>
         var _num=document.getElementById("num"); //表单
         var _res=document.getElementById("res"); //结果
         var _reguess=document.getElementById("reguess"); //结果
         //生成随机数
         let random=Math.ceil(Math.random()*10);
         console.log(random);
        //  猜一猜
         function guess(){
            //获取用户输入值
            let num=_num.value*1;
            let res=''; //结果
            if(num>random){
                res="猜大了"
            }else if(num<random){
                res="猜小了"
            }else{
                res="猜对了" 
                _reguess.style.display="inline-block";

            }
            //将结果存入div
            _res.innerHTML=res;

         }
        //再来一次
        function reguess(){
            // 隐藏再来一次
            _reguess.style.display='none';
            //清空结果
            _res.innerHTML="";
            //清空表单
            _num.value=""
            //重新生成随机数
            random=Math.ceil(Math.random()*10);
            console.log(random);
        }
    </script>
</body>
</html>