jquery实现倒计时功能


Posted in Javascript onDecember 28, 2015

本文实例为大家分享了jquery倒计时功能的实现代码,供大家参考,具体内容如下

定义和用法:

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
下面举例

<html>
 <head>
 <meta charset="utf-8">
 <title>jquery简单倒计时</title>
 </style>
 <script type="text/javascript" src="js/jquery.min.js"></script>
 <script type="text/javascript">
 
 var intDiff = parseInt(60);//倒计时总秒数量
 
 function timer(intDiff) {
 window.setInterval(function() {
  var day = 0,
  hour = 0,
  minute = 0,
  second = 0;//时间默认值 
  if (intDiff > 0) {
  day = Math.floor(intDiff / (60 * 60 * 24));
  hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
  minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
  second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
  }
  if (minute <= 9)
  minute = '0' + minute;
  if (second <= 9)
  second = '0' + second;
  $('#day_show').html(day + "天");
  $('#hour_show').html('<s id="h"></s>' + hour + '时');
  $('#minute_show').html('<s></s>' + minute + '分');
  $('#second_show').html('<s></s>' + second + '秒');
  intDiff--;
 }, 1000);
 }
 
 $(function() {
 timer(intDiff);
 });
 </script>
 </head>
 <body>
 <h1>网页上的倒计时</h1>
 <div class="time-item">
 <span id="day_show">0天</span>
 <strong id="hour_show">0时</strong>
 <strong id="minute_show">0分</strong>
 <strong id="second_show">0秒</strong>
 </div>
 <!--倒计时模块-->
 </body>
</html>

更多关于倒计时的文章请查看专题:《倒计时功能》

希望本文所述对大家学习jquery程序设计有所帮助。

Javascript 相关文章推荐
同一个表单 根据要求递交到不同页面的实现方法小结
Aug 05 Javascript
用jquery和json从后台获得数据集的代码
Nov 07 Javascript
JavaScript高级程序设计 读书笔记之十一 内置对象Global
Mar 07 Javascript
Jquery解析Json格式数据过程代码
Oct 17 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
Nov 07 Javascript
纯JS实现弹性导航条效果
Mar 06 Javascript
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
Vue filter介绍及其使用详解
Oct 21 Javascript
基于vue cli重构多页面脚手架过程详解
Jan 23 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
Jul 22 Javascript
JavaScript隐式类型转换代码实例
May 29 Javascript
JavaScript 实现页面滚动动画
Apr 24 Javascript
基于jquery实现瀑布流布局
Jun 28 #Javascript
详解AngularJS Filter(过滤器)用法
Dec 28 #Javascript
原生JavaScript实现瀑布流布局
Jun 28 #Javascript
js实现瀑布流的三种方式比较
Jun 28 #Javascript
详解AngularJS中自定义过滤器
Dec 28 #Javascript
js运动应用实例解析
Dec 28 #Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
Dec 28 #Javascript
You might like
索尼SONY SRF-S83/84电路分析和打磨
2021/03/02 无线电
php对csv文件的读取,写入,输出下载操作详解
2013/08/10 PHP
分享下页面关键字抓取www.icbase.com站点代码(带asp.net参数的)
2014/01/30 PHP
php获取网页上所有链接的方法
2015/04/03 PHP
php中使用base HTTP验证的方法
2015/04/20 PHP
kmock javascript 单元测试代码
2011/02/06 Javascript
读jQuery之五(取DOM元素)
2011/06/20 Javascript
jQuery的12招常用技巧分享
2011/08/08 Javascript
jQuery EasyUI API 中文文档 - Panel面板
2011/09/30 Javascript
使用javascript做的一个随机点名程序
2014/02/13 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
2015/06/18 Javascript
Javascript对象字面量的理解
2016/06/22 Javascript
JS添加删除DIV的简单实例
2016/07/08 Javascript
vue从使用到源码实现教程详解
2016/09/19 Javascript
Vue+Element使用富文本编辑器的示例代码
2017/08/14 Javascript
JavaScript定义函数的三种实现方法
2017/09/23 Javascript
微信小程序实现页面跳转传值的方法
2017/10/12 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
2018/09/21 Javascript
Web安全之XSS攻击与防御小结
2018/12/13 Javascript
微信小程序封装分享与分销功能过程解析
2019/08/13 Javascript
Vue实现简单的跑马灯
2020/05/25 Javascript
JavaScript事件委托实现原理及优点进行
2020/08/29 Javascript
Vue 列表页带参数进详情页的操作(router-link)
2020/11/13 Javascript
python解析xml模块封装代码
2014/02/07 Python
python各种语言间时间的转化实现代码
2016/03/23 Python
Python set常用操作函数集锦
2017/11/15 Python
Python中摘要算法MD5,SHA1简介及应用实例代码
2018/01/09 Python
python内打印变量之%和f的实例
2020/02/19 Python
python爬虫中的url下载器用法详解
2020/11/30 Python
Bath & Body Works阿联酋:在线购买沐浴和身体用品
2021/02/27 全球购物
经济系大学生求职信
2013/10/01 职场文书
经典优秀个人求职信分享
2013/12/12 职场文书
预备党员入党自我评价范文
2014/03/10 职场文书
高一军训的心得体会
2014/09/01 职场文书
学校艾滋病宣传活动总结
2015/05/09 职场文书
MySQL数据库如何使用Shell进行连接
2022/04/12 MySQL