html实现猜数字游戏

html实现猜数字游戏

实现一个猜数字游戏:
html实现猜数字游戏_第1张图片

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">0span>
    <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>

你可能感兴趣的:(html,前端)