猜数字小游戏前端 html css js

最新推荐文章于 2024-04-27 13:48:08 发布

LRF200307

最新推荐文章于 2024-04-27 13:48:08 发布

阅读量307

点赞数 1

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/lrf200307/article/details/131068913

版权

<!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>猜数字</title>
    <style>
        body {
            background: #eee;
        }

        div {
            margin: 200px 500px;
        }

        input {
            margin-top: 20px;
            width: 200px;
            height: 40px;
        }

        p {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <section>猜数字小游戏</section>
        <input type="text" value="">
        <button>提交</button>
        <p></p>
        <button onclick="restart()">重新开始</button>
    </div>
    <script>
        let input = document.querySelector("input");
        let button = document.querySelector("button");
        let p = document.querySelector("p");
        let maxvalue = 100;
        let minvalue = 0;
        let count = 1;


        // 生成随机数
        let s = Math.floor(Math.random(1) * (maxvalue + 1));
        // let s=1;
        input.placeholder = "请输入" + minvalue + "-" + (maxvalue - 1) + "之间的数"
        let test = function () {
            console.log(1);
            if (isNaN(input.value)) {
                p.innerHTML = "您输入的不是数字,请重新输入";
                input.value = "";
                return;
            }
            if (input.value > maxvalue) {
                p.innerHTML = "您输入的数字过大,请重新输入,范围在" + minvalue + "-" + maxvalue + "之间";
                input.value = "";
                return;
            }
            if (input.value < minvalue) {
                p.innerHTML = "您输入的数字太小,请重新输入,范围在" + minvalue + "-" + maxvalue + "之间";
                input.value = "";
                return;
            }
            if (input.value == s) {
                p.innerHTML = "恭喜你，答对了！用了" + count + "次机会";
                p.style.color = "blue";
                return;
            } else if (input.value > s) {
                p.innerHTML = "对不起你答错了,你的答案大了,答案区间为:" + minvalue + "-" + input.value;
                maxvalue = input.value;
                input.value = "";
            } else {
                p.innerHTML = "对不起你答错了,你的答案小了,答案区间为:" + input.value + "-" + maxvalue;
                minvalue = input.value;
                input.value = "";
            }
            count++;
        }
        button.addEventListener('click', test)

        document.addEventListener('keyup', function (e) {
            if (e.keyCode === 13) {
                test();
            }
        })

        // 重新开始
        function restart() {
            console.log(111);
            location.reload()
        }
    </script>
</body>
</html>