Question

我正在尝试使倒数计时器从15分0秒变为0分0秒，但似乎它不想在JsFiddle中显示。另一个程序是我的日期变量实际上没有设置为15分0秒。我该如何解决这个问题？

var date = new Date();
var sec = date.getSeconds();
var min = date.getMinutes();
var handler = function() {
  sec--;
  if (sec == 60) {
    sec = 0;
    min--;
    else if (sec < 0) {
      date.setSeconds(0);
    } else if (min < 0) {
      date.setMinutes(0);
    }
  }
  document.getElementById("time").innerHTML = (min < 10 ? "0" + min : min) + ":" + (sec < 10 ? "0" + sec : sec);
};
handler();
setInterval(handler, 1000);

<b>Offer Ends In:</b>
<h1 id="time" style="text-align: center"></h1>

Answer 1

嗯，首先，你在else之前没有一个右大括号，因此它甚至不会按原样运行。

另外，我不知道为什么你需要为倒数计时器摆弄日期对象，因为当前的日期/时间是无关紧要的。

你应该从以下内容开始：

function pad2(s) {
    return ("00" + s).slice(-2);
}

var handler = function() {
    if (--sec < 0) {
        sec = 59;
        if (--min < 0) {
            min = 0;
            sec = 0;
        }
    }
    document.getElementById("time").innerHTML = pad2(min) + ":" + pad2(sec);
};

var sec = 1;
var min = 15;
handler();
setInterval(handler, 1000);

你会注意到我已经重构了填充代码，因为你是否应该违反DRY原则是“有问题的”。你当然不应该在一行上违反它两次： - ）

在测试方面，您可以创建一个简单的静态页面，按如下方式运行计时器。

我也把开始时间减少到十几分钟，加速时间十倍，所以你不必等待整整一个小时就可以测试整个事情（它应该比一个人更多分钟完成）。

<html>
  <body>
    <b>Offer Ends In:</b>
    <h1 id="time" style="text-align: left"></h1>

    <script type="text/javascript">
      function pad2(s) {
          return ("00" + s).slice(-2);
      }

      var handler = function() {
          if (--sec < 0) {
              sec = 59;
              if (--min < 0) {
                  min = sec = 0;
              }
          }
          document.getElementById("time").innerHTML = pad2(min) + ":" + pad2(sec);
      };

      var sec = 6;
      var min = 10;
      handler();
      setInterval(handler, 100); // 10x normal speed, use 1000 for reality
    </script>
  </body>
</html>

Answer 2

对于初学者来说，else if之前没有右括号，你需要在document.getElementById之前删除大括号

Answer 3

1）为你的if条件关闭你的花括号。

2）您的代码无法正确加载，因为您的JavaScript在页面识别时间DIV元素之前加载。由于您没有首先使用事件监听器来加载页面，所以我添加了......它似乎正在工作。

3）重要提示......计时器逻辑需要大量的工作...你最好使用时间DIFF语句，否则你只需要计算秒数，分钟就可以得到200-300多行，小时，天等。

查看目前的页面有这个... 15：0-289

**更新**添加填充技术纠正了上述注释......

这是一个解决方案。 Check time difference in Javascript

<html>
    <head>

        <script type="text/javascript">
            var date = new Date();
            var sec = date.getSeconds();
            var min = date.getMinutes();
            document.addEventListener("DOMContentLoaded", function(event) { 
                var myTimer = setInterval(handler, 1000);
            });

            function pad2(s) {
                return ("00" + s).slice(-2);
            }

            var handler = function() {
                if (--sec < 0) {
                    sec = 59;
                    if (--min < 0) {
                        min = 0;
                        sec = 0;
                    }
                }
                document.getElementById("time").innerHTML = pad2(min) + ":" + pad2(sec);
            };
        </script>
    </head>

    <body>
        <b>Offer Ends In:</b>
        <h1 id="time" style="text-align: center"></h1>
    </body>
</html>

Answer 4

我刚刚做了StopWatch。你可以在没有按钮的情况下使用它，它会像你想的那样工作。

//<![CDATA[
/* external.js */
var doc, bod, htm, C, E, T, MillisecondConverter, StopWatch; // for use on other loads
addEventListener('load', function(){

var doc = document, bod = doc.body, htm = doc.documentElement;
C = function(tag){
  return doc.createElement(tag);
}
E = function(id){
  return doc.getElementById(id);
}
T = function(tag){
  return doc.getElementsByTagName(tag);
}
MillisecondConverter = function(milliseconds, displayMilliseconds){
  var ms = milliseconds, rh = ms/3600000, hp = Math.pow(10, rh.toString().length-2);
  this.hours = Math.floor(rh);
  var rm = (rh*hp-this.hours*hp)/hp*60, mp = Math.pow(10, rm.toString().length-2);
  this.minutes = Math.floor(rm);
  var rs = (rm*mp-this.minutes*mp)/mp*60, sp = Math.pow(10, rs.toString().length-2);
  if(displayMilliseconds){
    this.seconds = Math.floor(rs);
    this.milliseconds = Math.round((rs*sp-this.seconds*sp)/sp*1000);
  }
  else{
    this.seconds = Math.round(rs);
  }
  this.convert = function(){
    return this.hours.toString().replace(/^([0-9])$/, '0$1')+'&#058;'+this.minutes.toString().replace(/^([0-9])$/, '0$1')+'&#058;'+this.seconds.toString().replace(/^([0-9])$/, '0$1');
  }
}
StopWatch = function(displayNode, millisecondInterval){
  this.hours = this.minutes = this.seconds = this.milliseconds = 0;
  this.millisecondInterval = millisecondInterval || 1000;
  this.displayNode = displayNode; this.began = false; this.paused = false;
  var t = this, ms, iv, fi;
  this.begin = function(doneFunc, context){
    var c = context || this;
    ms = this.hours*3600000+this.minutes*60000+this.seconds*1000+this.milliseconds;
    var mc = new MillisecondConverter(ms), dn = this.displayNode, cv = mc.convert();
    if(dn.innerHTML || dn.innerHTML === ''){
      dn.innerHTML = cv;
    }
    else{
      dn.value = cv;
    }
    this.began = true;
    fi = function(mi){
      var nd = new Date, bt = nd.getTime(), ii = t.millisecondInterval;
      ms = mi;
      iv = setInterval(function(){
        var nd = new Date, ct = nd.getTime(), tl = ct-bt;   
        var mc = new MillisecondConverter(mi-tl), dn = t.displayNode;
        if(tl >= mi){
          clearInterval(iv); doneFunc.call(c); cv = '00&#058;00&#058;00';
          if(dn.innerHTML || dn.innerHTML === ''){
            dn.innerHTML = cv;
          }
          else{
            dn.value = cv;
          } 
          t.began = false;
          return;
        }
        cv = mc.convert(); ms -= ii;
        if(dn.innerHTML || dn.innerHTML === ''){
          dn.innerHTML = cv;
        }
        else{
          dn.value = cv;
        }
      }, ii);
    }
    fi(ms);
  }
  this.pause = function(){
    clearInterval(iv); iv = undefined; this.paused = true;
    return this;
  }
  this.resume = function(){
    fi(ms); this.paused = false;
    return this;
  }
}
var cd = new StopWatch(E('remain')), out = E('out');
cd.seconds = 30;
E('btn').addEventListener('click', function(){
  if(!cd.began){
    out.innerHTML = '';
    cd.begin(function(){
      out.innerHTML = 'Countdown Complete';
    });
  }
  else{
    cd.paused ? cd.resume() : cd.pause();
  }
});

});
//]]>

/* external.css */
html,body{
  padding:0; margin:0;
}
.main{
  width:980px; margin:0 auto;
}

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta http-equiv='content-type' content='text/html;charset=utf-8' />
    <title>StopWatch</title>
    <link type='text/css' rel='stylesheet' href='external.css' />
    <script type='text/javascript' src='external.js'></script>
  </head>
<body>
  <div class='main'>
    <div id='remain'>00&#058;00&#058;30</div>
    <input id='btn' type='button' value='StopWatch' />
    <div id='out'></div>
  </div>
</body>
</html>

倒数计时器程序有什么问题？

4 个答案: