如何按小时制作倒计时功能?

时间:2016-07-22 07:36:03

标签: javascript jquery

我试着做倒计时功能,除非是小时,这是工作!但我想倒数2小时的时间,我无法计算更多?

<div id="time"></div>
<script type="text/javascript">
var hour = 2 ;
var min = 30;
 var countdown = hour * min * 60 * 1000;
 //var countdown = hour * 3600 * min * 60 * 1000; also not working
    var timeload = setInterval(function () {
        countdown -= 1000;
        var hr   = Math.floor(countdown/(60 * 60 * 1000));
        var min = Math.floor(countdown / (60 * 1000));
        var sec = Math.floor((countdown - (min * 60 * 1000)) / 1000);  

        if (countdown <= 0) {
            alert("Timeout !");
            clearInterval(timeload);           
        }
         else {            
            $("#time").html("<font color='red'>Allowed Time </font>" + hr + " : " + min + " : " + sec);
        }
    }, 1000);
</script>

实际开始时间 允许时间0:59:59

预计开始时间允许时间2:29:59

3 个答案:

答案 0 :(得分:1)

你可以尝试这个解决方案,你在计算时间上有错误(hrminsec)它应该模数到每个值的最大值,而且你在转换时错了{{ 1}}和hour到毫秒

&#13;
&#13;
min
&#13;
var hour = 2 ;
var min = 30;
var countdown = (hour * 60 * 60 * 1000) + (min * 60 * 1000);
var timeload = setInterval(function () {
  countdown -= 1000;
  var hr   = Math.floor( (countdown / (60 * 60 * 1000)) % 24 );
  var min = Math.floor( (countdown / (60 * 1000)) % 60 );
  var sec = Math.floor( (countdown / 1000) % 60 );  

  if (countdown <= 0) {
    alert("Timeout !");
    clearInterval(timeload);           
  }
  else {            
    $("#time").html("<font color='red'>Allowed Time </font>" + hr + " : " + min + " : " + sec);
  }
}, 1000);
&#13;
&#13;
&#13;

答案 1 :(得分:0)

我认为你的计算可能有误。您不希望将小时数乘以分钟数,而是以某种方式将它们相加。

// useful numbers for calculations into milliseconds
var _1sec = 60 * 1000, _1min = 60 * _1sec, _1hr = 60 * min;

// renamed `hour` to cHR (countdown hour) so I can keep things straight in my head
var total_ms = (cHr * _1hr) + (cMin * _1min);

显示的小时/分钟/秒也需要重新加工。

// Mod (%) takes the remainder after division. So countdown % _1hr takes whatever is left over that doesn't go into whole hours, etc.
hr = Math.floor(countdown / _1hr);
min = Math.floor((countdown % _1hr) / _1min);
sec = Math.floor((countdown % _1min) / _1sec);

答案 2 :(得分:0)

在开始和结束之间使用差异的示例

var hour = 2;
var min = 30;
var finish = new Date();
finish.setHours(finish.getHours() + hour);
finish.setHours(finish.getHours(), finish.getMinutes() + min)
var diff = finish.getTime() - new Date().getTime()
var timeload = setInterval(function() {
  diff -= 1000
  var s = Math.floor(diff / 1000);
  var m = Math.floor(s / 60);
  var h = Math.floor(m / 60);
  h %= 24;
  m %= 60;
  s %= 60;
  if (diff <= 0) {
    alert("FINISH!!");
    clearInterval(timeload);
  } else {
    $("#time").html("<font color='red'>Allowed Time </font>" + h + " : " + m + " : " + s);
  }
}, 1000)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="time"></div>