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 相关文章推荐
js 表单验证方法(实用)
Apr 28 Javascript
jQuery下的动画处理总结
Oct 10 Javascript
JS替换字符串中字符即替换全部而不是第一个
Jun 04 Javascript
用js通过url传参把数据从一个页面传到另一个页面
Sep 01 Javascript
JavaScript更改原始对象valueOf的方法
Mar 19 Javascript
基于jquery实现人物头像跟随鼠标转动
Aug 23 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
Jul 20 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
Aug 15 Javascript
JavaScript无阻塞加载和defer、async详解
Feb 26 Javascript
轻量级JS Cookie插件js-cookie的使用方法
Mar 22 Javascript
详解微信小程序开发用户授权登陆
Apr 24 Javascript
在vue中使用回调函数,this调用无效的解决
Aug 11 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
php.ini save_handler 修改不生效的解决办法
2014/07/22 PHP
PHP实现的比较完善的购物车类
2014/12/02 PHP
php实现每天自动变换随机问候语的方法
2015/05/12 PHP
网页里控制图片大小的相关代码
2006/06/13 Javascript
一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
2009/05/21 Javascript
开启BootStrap学习之旅
2016/05/04 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
2016/10/25 Javascript
js中DOM三级列表(代码分享)
2017/03/20 Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
2017/12/22 Javascript
Three.js实现简单3D房间布局
2018/12/30 Javascript
如何阻止小程序遮罩层下方图层滚动
2019/09/05 Javascript
解决webpack多页面内存溢出的方法示例
2019/10/08 Javascript
微信小程序基于高德地图查找位置并显示文字
2019/10/30 Javascript
ES2020让代码更优美的运算符 (?.) (??)
2021/01/04 Javascript
Python中unittest用法实例
2014/09/25 Python
python轻松查到删除自己的微信好友
2016/01/10 Python
Python函数中的函数(闭包)用法实例
2016/03/15 Python
深入了解Python数据类型之列表
2016/06/24 Python
Python3 Random模块代码详解
2017/12/04 Python
Python Matplotlib 基于networkx画关系网络图
2019/07/10 Python
Python编程中类与类的关系详解
2019/08/08 Python
Django认证系统实现的web页面实现代码
2019/08/12 Python
使用python实现unix2dos和dos2unix命令的例子
2019/08/13 Python
Python 实现一个手机号码获取妹子名字的功能
2019/09/25 Python
pytorch AvgPool2d函数使用详解
2020/01/03 Python
python 已知三条边求三角形的角度案例
2020/04/12 Python
python opencv实现简易画图板
2020/08/27 Python
Sperry官网:帆船鞋创始品牌
2016/09/07 全球购物
工作推荐信范文
2014/05/10 职场文书
分公司总经理岗位职责
2014/07/30 职场文书
校园广播稿精选
2014/10/01 职场文书
2015年银行个人工作总结
2015/05/14 职场文书
2016年“5.12”护士节致辞
2015/07/31 职场文书
java泛型通配符详解
2021/07/25 Java/Android
Java 超详细讲解IO操作字节流与字符流
2022/03/25 Java/Android
Oracle锁表解决方法的详细记录
2022/06/05 Oracle