Question

这是我的代码。

     <head>
        <style type="text/css">

        </style>

        <script type="text/javascript">
              var pressed = 0

            function pullNumber() {
                var x=document.getElementById("number")
        x.innerHTML=Math.floor((Math.random()*100)+20);
            }
            function beginCountup() {
                var display = document.getElementById("display"),
                i = 0;
                setInterval(function(){display.textContent = ++i; }, 50);

            }
            window.onkeypress = function(event) {
                if (event.keyCode == 32) {
                beginCountup();
        }
            }
       </script>
     </head>

     <body>
        <h1>Stop the spacebar at:</h1><h1 id="number">0</h1>
        <button onclick="pullNumber()">Roll new number</button>
        <h1 id="display">0</h1>

     </body>

    </html>

CONCEPT：按按钮滚动随机数，（卷号）
然后他们的球员命中（空格键32）
目标是让玩家在目标号码的5中停止（我可能会在以后更改速度）
其余的我能做到。但我无法找到一个方法让空格键有一个多功能
按下另一个功能后切换。

再次开始空间，停止空间

Answer 1

您可以将setInterval()分配给变量并在那里停止。

window.onkeypress = function(e){
    if (e.keyCode == 32){
        clearInterval(window.interval)
    }
}

并更改setInterval(function(){display.textContent = i++; }, 50);
到
window.interval = setInterval(function(){display.textContent = i++; }, 50);

Answer 2

您可以在javascript中使用clearInterval()函数来清除设置为earliar的Interval。

它需要setInterval()函数的IntervalID来清除它。示例：clearInterval(IntervalID);

在这里你可以创建两个变量：

1.存储IntervalID：在调用clearInterval()函数时将使用它。

2.用于存储循环的状态：当按下空格键时，如果循环正在运行，我们应该停止循环。如果循环未运行，请启动它。

代码如下：

  <head>
        <style type="text/css">

        </style>

        <script type="text/javascript">
              var intervalID;
              var isCounntRunning=false;
              var pressed = 0


            function pullNumber() {
                var x=document.getElementById("number")
        x.innerHTML=Math.floor((Math.random()*100)+20);
            }
            function beginCountup() {
                var display = document.getElementById("display"),
                i = 0;
                intervalID=setInterval(function(){display.textContent = ++i; }, 50);

            }
            window.onkeypress = function(event) {
                if (event.keyCode == 32) {
                if(!isCounntRunning)
                {
                isCounntRunning=true;
                beginCountup();
                }
                else
                {
                isCounntRunning=false;
                clearInterval(intervalID);
                }
        }
            }
       </script>
     </head>

     <body>
        <h1>Stop the spacebar at:</h1><h1 id="number">0</h1>
        <button onclick="pullNumber()">Roll new number</button>
        <h1 id="display">0</h1>

     </body>

    </html>

再次按下空格时需要间隔暂停

2 个答案: