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 相关文章推荐
通过JAVASCRIPT读取ASP设定的COOKIE
Feb 15 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
Nov 10 Javascript
QQ空间顶部折页撕开效果示例代码
Jun 15 Javascript
详细分析Javascript中创建对象的四种方式
Aug 17 Javascript
jQuery表单插件ajaxForm实例详解
Jan 17 Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
Mar 27 Javascript
使用JS编写的随机抽取号码的小程序
Aug 11 Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
Mar 01 Javascript
Vue中computed与methods的区别详解
Mar 24 Javascript
JavaScript中如何调用Java方法
Sep 16 Javascript
JavaScript实现鼠标经过表格某行时此行变色
Nov 20 Javascript
react项目从新建到部署的实现示例
Feb 19 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录入页面中动态从数据库中提取数据的实现
2006/10/09 PHP
php实现的简单压缩英文字符串的代码
2008/04/24 PHP
destoon整合UCenter图文教程
2014/06/21 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
使用新的消息弹出框blackbirdjs
2008/10/16 Javascript
javascript中attribute和property的区别详解
2014/06/05 Javascript
json字符串之间的相互转换示例代码
2014/08/21 Javascript
20个实用的JavaScript技巧分享
2014/11/28 Javascript
JavaScript基础知识学习笔记
2014/12/02 Javascript
JavaScript把数组作为堆栈使用的方法
2015/03/20 Javascript
jQuery animate easing使用方法图文详解
2016/06/17 Javascript
AngularJS之页面跳转Route实例代码
2017/03/10 Javascript
利用jsonp与代理服务器方案解决跨域问题
2017/09/14 Javascript
使用nvm管理不同版本的node与npm的方法
2017/10/31 Javascript
JS高阶函数原理与用法实例分析
2019/01/15 Javascript
[01:45]亚洲邀请赛互动指南虚拟物品介绍
2015/01/30 DOTA
python回溯法实现数组全排列输出实例分析
2015/03/17 Python
Python里disconnect UDP套接字的方法
2015/04/23 Python
python使用wxpython开发简单记事本的方法
2015/05/20 Python
详解python string类型 bytes类型 bytearray类型
2017/12/16 Python
python机器学习之神经网络(二)
2017/12/20 Python
python消除序列的重复值并保持顺序不变的实例
2018/11/08 Python
python如何获取列表中每个元素的下标位置
2019/07/01 Python
Python 3 判断2个字典相同
2019/08/06 Python
python yield关键词案例测试
2019/10/15 Python
使用Python实现将多表分批次从数据库导出到Excel
2020/05/15 Python
html5 video标签屏蔽右键视频另存为的js代码
2013/11/12 HTML / CSS
编写html5时调试发现脚本php等网页js、css等失效
2013/12/31 HTML / CSS
美国折扣网站:jClub
2017/08/07 全球购物
网上书店创业计划书
2014/01/12 职场文书
《手指教学》反思
2014/02/14 职场文书
实习协议书
2015/01/27 职场文书
2016年小学生清明节广播稿
2015/12/17 职场文书
2016年安康杯竞赛活动总结
2016/04/05 职场文书