Fatal编程技术网

使用香草JavaScript倒计时

javascript

使用香草JavaScript倒计时,javascript,countdown,Javascript,Countdown,我的网页上有一个文本区和3个按钮。text区域接收一个数字。第一个按钮启动coutdown，从数字到0，输出延迟（每秒一个数字，因此如果N为10，则需要10秒）。第二个按钮暂停倒计时，第三个按钮继续倒计时（不重新开始）。在执行过程中的任何时候按下第一个按钮，都会使用文本区域中的任何数字重新启动coutdown。这是我目前掌握的代码： <!DOCTYPE html> <html> <body> <h2>Insert a num

我的网页上有一个
文本区
和3个
按钮
。
text区域
接收一个数字。第一个
按钮
启动coutdown，从数字到0，输出延迟（每秒一个数字，因此如果N为10，则需要10秒）。第二个
按钮
暂停倒计时，第三个
按钮
继续倒计时（不重新开始）。在执行过程中的任何时候按下第一个
按钮
，都会使用
文本区域中的任何数字重新启动coutdown。这是我目前掌握的代码：


<!DOCTYPE html>
<html>
    <body>
        <h2>Insert a number:</h2>
        <textarea id="input"></textarea>
        <br/>
        <button id="start" onclick="begin()">BEGIN</button>
        <button id="pause" onclick="pause()">PAUSE</button>
        <button id="resume" onclick="resume()">RESUME</button>
        <h1 id="result"></h1>
        <script>
            var isCounting=true,
                input=document.getElementById("input"),
                countSec;
            function begin() {
                countSec=input.value;
                if (isNaN(countSec)) alert("NaN");
                count();
            }
            function pause() {
                isCounting=false;
            }
            function resume() {
                isCounting=true;
                count();
            }
            function count() {
                var i,
                    bck=countSec;
                for (i=0; i<=bck; i++) {
                    document.getElementById("result").innerHTML=countSec;
                    countSec--;
                }
            }
        </script>
    </body>
</html>




插入一个数字：


