html实现猜数字游戏

html实现猜数字游戏

实现一个猜数字游戏:
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>猜数字游戏</title>
</head>
<body>
    <button id="reset">重新开始一局游戏</button>
    <br>
    请输入要猜的数字
    <input type="text" id="number">
    <button id="guess"></button>
    <br>
    已经猜的次数
    <span id="count">0</span>
    <br>
    结果:<span id="result"></span>
    <script>
        //1.先把需要用到的元素获取到
        <!--选中reset的-->
        let resetButton=document.querySelector("#reset");
        let num=document.querySelector("#number");
        let guess=document.querySelector("#guess");
        let contSpan=document.querySelector("#count");
        let resultSpan=document.querySelector("#result");
        //生成一个随机的整数,要求范围是:1-100
        //Math.random:范围是【0,1),所以想要生成一个1-100之间的随机数,则Math.random()*100
        //然后再将这个向下取整:Math.floor(Math.random())===>【0,99】
        //然后再加1===》【1,100】
        let guessNumber=Math.floor(Math.random()*100)+1;
        //3.给guess 猜 这个按钮设置点击事件
        let guessCount=0;       //这个表示猜的次数
        guess.onclick=function(){
            //1).先更新猜的次数
            guessCount+=1;
            contSpan.innerHTML=guessCount;
            //2).将输入框的内容取出来,和待猜的数字进行对比,以此来确定是猜高了还是猜低了
            //3).在界面上可以显示出是猜高了还是猜低了
            let userInput = parseInt(num.value);
            if(userInput == guessNumber){
                //猜对了
                resultSpan.innerHTML='猜对了';
                resultSpan.style.color='red';
            }else if(userInput>guessNumber){
                //猜高了
                resultSpan.innerHTML='猜高了';
                resultSpan.style.color='blue';
            }else{
                //猜低了
                resultSpan.innerHTML='猜低了';
                resultSpan.style.color='green';
            }
        }
        //4.针对 重新开启游戏 设置一个点击事件
        reset.onclick=function(){
          //实现删除所有已存在的信息
            //这是第一种方法
            // //1).重新生成随机数
            // let guessNumber=Math.floor(Math.random()*100)+1;
            // //2).将已经猜的次数清零
            // guessCount=0;
            // contSpan.innerHTML=guessCount;
            // //3).清空结果
            // resultSpan.innerHTML='';
            // //4).清空输入框
            // num.value='';

            //第二种方法
            //location和document类似,是浏览器提供的全局变量
            //document控制的是:页面结构
            //location控制的是:浏览器跳转
            location.reload();
        }
    </script>
</body>
</html>
  • 1
    点赞
  • 5
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:1024 设计师:我叫白小胖 返回首页
评论

打赏作者

不断完善的楠

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值