前端：在网页上使用JavaScript实现的猜数字（超简单入门版）

最新推荐文章于 2024-06-30 12:46:56 发布

christen-c

最新推荐文章于 2024-06-30 12:46:56 发布

阅读量307

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_50922984/article/details/131597461

版权

在页面实现一个简单的猜数字游戏，效果如下

源码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>guess</title>

</head>
<body>

    <button type="button" id="reset">重新开始</button><br>
    请输入一个不大于100的自然数:<input type="text" id="num">
    <button type="button" id="guess">猜一猜</button><br>
    次数：<span id="count">0</span><br>
    结果：<span id="result"></span><br>
    

    <script>
        //选择对应的id
        var inputNum = document.querySelector('#num');
        var countNum = document.querySelector('#count');
        var guessBtn = document.querySelector('#guess');
        var resetBtn = document.querySelector('#reset');
        var resultNum = document.querySelector('#result');
        //定义一个guessNum 随机数，值为[0,100]
        //Math.floor () 函数返回小于等于一个给定数字的最大整数
        //Math.random() 函数返回一个浮点数，伪随机数在范围从0 到小于1 
        var guessNum = Math.floor(Math.random() * 100) + 1;
        var count = 0;//猜测次数
        //点击猜测按钮 使猜测次数+1
        guessBtn.onclick = function(){
            count++;
            countNum.innerText = count;//将次数赋值给countNum所选择元素的文本
            //element.innerText()会去除html标签，同时换行和空格也会去掉，但字符串中的标签会原样打印出来
            //element.innerHTML()会包括html标签，同时保留空格和换行，打印时会按照书写格式
            //定义一个你猜的数字 赋值文本框所输入的值
            var userGuess = parseInt(inputNum.value);
            //判断值是否猜对
            if(userGuess == guessNum){
                resultNum.innerText = "猜对啦！";
                resultNum.style = "color : green";
            }else if(userGuess < guessNum){
                resultNum.innerText = "猜小了";
                resultNum.style = "color : red"
            }else{
                resultNum.innerText = "猜大了";
                resultNum.style = "color : red"
            }
        };
        //按下按钮重置
        resetBtn.onclick = function(){
            guessNum = Math.floor(Math.random() * 100) + 1;
            count = 0;
            countNum.innerText = count;
            resultNum.innerText = ''; //文本
            inputNum.value = ''; //文本框里的value值
        }
    </script>

    
</body>
</html>