jQuery实现的倒计时效果实例小结

2024-05-06 14:59:21

字体：大中小

来源：转载

供稿：网友

本文实例总结了jQuery实现的倒计时效果。分享给大家供大家参考，具体如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Jquery实现倒计时效果</title><script language="javascript" src="jquery-1.3.2.min.js"></script><script type="text/javascript"> var SysSecond; var InterValObj; $(document).ready(function() { SysSecond = parseInt($("#remainSeconds").html()); //这里我是在服务端算好了剩余的秒数，并保存到客户端，如果过期则返回0 InterValObj = window.setInterval(SetRemainTime, 1000); //间隔函数，1秒执行 }); //代理,接单的时间+1小时减去当前时间的秒数 function SetRemainTime() { if (SysSecond > 0) {  //alert(SysSecond);  SysSecond = SysSecond - 1;  var second = Math.floor(SysSecond % 60); // 计算秒  var minite = Math.floor((SysSecond / 60) % 60); //计算分  var hour = Math.floor((SysSecond / 3600) % 24); //计算小时  var day = Math.floor((SysSecond / 3600) / 24); //计算天  $("#remainTime").html(day + "天" + hour + "小时" + minite + "分" + second + "秒"); } else {//剩余时间小于或等于0的时候，就停止间隔函数  window.clearInterval(InterValObj); } }</script></head><body><div id="remainSeconds" style="display:none">18000</div><div id="remainTime" style="font-size:20px;font-weight:800;color:#FF9900"></div></body></html>

当我们在webservice里读取到数据库中的时间字段后，把时间分割判断。Javascript代码如下：

<script type="text/javascript" src="jquery.js"></script><script type="text/javascript">function Times() {var tempTime=document.getElementById("currTime").innerHTML.split(":");var hour=tempTime[0];var minute=tempTime[1];var second=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";}elsesetTimeout (Times,1000);}//当窗体加载是调用。相当于onload（）事件 (function gettime()  {  $.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>

上一篇：jQuery调用WebMethod(PageMethod) NET2.0的方法

下一篇：jQuery设置Cookie及删除Cookie实例分析