js倒计时

最新推荐文章于 2024-12-03 11:08:57 发布

原创最新推荐文章于 2024-12-03 11:08:57 发布 · 375 阅读

0 ·

CC 4.0 BY-SA版权

jsp/js/css 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了两种不同的倒计时实现方案。第一种使用纯 JavaScript 和 HTML 实现了一个可暂停、重启的倒计时器；第二种则利用 jQuery 和 JavaScript 动态显示剩余时间直至指定日期结束。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种
<html>
<head>
<script type="text/javascript">
var c=100000000 
var t
function timedCount(){
document.getElementById('but').disabled=true
c=c-1000
if(c<0){
document.getElementById('txt').value="game over!"
return;
}
showTime(c)
t=setTimeout("timedCount()",1000)
}

function stopCount(){
document.getElementById('but').disabled=false
setTimeout(c,0);
clearTimeout(t);
}

function resetCount(){
stopCount();
c=100000000
showTime(c)
}

function showTime(nMS){
    var nD = Math.floor(nMS/(1000 * 60 * 60 * 24));  
    var nH = Math.floor(nMS/(1000*60*60)) % 24;  
    var nM = Math.floor(nMS/(1000*60)) % 60;  
    var nS = Math.floor(nMS/1000) % 60; 
    if (nS<10)nS ="0" +nS 
    document.getElementById('txt').value=nH+":"+nM+":"+nS;  
}  

</script>
</head>
<body>
<form>
<input type="button" value="开始计时！" onClick="timedCount()" id="but">
<input type="button" value="停止计时！" onClick="stopCount()">
<input type="button" value="重置计时！" onClick="resetCount()">
<input type="text" id="txt">
</form>
</body>
</html>




第二种
var EndTime = new Date('${groupon.endTime}');
var NowTime = new Date();
var nMS = EndTime.getTime() - NowTime.getTime();

$(document).ready(function(){
	if(nMS>1000){
		window.setInterval(showTime,1000);
	}else{
		$("#ctcontent").text("已过期！");
	}
// 	setTimeout("showTime()",1000); 
});

function showTime(){debugger
	nMS = nMS - 1000;
	var nD = Math.floor(nMS/(1000 * 60 * 60 * 24));
	var nH = Math.floor(nMS/(1000*60*60)) % 24;
	var nM = Math.floor(nMS/(1000*60)) % 60;
	var nS = Math.floor(nMS/1000) % 60;
	$("#ctday").text(nD);
	$("#cttime").text(nH+":"+nM+":"+nS);
}