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 相关文章推荐
SlideView 图片滑动(扩展/收缩)展示效果
Aug 01 Javascript
js 单击式的下拉菜单效果实例
Aug 13 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
Oct 10 Javascript
浅谈javascript中call()、apply()、bind()的用法
Apr 20 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
Aug 26 Javascript
jquery.mousewheel实现整屏翻屏效果
Aug 30 Javascript
livereload工具实现前端可视化开发【推荐】
Dec 23 Javascript
vue 父组件调用子组件方法及事件
Mar 29 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 jQuery
ES6 Object方法扩展的应用实例分析
Jun 25 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
Jul 09 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
Yii结合CKEditor实现图片上传功能
2014/06/13 PHP
php删除文本文件中重复行的方法
2015/04/28 PHP
PHP基于迭代实现文件夹复制、删除、查看大小等操作的方法
2017/08/11 PHP
php新建文件的方法实例
2019/09/26 PHP
Jquery同辈元素选中/未选中效果的实例代码
2013/08/01 Javascript
Js 去掉字符串中的空格(实现代码)
2013/11/19 Javascript
window.open打开页面居中显示的示例代码
2013/12/27 Javascript
Area 区域实现post提交数据的js写法
2014/04/22 Javascript
jquery.validate.js插件使用经验记录
2014/07/02 Javascript
使用Plupload实现直接上传附件至七牛云存储
2014/12/26 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
2015/03/04 Javascript
JavaScript正则表达式的分组匹配详解
2016/02/13 Javascript
第五篇Bootstrap 排版
2016/06/21 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
2016/10/21 Javascript
jQuery图片瀑布流的简单实现代码
2017/03/15 Javascript
AngularJS中$http使用的简单介绍
2017/03/17 Javascript
深入理解ES6中let和闭包
2018/02/22 Javascript
用python分割TXT文件成4K的TXT文件
2009/05/23 Python
python中xrange和range的区别
2014/05/13 Python
python结合opencv实现人脸检测与跟踪
2015/06/08 Python
Python实现简单拆分PDF文件的方法
2015/07/30 Python
python从入门到精通(DAY 2)
2015/12/20 Python
python 实现网上商城,转账,存取款等功能的信用卡系统
2016/07/15 Python
Django Rest framework解析器和渲染器详解
2019/07/25 Python
pytorch中如何使用DataLoader对数据集进行批处理的方法
2019/08/06 Python
Flask框架学习笔记之消息提示与异常处理操作详解
2019/08/15 Python
python 模拟登录B站的示例代码
2020/12/15 Python
Canvas实现保存图片到本地的示例代码
2018/06/28 HTML / CSS
马来西亚排名第一的宠物用品店:Pets Wonderland
2020/04/16 全球购物
介绍一下linux的文件权限
2012/02/15 面试题
如何开启linux的ssh服务
2015/02/14 面试题
给学校的建议书
2014/03/12 职场文书
党员批评与自我批评思想汇报
2014/10/08 职场文书
乡镇党建工作总结2015
2015/05/19 职场文书
CSS3实现的3D隧道效果
2021/04/27 HTML / CSS
CDPR谈《巫师》新作用虚幻5原因 称不会为Epic独占
2022/04/06 其他游戏