js 倒计时代码总结分享
来源：自学PHP网
时间：2014-09-19 14:47 作者：
阅读:次
[导读] 倒计时这种效果我们会经常看到有，特别是团购网站倒计时，下面我总结了一些常用的js倒计时效果代码，有需要的朋友可参考。...
|
通过使用 JavaScript，我们有能力作到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。
在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:
setTimeout()
未来的某时执行代码
clearTimeout()
取消
setTimeout()
实例
| 代码如下 |
复制代码 |
|
function countdown(v,oid){
if(v==true){//先用ajax取得倒计时的基数（只有第一次运行这个函数的时候才会做）
$.get('json/get_countdown.php',function(data){
dtime = data;//得到秒
id = 'countdown';
t=setTimeout('countdown(false,'+oid+')',1000);
});
}else if(v==false){
clearTimeout(t);//这句很重要，不加这句的话在多次刷新页面的时候，倒计时会走的更快
h=checkTime(parseInt(dtime/3600));//计算小时
m=checkTime(parseInt(dtime/60%60));//计算分钟
s=checkTime(parseInt(dtime%60));//计算秒
$('#'+id).html(h+":"+m+":"+s);//将倒计时显示在一个html标签里面
dtime=dtime-1;
setTimeout('countdown(false,'+oid+')',1000);
|
调用方法很简单 countdonw(v,id)即可。
再看一个
| 代码如下 |
复制代码 |
|
<title> 演示实例：倒计时效果-精确到秒 </title>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<script language="JavaScript">
<!-- //
var overDate = 1000 * 60 * 60 * 24 * 3;//截止时间:为当前计算机时间+3天
var NowTime = new Date();
//var EndTime= new Date(2009,01,11,0,0);
var EndTime= new Date(NowTime.getTime() + overDate);
var EndTimeMsg = EndTime.getFullYear() + "年";
EndTimeMsg = EndTimeMsg + (EndTime.getMonth()+1) + "月";
EndTimeMsg = EndTimeMsg + (EndTime.getDate()) + "日";
EndTimeMsg = EndTimeMsg + (EndTime.getHours()) + "时";
EndTimeMsg = EndTimeMsg + (EndTime.getMinutes()) + "分";
EndTimeMsg = EndTimeMsg + (EndTime.getSeconds()) + "秒";
function GetRTime(){
NowTime = new Date();
var nMS=EndTime.getTime() - NowTime.getTime();
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;
var nMS=Math.floor(nMS/100) % 10;
if(nD>= 0){
document.getElementById("RemainD").innerHTML=nD;
document.getElementById("RemainH").innerHTML=nH;
document.getElementById("RemainM").innerHTML=nM;
document.getElementById("RemainS").innerHTML=nS + "." + nMS;
}
else {
document.getElementById("CountMsg").innerHTML= EndTimeMsg +"已过！";
}
setTimeout("GetRTime()",100);
}
window.onload=function(){
document.getElementById("EndTimeMsg").innerHTML = EndTimeMsg;
GetRTime();
}
// -->
</script>
</head>
<body>
<div id="CountMsg">
今天距离
<strong id="EndTimeMsg">XX</strong>
还有
<strong id="RemainD">XX</strong>天
<strong id="RemainH">XX</strong>时
<strong id="RemainM">XX</strong>分
<strong id="RemainS">XX</strong>秒
</div>
|
|
