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 相关文章推荐
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
Oct 26 Javascript
JavaScript 基础篇之对象、数组使用介绍(三)
Apr 07 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
Mar 27 Javascript
jQuery异步获取json数据方法汇总
Dec 22 Javascript
Node.js中的缓冲与流模块详细介绍
Feb 11 Javascript
js编写贪吃蛇的小游戏
Aug 24 Javascript
Bootstrap项目实战之子栏目资讯内容
Apr 25 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
Sep 28 Javascript
JQuery ZTree使用方法详解
Jan 07 Javascript
AngularJS执行流程详解
Feb 17 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
Mar 15 Javascript
Angular17之Angular自定义指令详解
Jan 21 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
PHILIPS L4X25T电路分析和打理
2021/03/02 无线电
在PHP中PDO解决中文乱码问题的一些补充
2010/09/06 PHP
PHP中通过HTTP_USER_AGENT判断是否为手机移动终端的函数代码
2013/02/14 PHP
PHP并发多进程处理利器Gearman使用介绍
2016/05/16 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
PHP PDOStatement::columnCount讲解
2019/01/30 PHP
laravel 使用事件系统统计浏览量的实现
2019/10/16 PHP
Laravel 框架基于自带的用户系统实现登录注册及错误处理功能分析
2020/04/14 PHP
php如何获取Http请求
2020/04/30 PHP
phpstudy隐藏index.php的方法
2020/09/21 PHP
jquery查找父元素、子元素(个人经验总结)
2014/04/09 Javascript
javascript中使用正则表达式清理table样式的代码
2020/04/01 Javascript
js实现跨域的多种方法
2015/12/25 Javascript
js重写方法的简单实现
2016/07/10 Javascript
easyui combobox开启搜索自动完成功能的实例代码
2016/11/08 Javascript
JavaScript实现邮箱地址自动匹配功能代码
2016/11/28 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
2017/03/02 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
2017/05/10 Javascript
JavaScript实现简单的树形菜单效果
2017/06/23 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
2018/10/19 Javascript
JS实现倒计时图文效果
2018/11/17 Javascript
动态内存分配导致影响Javascript性能的问题
2018/12/18 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
2019/01/10 Javascript
VueJS实现用户管理系统
2020/05/29 Javascript
[14:36]2014 DOTA2国际邀请赛中国区预选赛5.21 Orenda VS NE
2014/05/22 DOTA
微信跳一跳python辅助软件思路及图像识别源码解析
2018/01/04 Python
解决python ThreadPoolExecutor 线程池中的异常捕获问题
2020/04/08 Python
天猫精选:上天猫,就够了
2016/09/21 全球购物
澳大利亚在线生活方式商店:Mytopia
2018/07/08 全球购物
Java基础知识面试要点
2016/07/29 面试题
2014年元旦活动方案
2014/02/15 职场文书
抗洪救灾先进集体事迹材料
2014/05/26 职场文书
会议接待欢迎标语
2014/10/08 职场文书
自信主题班会
2015/08/14 职场文书
JS Canvas接口和动画效果大全
2021/04/29 Javascript
CSS 鼠标点击拖拽效果的实现代码
2022/12/24 HTML / CSS