jQuery实现的倒计时效果实例小结
本文实例总结了jQuery实现的倒计时效果。分享给大家供大家参考，具体如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>Jquery实现倒计时效果</title>
<scriptlanguage="javascript"src="jquery-1.3.2.min.js"></script>
<scripttype="text/javascript">
varSysSecond;
varInterValObj;
$(document).ready(function(){
SysSecond=parseInt($("#remainSeconds").html());//这里我是在服务端算好了剩余的秒数，并保存到客户端，如果过期则返回0
InterValObj=window.setInterval(SetRemainTime,1000);//间隔函数，1秒执行
});
//代理,接单的时间+1小时减去当前时间的秒数
functionSetRemainTime(){
if(SysSecond>0){
//alert(SysSecond);
SysSecond=SysSecond-1;
varsecond=Math.floor(SysSecond%60);//计算秒
varminite=Math.floor((SysSecond/60)%60);//计算分
varhour=Math.floor((SysSecond/3600)%24);//计算小时
varday=Math.floor((SysSecond/3600)/24);//计算天
$("#remainTime").html(day+"天"+hour+"小时"+minite+"分"+second+"秒");
}else{//剩余时间小于或等于0的时候，就停止间隔函数
window.clearInterval(InterValObj);
}
}
</script>
</head>
<body>
<divid="remainSeconds"style="display:none">18000</div>
<divid="remainTime"style="font-size:20px;font-weight:800;color:#FF9900"></div>
</body>
</html>
当我们在webservice里读取到数据库中的时间字段后，把时间分割判断。Javascript代码如下：
<scripttype="text/javascript"src="jquery.js"></script>
<scripttype="text/javascript">
functionTimes(){
vartempTime=document.getElementById("currTime").innerHTML.split(":");
varhour=tempTime[0];
varminute=tempTime[1];
varsecond=tempTime[2];
if(second>=1)
{
second=(second-1>9)?(second-1):"0"+(second-1);
}
else
{
second="59";
if(minute>=1){
minute=(minute-1>9)?(minute-1):"0"+(minute-1);
}else{
minute="59";
if(hour>=1){
hour=(hour-1>9)?(hour-1):"0"+(hour-1);
}else{
minute="00";
hour="0"+0;
}
}
}
document.getElementById("currTime").innerHTML=hour+":"+minute+":"+second;
if(hour==0&&minute==0&&second==0)
{
document.getElementById("currTime").style.display="none";
}
else
setTimeout(Times,1000);
}
//当窗体加载是调用。相当于onload（）事件
(functiongettime()
{
$.ajax({
contentType:"application/json",
type:"POST",
url:"WebService.asmx/Gettime",
data:"{'id':'1'}",
dataType:'json',
success:function(msq){
document.getElementById("currTime").innerHTML=msq.d;
}
});
setTimeout(Times,1000)；
})();
</script>
多个倒计时>>>
代码:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>无标题页</title>
</head>
<body>
<p>离一模还有<spanid="_lefttime1"style="color:red;font-size:12pt;"></span></p>
<p>离二模还有<spanid="_lefttime2"style="color:red;font-size:12pt;"></span></p>
<p>离高考还有<spanid="_lefttime3"style="color:red;font-size:12pt;"></span></p>
</body>
</html>
<SCRIPTLANGUAGE="JavaScript">
function_fresh(){
vardatalist=newArray();
datalist=[
[newDate("2010/10/1"),"_lefttime1"],
[newDate("2010/10/15"),"_lefttime2"],
[newDate("2010/10/2"),"_lefttime3"]
];
for(vari=0;i<datalist.length;i++){
varendtime=datalist[i][0];
varnowtime=newDate();
varleftsecond=parseInt((endtime.getTime()-nowtime.getTime())/1000);
if(leftsecond<0)leftsecond=0;
var__d=parseInt(leftsecond/3600/24);
document.getElementById(datalist[i][1]).innerHTML=__d+"天";
}
}
setInterval(_fresh,1000);
</SCRIPT>
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery日期与时间操作技巧总结》、《jQuery切换特效与技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。