JavaScript 倒计时,添加小时和分钟
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/18262697/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript count down, add hours & minutes
提问by doc holiday
So, I have the below (seconds countdown) in good order. But! I am trying to add hours & minutes as apart of the count down as well. Ideally keeping the same structure, and just using pure JS. I would like the output to be:
所以,我有以下(秒倒计时)井井有条。但!除了倒计时,我还尝试添加小时和分钟。理想情况下保持相同的结构,并且只使用纯 JS。我希望输出是:
There is X hours, X minutes, and X seconds remaining on this Sale!
本次促销还有 X 小时 X 分钟 X 秒!
var count=30;
var counter=setInterval(timer, 1000); //1000 will run it every 1 second
function timer()
{
count=count-1;
if (count <= 0)
{
clearInterval(counter);
return;
}
document.getElementById("timer").innerHTML=count + " secs"; // watch for spelling
}
If the solution has to be a rewrite with jQuery or another library; that's fine. Just not preferable. Cheers and Salutations for any help.
如果解决方案必须是用 jQuery 或其他库重写;没关系。只是不优选。为任何帮助干杯和致意。
回答by putvande
Something like this:
像这样的东西:
var count = 30;
var counter = setInterval(timer, 1000); //1000 will run it every 1 second
function timer() {
count = count - 1;
if (count == -1) {
clearInterval(counter);
return;
}
var seconds = count % 60;
var minutes = Math.floor(count / 60);
var hours = Math.floor(minutes / 60);
minutes %= 60;
hours %= 60;
document.getElementById("timer").innerHTML = hours + "hours " + minutes + "minutes and" + seconds + " seconds left on this Sale!"; // watch for spelling
}
回答by Alex Wayne
var totalSeconds = 3723; // lets say we have 3723 seconds on the countdown
// that's 1 hour, 2 minutes and 3 seconds.
var hours = Math.floor(totalSeconds / 3600 );
var minutes = Math.floor(totalSeconds % 3600 / 60);
var seconds = totalSeconds % 60;
var result = [hours, minutes, seconds].join(':');
console.log(result);
// 1:2:3
hours
is seconds divided by the number of seconds in hour (3600) rounded downminutes
is the remainder of the above division, divided by the number of seconds in a minute (60), rounded down.seconds
is the remainder of total seconds divided by seconds in a minute.
hours
是秒除以小时 (3600) 中的秒数四舍五入minutes
是上述除法的余数除以一分钟内的秒数 (60),向下取整。seconds
是总秒数除以一分钟内的秒数的余数。
Each calculation after hour
has to use a modulus
calculation to get the remainder, because you don't care about total time at that step, just progress to the next tick.
之后的每次计算hour
都必须使用modulus
计算来获得余数,因为您不关心该步骤的总时间,只需进行到下一个刻度。
回答by Grim...
I would use a similar method to the others, but I wouldn't rely on setInterval / setTimeout as a timer, especially if users might be looking at the page for some time, as it tends to be inaccurate.
我会使用与其他方法类似的方法,但我不会依赖 setInterval / setTimeout 作为计时器,特别是如果用户可能会查看页面一段时间,因为它往往不准确。
var endTime = new Date(2013, 10, 31).getTime() / 1000;
function setClock() {
var elapsed = new Date().getTime() / 1000;
var totalSec = endTime - elapsed;
var d = parseInt( totalSec / 86400 );
var h = parseInt( totalSec / 3600 ) % 24;
var m = parseInt( totalSec / 60 ) % 60;
var s = parseInt(totalSec % 60, 10);
var result = d+ " days, " + h + " hours, " + m + " minutes and " + s + " seconds to go!";
document.getElementById('timeRemaining').innerHTML = result;
setTimeout(setClock, 1000);
}
setClock();
This method calculates the difference between now and the date in the future each time it is run, thus removing any inaccuracies.
此方法每次运行时都会计算现在和未来日期之间的差异,从而消除任何不准确之处。
Here is an example: http://jsfiddle.net/t6wUN/1/
这是一个例子:http: //jsfiddle.net/t6wUN/1/