【Web应用技术基础】JavaScript(1)—

【Web应用技术基础】JavaScript(1)——案例：猜数字

news2024/10/6 22:22:36

上一个博客发了视频。这个博客因为不能插入视频，所以给大家一张一张截图的

点击“重新开始一局游戏”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button type="button" id="reset">重新开始一局游戏</button>
<br>
请输入要猜的数字：<input type="text" id="number">
<button type="button" id="button">猜</button>
<br>
已经猜的次数：<span id="count">0</span>
<br>
结果：<span id="result"></span>
</body>
<script>
    var inputE = document.querySelector("#number");
    var countE = document.querySelector("#count");
    var resultE = document.querySelector("#result");
    var btn = document.querySelector("#button");
    var resetBtn = document.querySelector("#reset");
    // 随机生成一个 1-100 的数字
    var guessNumber = Math.floor(Math.random() * 100) + 1
    var count = 0;
    btn.onclick = function() {
        count++;
        countE.innerText = count;
        var userGuess = parseInt(inputE.value);
        if (userGuess == guessNumber) {
            resultE.innerText = "猜对了";
            resultE.style = "color: gray;";
       } else if (userGuess < guessNumber) {
            resultE.innerText = "猜小了";
            resultE.style = "color: blue;";
       } else {
            resultE.innerText = "猜大了";
            resultE.style = "color: red;";
       }
   };
    resetBtn.onclick = function() {
        guessNumber = Math.floor(Math.random() * 100) + 1
        count = 0;
        countE.innerText = count;
        resultE.innerText = "";
        inputE.value = "";
   }
</script>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1566348.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！