简单用JavaScript做一个猜数字小游戏_js做猜数字游戏-CSDN博客

<!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{
        width: 50%;
        max-width: 800px;
        min-width: 480px;
        margin: 0 auto;
      }
    </style>

</head>
<body>
    <h1>猜数字游戏</h1>
    <div>
        我随机选定了一个100以内的数字，看你是否能在10次以内猜中，
        每次我都会告诉你所猜的结果是大了还是小了
        <p>你总共有5次机会哦！</p>
    </div>
    <br>
    <div class="s1">
        <label for="guessfiled">请猜数：</label>
        <input type="text" id="guessfiled" class="Guessfiled">
        <input type="submit" value="确定" id="guesssubmit" class="Guesssubmit">
    </div>

    <div id="resultparas">
        <p id="lastresult"></p>
        <p class="guess"></p>
        <p id="low"></p>
        <p id="low1"></p>
    </div>
    
</body>
</html>
<script>

    const guess1=document.querySelector('.guess')
    let secret=Math.floor(Math.random()*100)+1;
    let guesscount=1;

    function Random(){
       var userguess=Number(guessfiled.value);

        if(guesscount===1){
                guess1.textContent='上次猜的数：'
        }
        guess1.textContent += userguess + ' ';
        if(userguess===secret){
            lastresult.textContent= '猜对了'
           lastresult.style.backgroundColor='green'     //将<p>标签改颜色
        }else if(guesscount===5){
            lastresult.textContent='!!!GAME OVER!!!'
            guessfiled.disabled=true
            guesssubmit.disabled=true
            lastresult.style.backgroundColor = 'yellow';
            }
            else{
            lastresult.textContent = '你猜错了！';
            lastresult.style.backgroundColor = 'red';
            if(userguess>secret){
                low.textContent='你猜大了'
            }else if(userguess<secret){
                low.textContent='你猜小了'
            }
        }
        guesscount++;
        guessfiled.value=' '
        guessfiled.focus()
    }
    guesssubmit.addEventListener('click',Random);

</script>