开始
暂停
简历
var isCounting=真，
输入=document.getElementById（“输入”），
countSec；
函数begin（）{
countSec=输入值；
如果（isNaN（计数秒））警报（“NaN”）；
计数（）；
}
函数暂停（）{
isCounting=错误；
}
功能恢复（）{
isCounting=正确；
计数（）；
}
函数计数（）{
var i，
bck=计数秒；

对于（i=0；i如果您在每次countSec减法之间需要延迟，那么我建议您使用
setInterval
函数。我对您的代码进行了如下修改：


var isCounting=true,
    input=document.getElementById("input"),
    countSec
    interval;
function begin() {
    countSec=input.value;
    if (isNaN(countSec)) alert("NaN");
    count();
}
function pause() {
    isCounting=false;
    clearInterval(interval);
}
function resume() {
    isCounting=true;
    count();
}
function count() {
    var i,
        bck=countSec;

    document.getElementById("result").innerHTML=bck;               

    interval = setInterval(function() {
        countSec--;
        document.getElementById("result").innerHTML=countSec;               
    }, 1000);
}


具体来说，我创建了一个全局
interval
变量，该变量将保留对间隔的引用。我在count（）中设置了间隔，然后在间隔的每个刻度（延迟1000毫秒）更新
#result
ID。要暂停，我清除了间隔。我保留了很多代码，即使其中一些代码没有被使用（如计数）


下面是实际操作的代码：
这听起来像是实现Javascript内置异步间隔操作的完美场景

您的计时器应该以
setInterval
（）为中心。基本上，您将设置每秒触发的间隔，这将增加计数器

要暂停倒计时，您需要使用
clearInterval
（）。您还可以使用intervalID来确定setInterval计时器是否正在运行

这些构建块应该可以帮助您继续。如果您需要更多信息，请询问。
这里有一个选项：


    <script>
        var input=document.getElementById("input"),
            countSec,
            timer = null;

        function begin() {
            countSec=input.value;
            if (isNaN(countSec)) alert("NaN");
            if( timer === null ) {
                timer = setTimeout( count, 1000 );
            }
        }

        function pause() {
            clearTimeout( timer );
            timer = null;
        }

        function resume() {
            if( timer === null ) {
                timer = setTimeout( count, 1000 );
            }
        }

        function count() {
            if( countSec > 0 ) {
                countSec--;
            }

            document.getElementById("result").innerHTML = countSec;

            if( countSec > 0 ) {
                timer = setTimeout( count, 1000 );
            }
        }
    </script>




var input=document.getElementById（“输入”），
countSec，
定时器=空；
函数begin（）{
countSec=输入值；
如果（isNaN（计数秒））警报（“NaN”）；
如果（计时器===null）{
定时器=设置超时（计数，1000）；
}
}
函数暂停（）{
清除超时（计时器）；
定时器=空；
}
功能恢复（）{
如果（计时器===null）{
定时器=设置超时（计数，1000）；
}
}
函数计数（）{
如果（计数秒>0）{
计数秒--；
}
document.getElementById（“结果”）.innerHTML=countSec；
如果（计数秒>0）{
定时器=设置超时（计数，1000）；
}
}


当调用
begin
时，它会在1秒后将计时器设置为打开
count

当稍后调用
count
时，它会减少计数器，更新html，并使用
setTimeout（）
将自己安排在1秒后调用（当然，除非计数器达到零）

计划任务存储在
计时器中，因此可以使用
clearTimeout（）
取消它（请参阅
暂停（）
）

要恢复倒计时，只需再次调用
count（）


timer
在计数器未运行时设置为
null
，并在启动之前进行检查，以确保只有一个计数器正在运行。
您希望的是让
count
函数包含一个自调用计时器，如下所示：


var timer;

function count() {
    var result = document.getElementById("result");

    step();

    function step() {
        result.innerHTML=countSec;
        countSec--;
        if (countSec > 0) {
            timer = setTimeout(step, 1000);
        }
    }
}


但是要知道，超时时间实际上并不算1000毫秒。如果你想准确，你必须将它与开始的时间进行比较。并降低间隔：


var timer,
    start,
    moment,
    input = document.getElementById("input"),
    result = document.getElementById("result");

function begin() {
    var from = ((parseInt(input.value) + 1) * 1000);
    start = Date.now() + from;
    setTimeout(count, 40);
}

function pause() {
    clearTimeout(timer);
}

function resume() {
    start = Date.now() + (moment * 1000);
    count();
}

function count() {
    moment = parseInt((start - Date.now()) / 1000);
    result.innerHTML = moment;
    if (moment > 0) {
        timer = setTimeout(count, 200);
    }
}



我认为大多数解决方案已经回答了您的问题。在解决方案中加入区间操作是一个更好的主意，因为这更合适，JS已经提供了它


    

  • 另外一个更好的办法是分离JS和HTML（避免使用内联事件处理程序）
    • 


HTML


<h2>Insert a number:</h2>
<textarea id="input"></textarea>
<br/>
<button id="start">BEGIN</button>
<button id="pause">PAUSE</button>
<button id="resume">RESUME</button>
<h1 id="result"></h1>



当计数为零时，您可以使用有效期和



var isCounting=true，
输入=document.getElementById（“输入”），
countSec，
有效期；
函数begin（）{
countSec=+input.value；
如果（isNaN（计数秒））{
警报（“NaN”）；
返回；
}
document.getElementById（“结果”）.innerHTML=countSec；
intervalID=setInterval（计数，1000）；
}
函数暂停（）{
isCounting=错误；
}
功能恢复（）{
isCounting=正确；
}
函数计数（）{
如果（countSec==0）{
clearInterval（intervalID）；
返回；
}
如果（正在计算）{
计数秒--；
document.getElementById（“结果”）.innerHTML=countSec；
}
}


插入一个数字：


开始
暂停
简历

这是另一个解决方案


<!DOCTYPE html>
<html>

  <body>
    <h2>Insert a number:</h2>
    <textarea id="input"></textarea>
    <br/>
    <button id="start" onclick="begin()">BEGIN</button>
    <button id="pause" onclick="pause()">PAUSE</button>
    <button id="resume" onclick="resume()">RESUME</button>
    <h1 id="result"></h1>
    <script>
      let isCounting = true;
      let input = document.getElementById("input");
      let countSec = 0;
      let countDownInterval = false;

      function begin() {
        countSec = input.value;
        if (isNaN(countSec)) alert("NaN");
        count();
      }

      function pause() {
        isCounting = false;
      }

      function resume() {
        isCounting = true;
      }

      function count() {
        // Let's check we're doing a restart 
        if (countDownInterval) {
          clearInterval(countDownInterval);
        }

        countDownInterval = setInterval(function() {
          if (isCounting) {
            document.getElementById("result").innerHTML = countSec;
            countSec -= 1;
            // Times up ??
            if (countSec == -1) {
              clearInterval(countDownInterval);
              countDownInterval = null;
            }
          }
        }, 1000);
      }

    </script>
  </body>

</html>




插入一个数字：


开始
暂停
简历
让isCounting=真；
让输入=document.getElementById（“输入”）；
设countSec=0；
让倒计时间隔=假；
函数begin（）{
countSec=输入值；
如果（isNaN（计数秒））警报（“NaN”）；
计数（）；
}
函数暂停（）{
isCounting=错误；
}
功能恢复（）{
isCounting=正确；
}
函数计数（）{
//让我们检查一下，我们正在做一个重新测试

<!DOCTYPE html>
<html>

  <body>
    <h2>Insert a number:</h2>
    <textarea id="input"></textarea>
    <br/>
    <button id="start" onclick="begin()">BEGIN</button>
    <button id="pause" onclick="pause()">PAUSE</button>
    <button id="resume" onclick="resume()">RESUME</button>
    <h1 id="result"></h1>
    <script>
      let isCounting = true;
      let input = document.getElementById("input");
      let countSec = 0;
      let countDownInterval = false;

      function begin() {
        countSec = input.value;
        if (isNaN(countSec)) alert("NaN");
        count();
      }

      function pause() {
        isCounting = false;
      }

      function resume() {
        isCounting = true;
      }

      function count() {
        // Let's check we're doing a restart 
        if (countDownInterval) {
          clearInterval(countDownInterval);
        }

        countDownInterval = setInterval(function() {
          if (isCounting) {
            document.getElementById("result").innerHTML = countSec;
            countSec -= 1;
            // Times up ??
            if (countSec == -1) {
              clearInterval(countDownInterval);
              countDownInterval = null;
            }
          }
        }, 1000);
      }

    </script>
  </body>

</html>