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


Posted in Javascript onApril 16, 2016

本文实例总结了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程序设计有所帮助。

Javascript 相关文章推荐
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
Nov 04 Javascript
jquery 查找iframe父级页面元素的实现代码
Aug 28 Javascript
js拖拽一些常见的思路方法整理
Mar 19 Javascript
禁用Tab键JS代码兼容Firefox和IE
Apr 18 Javascript
JS获得浏览器版本和操作系统版本的例子
May 13 Javascript
Javascript writable特性介绍
Feb 27 Javascript
jQuery实现数秒后自动提交form的方法
Mar 05 Javascript
Bootstrap在线电子商务网站实战项目5
Oct 14 Javascript
微信开发 js实现tabs选项卡效果
Oct 28 Javascript
javascript 秒表计时器实现代码
Mar 09 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
解决elementui表格操作列自适应列宽
Dec 28 Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
Apr 16 #Javascript
jQuery实现无限往下滚动效果代码
Apr 16 #Javascript
jQuery遍历json的方法分析
Apr 16 #Javascript
jquery对dom节点的操作【推荐】
Apr 15 #Javascript
Jquery attr()方法 属性赋值和属性获取详解
Apr 15 #Javascript
有关jquery与DOM节点操作方法和属性记录
Apr 15 #Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
Apr 15 #Javascript
You might like
与空气斗智斗勇的经典《Overlord》,传说中的“无稽之谈”
2020/04/09 日漫
Mac环境下php操作mysql数据库的方法分享
2015/05/11 PHP
php实现概率性随机抽奖代码
2016/01/02 PHP
php获取给定日期相差天数的方法分析
2017/02/20 PHP
PHP实现PDO操作mysql存储过程示例
2019/02/13 PHP
一个简单的Ext.XTemplate的实例代码
2012/03/18 Javascript
js数字转换为float,取N位小数
2014/02/08 Javascript
node.js中的fs.unlink方法使用说明
2014/12/15 Javascript
js实现两点之间画线的方法
2015/05/12 Javascript
JQuery自动触发事件的方法
2015/06/13 Javascript
javascript实现页面刷新时自动清空表单并选中的方法
2015/07/18 Javascript
js小数计算小数点后显示多位小数的实现方法
2016/05/30 Javascript
jQuery中Chosen三级联动功能实例代码
2017/03/07 Javascript
JS实现简单短信验证码界面
2017/08/07 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
2017/11/17 Javascript
微信小程序实现树莓派(raspberry pi)小车控制
2020/02/12 Javascript
js实现无缝轮播图特效
2020/05/09 Javascript
[51:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python中实现常量(Const)功能
2015/01/28 Python
Python语言实现机器学习的K-近邻算法
2015/06/11 Python
深入理解Python变量与常量
2016/06/02 Python
python钉钉机器人运维脚本监控实例
2019/02/20 Python
Python处理PDF与CDF实例
2020/02/26 Python
python 比较字典value的最大值的几种方法
2020/04/17 Python
完美解决Django2.0中models下的ForeignKey()问题
2020/05/19 Python
python3中编码获取网页的实例方法
2020/11/16 Python
AVON雅芳官网:世界上最大的美容化妆品公司之一
2016/11/02 全球购物
新学期班主任寄语
2014/01/18 职场文书
教导处工作制度
2014/01/18 职场文书
房地产广告词大全
2014/03/19 职场文书
赔偿协议书范本
2014/04/15 职场文书
乡文化站暑期培训方案
2014/08/28 职场文书
2014领导班子正风肃纪思想汇报
2014/09/18 职场文书
酒会邀请函
2015/01/31 职场文书
运动会新闻报道稿
2015/07/22 职场文书
公司人事管理制度
2015/08/05 职场文书