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 相关文章推荐
JavaScript Konami Code 实现代码
Jul 29 Javascript
Jquery 插件学习实例1 插件制作说明与tableUI优化
Apr 02 Javascript
JS 精确统计网站访问量的实例代码
Jul 05 Javascript
网页防止tab键的使用快速解决方法
Nov 07 Javascript
JS函数重载的解决方案
May 13 Javascript
JavaScript获取图片真实大小代码实例
Sep 24 Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
Dec 20 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
Apr 29 Javascript
JavaScript数组的栈方法与队列方法详解
May 26 Javascript
Javascript中内建函数reduce的应用详解
Oct 20 Javascript
JS+CSS实现滚动数字时钟效果
Dec 25 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
Nov 22 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
MySQL修改密码方法总结
2008/03/25 PHP
PHP中preg_match函数正则匹配的字符串长度问题
2015/05/27 PHP
PHP配置把错误日志以邮件方式发送方法(Windows系统)
2015/06/23 PHP
php排序算法实例分析
2016/10/17 PHP
PHP基于面向对象实现的留言本功能实例
2018/04/04 PHP
EXT窗口Window及对话框MessageBox
2011/01/27 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
2013/11/07 Javascript
JS连连看源码完美注释版(推荐)
2013/12/09 Javascript
javascript操作符&quot;!~&quot;详解
2015/02/10 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
2020/04/21 Javascript
cocos2dx+lua实现橡皮擦功能
2018/12/20 Javascript
[01:54]TI4西雅图DOTA2选手欢迎晚宴 现场报道
2014/07/08 DOTA
Python 通过URL打开图片实例详解
2017/06/01 Python
python画出三角形外接圆和内切圆的方法
2018/01/25 Python
异步任务队列Celery在Django中的使用方法
2018/06/07 Python
python实现批量修改图片格式和尺寸
2018/06/07 Python
Python面向对象类的继承实例详解
2018/06/27 Python
python 接收处理外带的参数方法
2018/12/03 Python
Python中常用的8种字符串操作方法
2019/05/06 Python
Python安装tar.gz格式文件方法详解
2020/01/19 Python
tensorflow模型继续训练 fineturn实例
2020/01/21 Python
python生成大写32位uuid代码
2020/03/03 Python
使用pyplot.matshow()函数添加绘图标题
2020/06/16 Python
python中return如何写
2020/06/18 Python
英国领先的瓷砖专家:Walls and Floors
2018/04/27 全球购物
澳大利亚排名第一的狂热牛仔品牌:ONETEASPOON
2018/11/20 全球购物
EJB timer的种类
2014/10/28 面试题
八年级数学教学反思
2014/01/31 职场文书
小学数学教学反思
2014/02/02 职场文书
《唯一的听众》教学反思
2014/02/20 职场文书
学校搬迁方案
2014/06/15 职场文书
捐助感谢信
2015/01/22 职场文书
历史博物馆观后感
2015/06/05 职场文书
解约证明模板
2015/06/19 职场文书
初三语文教学反思
2016/03/03 职场文书
CSS浮动引起的高度塌陷问题
2022/08/05 HTML / CSS