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

前端技术 2023/09/05 JavaScript

本文实例总结了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\";
}
else
setTimeout (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>

多个倒计时>>>

代码:

<!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 runat=\"server\">
  <title>无标题页</title>
</head>
<body>
  <p>离一模还有<span id=\"_lefttime1\" style=\"color:red;font-size:12pt;\"></span></p>
<p>离二模还有<span id=\"_lefttime2\" style=\"color:red;font-size:12pt;\"></span></p>
<p>离高考还有<span id=\"_lefttime3\" style=\"color:red;font-size:12pt;\"></span></p>
</body>
</html>
<SCRIPT LANGUAGE=\"JavaScript\">
function _fresh(){
var datalist =new Array();
datalist =[
[new Date(\"2010/10/1\"), \"_lefttime1\"],
[new Date(\"2010/10/15\"), \"_lefttime2\"],
[new Date(\"2010/10/2\"), \"_lefttime3\"]
];
for(var i =0; i<datalist.length; i++){
var endtime =datalist[i][0];
var nowtime = new Date();
var leftsecond=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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/12714

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案