JavaScript应用——手把手教你做一个页面化猜数字游戏

<!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>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>
 
<script>
 
    //1.获取需要用到的元素
 
    let inputE = document.querySelector(”#number”);
 
    let countE = document.querySelector(”#count”);
 
    let resultE = document.querySelector(”#result”);
 
    let btn = document.querySelector(”#button”);
 
    let resetBtn = document.querySelector(”#reset”);
 
    // 2.随机生成一个 1-100 的数字
 
    let guessNumber = Math.floor(Math.random() * 100) + 1// 0 – 1 之间的数
 
    // 3.更新猜的次数
 
    let count = 0;//记录猜的次数
 
    btn.onclick = function() {
 
        count++;
 
        countE.innerText = count;
 
        let userGuess = parseInt(inputE.value);//将输入框中的字符串转换成整数
 
        //4.对比过程
 
        if (userGuess == guessNumber) {
 
            resultE.innerText = “猜对了”;
 
            resultE.style = “color: green;”;
 
        } else if (userGuess < guessNumber) {
 
            resultE.innerText = “猜小了”;
 
            resultE.style = “color: blue;”;
 
        } else {
 
            resultE.innerText = “猜大了”;
 
            resultE.style = “color: red;”;
 
        }
 
    };
 
    //5.实现重新开始一句游戏
 
    resetBtn.onclick = function() {
 
        //清空方法一
 
        //guessNumber = Math.floor(Math.random() * 100) + 1//重新生成随机数
 
        //count = 0;//将猜的次数设回0
 
        //countE.innerText = count;
 
        //resultE.innerText = “”;//将猜的结果清空
 
        //inputE.value = “”;//j将用户的输入框清空
 
        //清空方法二
 
        location.reload();
 
    }
 
</script>
 
</body>
 
</html>

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h64777.shtml

张贴在3