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 相关文章推荐
jquery图片上下tab切换效果
Mar 18 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
Mar 05 Javascript
浅谈JS的基础类型与引用类型
Sep 13 Javascript
jquery把int类型转换成字符串类型的方法
Oct 07 Javascript
详解jQuery中ajax.load()方法
Jan 25 Javascript
深入理解js中的加载事件
Feb 08 Javascript
在ABP框架中使用BootstrapTable组件的方法
Jul 31 Javascript
Vue父子模版传值及组件传值的三种方法
Nov 27 Javascript
JavaScript使用Math.random()生成简单的验证码
Jan 21 Javascript
微信小程序tabBar设置实例解析
Nov 14 Javascript
如何手写一个简易的 Vuex
Oct 10 Javascript
Vue操作Storage本地化存储
Apr 29 Vue.js
基于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
简单的PHP留言本实例代码
2010/05/09 PHP
php通过array_push()函数添加多个变量到数组末尾的方法
2015/03/18 PHP
PHP中list()函数用法实例简析
2016/01/08 PHP
浏览器检测JS代码(兼容目前各大主流浏览器)
2016/02/21 Javascript
深入学习AngularJS中数据的双向绑定机制
2016/03/04 Javascript
Vue.js中数组变动的检测详解
2016/10/12 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
2016/10/16 Javascript
12条写出高质量JS代码的方法
2018/01/07 Javascript
原生js实现省市区三级联动代码分享
2018/02/12 Javascript
vue中父子组件注意事项,传值及slot应用技巧
2018/05/09 Javascript
vue项目中公用footer组件底部位置的适配问题
2018/05/10 Javascript
jQuery解析json格式数据示例
2018/09/01 jQuery
js中获取URL参数的共用方法getRequest()方法实例详解
2018/10/24 Javascript
Angular 实现输入框中显示文章标签的实例代码
2018/11/07 Javascript
vue+iview动态渲染表格详解
2019/03/19 Javascript
百度小程序之间的页面通信过程详解
2019/07/18 Javascript
Python进行数据科学工作的简单入门教程
2015/04/01 Python
Python中的super用法详解
2015/05/28 Python
Python使用Phantomjs截屏网页的方法
2018/05/17 Python
Django读取Mysql数据并显示在前端的实例
2018/05/27 Python
详解Django中CBV(Class Base Views)模型源码分析
2019/02/25 Python
Python用字典构建多级菜单功能
2019/07/11 Python
python绘图模块matplotlib示例详解
2019/07/26 Python
python实现银行管理系统
2019/10/25 Python
python绘制无向图度分布曲线示例
2019/11/22 Python
python判断是空的实例分享
2020/07/06 Python
实例教程 一款纯css3实现的数字统计游戏
2014/11/10 HTML / CSS
Weekendesk意大利:探索多种引人入胜的周末主题
2016/10/14 全球购物
迪卡侬印度官网:购买所有体育用品
2017/06/24 全球购物
销售人员中英文自荐信
2013/09/22 职场文书
教师实习自我鉴定
2013/12/14 职场文书
总裁办公室主任职责
2014/01/02 职场文书
车贷收入证明范本
2014/01/09 职场文书
房屋过户委托书范本
2014/10/07 职场文书
幼儿园教师心得体会范文
2016/01/21 职场文书
八年级作文之友谊
2019/12/02 职场文书