Question

JavaScript和html的新手，希望编写具有3个标签的代码，并且每个标签会定期更改为随机数（0-9）。用户键入一个数字，每次单击该数字，计数器得分将增加++。如果单击任何其他数字，则计数器将减少。我可以找到的最接近的示例显示了一个类似的游戏，但是使用图像代替了整数标签。

var totalscore = 0;
    var counter = 0;
    var Schedule;
    
    function happyFish() {
      totalscore++;
      var happyclickSpan = document.getElementById("score");
      happyclickSpan.innerHTML = totalscore;
      counter = counter + 1;
      if (counter == 10) {
        clearInterval(Schedule);
        var finalwords = document.getElementById("d");
        finalwords.innerHTML = "Your Score:" + counter + " Game Over. You Win!";
      }
    
    }
    
    function sadFish() {
      totalscore--;
      var sadclickSpan = document.getElementById("score");
      sadclickSpan.innerHTML = totalscore;
      counter = counter - 1;
      if (counter == -10) {
        clearInterval(Schedule);
        var finalwords = document.getElementById("d");
        finalwords.innerHTML = "Your Score:" + counter + " Game Over. You Lose!";
      }
    }
    
    function StartAnimation() {
      counter = 0;
      totalscore = 0;
      var initialWords = document.getElementById("d");
        initialWords.innerHTML = "Your Score: <span id=\"score\">0</span>";
    
      Schedule = setInterval(animationfunction, 500);
    }
    
    function animationfunction() {
      var fish_img = document.getElementById("happy_fish");
      var f_img = document.getElementById("sad_fish");
    
      fish_img.classList.toggle('off');
      f_img.classList.toggle('off');
    }

    <button onClick="StartAnimation()">Start Animation</button>
    <br>
    <img src="triangle.png" alt="happy" id="1" onClick="happyFish()">
    <img src="circle.png" alt="sad" id="sad_fish" class="off" onClick="sadFish()">
    <br>
    <h1 id="d">
      Your Score: <span id="score">0</span>
    </h1>

Answer 1

我无法完全理解您想要什么，但是我修复了您代码中的一些错误：

快乐图片应具有ID happy_fish
为使切换off类生效，我创建了一个off类，隐藏了该元素。

尝试一下：

var totalscore = 0;
    var counter = 0;
    var Schedule;
    
    function happyFish() {
      totalscore++;
      var happyclickSpan = document.getElementById("score");
      happyclickSpan.innerHTML = totalscore;
      counter = counter + 1;
      if (counter == 10) {
        clearInterval(Schedule);
        var finalwords = document.getElementById("d");
        finalwords.innerHTML = "Your Score:" + counter + " Game Over. You Win!";
      }
    
    }
    
    function sadFish() {
      totalscore--;
      var sadclickSpan = document.getElementById("score");
      sadclickSpan.innerHTML = totalscore;
      counter = counter - 1;
      if (counter == -10) {
        clearInterval(Schedule);
        var finalwords = document.getElementById("d");
        finalwords.innerHTML = "Your Score:" + counter + " Game Over. You Lose!";
      }
    }
    
    function StartAnimation() {
      counter = 0;
      totalscore = 0;
      var initialWords = document.getElementById("d");
        initialWords.innerHTML = "Your Score: <span id=\"score\">0</span>";
    
      Schedule = setInterval(animationfunction, 500);
    }
    
    function animationfunction() {
      var fish_img = document.getElementById("happy_fish");
      var f_img = document.getElementById("sad_fish");
    
      fish_img.classList.toggle('off');
      f_img.classList.toggle('off');
    }

.off{
  display:none;
}

<button onClick="StartAnimation()">Start Animation</button>
    <br>
    <img src="triangle.png" alt="happy" id="happy_fish" onClick="happyFish()">
    <img src="circle.png" alt="sad" id="sad_fish" class="off" onClick="sadFish()">
    <br>
    <h1 id="d">
      Your Score: <span id="score">0</span>
    </h1>

Answer 2

可能会晚一点，但是，是的，在这里为这个问题发布我的最终代码，希望它可以帮助其他学生理解

html部分

<button onClick="startGame()">Start Game</button>
<button onClick="stopGame()">Stop Game</button>
</br>
<div>
    <p id="chosenNumber" style="font-size: 50px"></p>
</div>
<div>
    <p id="score" style="font-size:50px"></p>
</div>
<div>
<table border="0" width="100%">
    <td width="33.3%" height="250" style="font-size:300px" align="center">
    <p style="color:red" id="numberLeft" onclick="scoreGiver()"></p>
    </td>
    <td width="33.3%" style="font-size:300px" align="center">
    <p style="color:orange" id="numberMid" onclick="scoreGiver()"></p>
    </td>
    <td width="33.3%" style="font-size:300px" align="center">
    <p style="color:blue" id="numberRight" onclick="scoreGiver()"></p>
    </td>
</table>
</div>
<p>

和js部分

<script>
var totalscore = 0;
var counter = 0;
var schedule;



function startGame()
    {
        totalScore = 0;
        number = prompt("Please choose an integer between 0 and 9");
        document.getElementById("chosenNumber").innerHTML = "Your chosen number is: " + number; 
        document.getElementById("score").innerHTML = "Your score so far: " + totalScore;    


        schedule = setInterval(randomNumbers,1000);
    }
    function stopGame()
    {
        clearInterval(schedule);
    }
    function randomNumbers()
    {
        random1 = Math.floor((Math.random() * 9) + 0);
        random2 = Math.floor((Math.random() * 9) + 0);
        random3 = Math.floor((Math.random() * 9) + 0);
        document.getElementById("numberLeft").innerHTML = random1;  
        document.getElementById("numberMid").innerHTML = random2;   
        document.getElementById("numberRight").innerHTML = random3; 
    }
    function scoreGiver()
    {
        if ((number == random1) || (number == random2) || (number == random3))
        {
            totalscore++;
            document.getElementById("score").innerHTML = "Your score so far: " + totalscore;    
        }
        else
        {
            totalscore--;
            document.getElementById("score").innerHTML = "Your score so far: " + totalscore;    
        }

    }
</script>

如何为点击游戏创建随机动画随机整数0-9

2 个答案: