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 相关文章推荐
Knockout数组(observable)使用详解示例
Nov 15 Javascript
JavaScript 数组的深度复制解析
Nov 02 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
Dec 03 Javascript
基于jQuery实现滚动刷新效果
Jan 09 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
May 12 Javascript
bootstrap警告框示例代码分享
May 17 Javascript
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
JavaScript基础之流程控制语句的用法
Aug 31 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
Aug 20 Javascript
在Vue项目中用fullcalendar制作日程表的示例代码
Aug 04 Javascript
JS apply用法总结和使用场景实例分析
Mar 14 Javascript
Vue——前端生成二维码的示例
Dec 19 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操作MongoDB GridFS 存储文件的详解
2013/06/20 PHP
PHP PDO操作MySQL基础教程
2017/06/05 PHP
php 中phar包的使用教程详解
2018/10/26 PHP
PHP设计模式入门之状态模式原理与实现方法分析
2020/04/26 PHP
js的闭包的一个示例说明
2008/11/18 Javascript
JavaScript 判断浏览器类型及版本
2009/02/21 Javascript
javascript下对于事件、事件流、事件触发的顺序随便说说
2010/07/17 Javascript
jquery autocomplete自动完成插件的的使用方法
2010/08/07 Javascript
Javascript设置对象的ReadOnly属性(示例代码)
2013/12/25 Javascript
js获取某元素的class里面的css属性值代码
2014/01/16 Javascript
JsRender实用入门教程
2014/10/31 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
2015/12/02 Javascript
jQuery实现表格元素动态创建功能
2017/01/09 Javascript
JS和canvas实现俄罗斯方块
2017/03/14 Javascript
JSONP基础知识详解
2017/03/19 Javascript
vue.js加载新的内容(实例代码)
2017/06/01 Javascript
vue下跨域设置的相关介绍
2017/08/26 Javascript
通过源码分析Vue的双向数据绑定详解
2017/09/24 Javascript
从源码看angular/material2 中 dialog模块的实现方法
2017/10/18 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
2018/11/15 Javascript
详解JS实现简单的时分秒倒计时代码
2019/04/25 Javascript
vue实现中部导航栏布局功能
2019/07/30 Javascript
微信小程序 点击切换样式scroll-view实现代码实例
2019/10/11 Javascript
Vue组件跨层级获取组件操作
2020/07/27 Javascript
[56:12]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第一场 6.3
2018/06/04 DOTA
在Python的Django框架中为代码添加注释的方法
2015/07/16 Python
Python函数的参数常见分类与用法实例详解
2019/03/30 Python
Python2与Python3的区别实例分析
2019/04/11 Python
Python编程快速上手——正则表达式查找功能案例分析
2020/02/28 Python
Python生成器实现简单&quot;生产者消费者&quot;模型代码实例
2020/03/27 Python
完美解决pyinstaller打包报错找不到依赖pypiwin32或pywin32-ctypes的错误
2020/04/01 Python
完美解决pycharm 不显示代码提示问题
2020/06/02 Python
2014党委书记四风问题对照检查材料思想汇报
2014/09/22 职场文书
公司行政管理制度范本
2015/08/05 职场文书
用Python selenium实现淘宝抢单机器人
2021/06/18 Python
选购到合适的激光打印机
2022/04/21 数码科技