如何制作倒数计时器到jquery或js与倒计时时间(H:i:s)
How maker countdown timer to jquery or js with countdown time(H:i:s)?
美好的一天。
对不起,如果问题存在 - 我找不到答案(如果答案已经存在,请给我链接)
我有代码:
<div id="counttime">06:00:00</div> //h:i:s
我想制作一个倒数计时器,使divas的时间随着时间的推移减少1秒,并且当时间为00:00(i:s)时将执行功能函数();
决策不应该是第三方插件,而应该是纯js或jquery。
我开始制作脚本,但不知道下一步如何制作...
var start = $('#counttime').html();
var CountArrTime = (start.split(':')).length;
alert(CountArrTime);
if(CountArrTime == '3'){
var h_start = CountArrTime[0]; // hours start
var m_start = CountArrTime[1]; // minutes start
var s_start = CountArrTime[2]; // secounds start
}
else if(CountArrTime == '2'){
var m_start = CountArrTime[0]; // minutes start
var s_start = CountArrTime[1]; // secounds start
}
在div counttime
中的结果(时间结束时)应为 00:00(分钟:secounds);
如何在我的例子中倒计时小时、分钟、秒?
这是我
的看法。
注意大小,如果你离开并回来,它实际上可以正确保持时间
现场演示
function pad(num) {
return num<10?"0"+num:num;
}
$(function() {
var tCont = $('#counttime');
var timer = tCont.html().split(':');
if (timer.length === 2) timer.unshift(0);
var endMilli= timer[0]*60*60*1000;
endMilli += timer[1]*60*1000
endMilli += timer[2]*1000;
if(endMilli > 0) {
var endTime = new Date(Date.now()+endMilli);
var tId = setInterval(function() {
var diff = endTime.getTime()-Date.now();
if (diff<=0) {
tCont.html("00:00:00");
clearInterval(tId);
}
else {
var d = new Date(diff);
hh = pad(d.getUTCHours());
mm = pad(d.getMinutes());
ss = pad(d.getSeconds());
tCont.html(""+hh+":"+mm+":"+ss);
}
},300);
}
});
感谢您对链接的帮助。
我回答我的问题:
用于测试的 JSFIDLE
var timer = $('#counttime').html();
timer = timer.split(':');
if(timer.length == 3){
var hours = timer[0];
var minutes = timer[1];
var seconds = timer[2];
}
else if(timer.length == 2){
var hours = 0;
var minutes = timer[0];
var seconds = timer[1];
}
if(hours > 0 || minutes > 0 || seconds > 0){
setInterval(function() {
seconds -= 1;
if (seconds < 0 && minutes > 0 && hours > 0) {
minutes -= 1;
seconds = 59;
}
else if (seconds < 0 && minutes == 0 && hours > 0) {
hours -= 1;
minutes = 59;
seconds = 59;
}
else if (seconds < 0 && minutes > 0 && hours == 0) {
hours = 0;
minutes -= 1;
seconds = 59;
}
if(hours > 0 && hours < 10 && ((hours+'').length != 2)) hours = '0' + hours;
if ((minutes < 10) && ((minutes+'').length < 2)) minutes = '0' + minutes;
if (seconds < 10 && length.seconds != 2) seconds = '0' + seconds;
if(hours > 0){hoursN = hours + ':';}else{hoursN = '';}
$('#counttime').html(hoursN + minutes + ':' + seconds);
}, 1000);
}
相关文章:
- 如何在窗体打开时从javascript倒计时计时器值中节省时间
- 显示具有服务器端自动时间注销的同步倒计时计时器
- 创建一个倒计时计时器脚本,该脚本计算声音文件的持续时间,而不是特定的日期
- 我的时间倒计时脚本在谷歌浏览器中工作正常,但在其他浏览器中打开时它显示为南楠
- 在特定时间倒计时重置
- 如何制作倒计时计时器并在时间到时更新MySQL记录
- 在javascript中使用PHP时间字符串后,倒计时不起作用
- 钛合金未来的日子和时间倒计时
- 如何从服务器倒计时并在一段时间后触发事件
- 时间倒计时(角度2)
- 如何创建在特定时间重置的倒计时
- 倒计时计时器在Chrome和Firefox上显示不同的剩余时间
- 来自服务器的 GMT 时间倒计时计数
- 设置时间倒计时计时器jquery
- 日期时间倒计时,删除小数,并在每个类别中保留时间显示时间
- Javascript开放时间倒计时
- 如何在JS/PHP的Microtime中从服务器时间倒计时到最接近的半小时
- 使用angular js进行时间倒计时
- Jquery/Ajax/JavaScript时间倒计时不停
- 如何显示2位数的剩余时间[倒计时jquery]