当前位置:  开发笔记 > 编程语言 > 正文

如何将计数器值显示到输出中以开始倒计时

如何解决《如何将计数器值显示到输出中以开始倒计时》经验,为你挑选了0个好方法。

我正在建立一个柜台,并有一些问题.我有一个计数器字段,其中增量和减量发生(默认情况下,它是5分钟).按下"开始"按钮时,最终计数器的数字应设置为输出字段中的计时器.这是我的解决方案:

;(function(){
  var output = document.querySelector('#output'),
    btn = document.querySelector('button'),
    min = 5,
    sec = min * 60,
    timer;

setCount(min);

  function setCount(n){
    var c = document.querySelector('#counter'),
        increment = c.children[1].children[0],
        decrement = c.children[1].children[2],
        num  = c.children[1].children[1];      

    increment.onclick = function(){
      if(n >= 1) {num.textContent = ++n;}
    };  

    decrement.onclick = function(){
      if(n > 1) {num.textContent = --n;}
    };  
    num.textContent = n;
   }

  function setTimer(){

    var currentMin = Math.round((sec - 30) / 60),
        currentSec = sec % 60;

    if(currentMin >= 0 ) {currentMin = '0' + currentMin;}
    if(currentSec <= 9 ) {currentSec = '0' + currentSec;}  
    if(sec !== 0){sec--;}
    timer = setTimeout(setTimer,10);  // 10 is for the speedy
    output.textContent = currentMin + ':' + currentSec;  
  }

  btn.addEventListener('click', setTimer, false);
  })();

这是链接:JS Bin

推荐阅读
喜生-Da
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有