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 相关文章推荐
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
Mar 17 Javascript
将查询条件的input、select清空
Jan 14 Javascript
JS下载文件|无刷新下载文件示例代码
Apr 17 Javascript
php+ajax+jquery实现点击加载更多内容
May 03 Javascript
jQuery自动完成插件completer附源码下载
Jan 04 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
Feb 19 Javascript
javascript实现dom元素可拖动
Mar 21 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
May 27 Javascript
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
微信小程序 setData 对 data数据影响问题
Apr 18 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
May 20 Javascript
如何使用JS console.log()技巧提高工作效率
Oct 14 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
Mysql的常用命令
2006/10/09 PHP
人大复印资料处理程序_输入篇
2006/10/09 PHP
PHP多线程批量采集下载美女图片的实现代码(续)
2013/06/03 PHP
thinkPHP实现表单自动验证
2014/12/24 PHP
php序列化函数serialize() 和 unserialize() 与原生函数对比
2015/05/08 PHP
详解PHP实现执行定时任务
2015/12/21 PHP
PHP实现生成带背景的图形验证码功能
2016/10/03 PHP
Laravel实现自定义错误输出内容的方法
2016/10/10 PHP
最简单的js图片切换效果实现代码
2011/09/24 Javascript
Javascript中的String对象详谈
2014/03/03 Javascript
查询json的数据结构的8种方式简介
2014/03/10 Javascript
JavaScript中的关联数组问题
2015/03/04 Javascript
AngularJs解决跨域问题案例详解(简单方法)
2016/05/19 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
2016/06/08 Javascript
JS中递归函数
2016/06/17 Javascript
js判断浏览器是否支持严格模式的方法
2016/10/04 Javascript
JS实现下拉菜单列表与登录注册弹窗效果
2017/08/10 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
2018/03/01 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
2018/04/20 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
2018/09/21 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
2019/01/24 Javascript
js form表单input框限制20个字符,10个汉字代码实例
2019/04/12 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
2019/06/19 Javascript
VUE项目中加载已保存的笔记实例方法
2019/09/14 Javascript
javascript刷新父页面方法汇总详解
2019/10/10 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
2019/10/21 Javascript
[02:44]DOTA2英雄基础教程 钢背兽
2013/12/19 DOTA
Python 高级专用类方法的实例详解
2017/09/11 Python
Python re 模块findall() 函数返回值展现方式解析
2019/08/09 Python
Python 3.6 中使用pdfminer解析pdf文件的实现
2019/09/25 Python
Python 脚本拉取 Docker 镜像问题
2019/11/10 Python
基于opencv的selenium滑动验证码的实现
2020/07/24 Python
Python pip 常用命令汇总
2020/10/19 Python
美国厨房和园艺工具网上商店:Nestneed
2019/08/24 全球购物
办公室主任竞聘演讲稿
2014/05/15 职场文书
2019中小学生安全过暑期倡议书
2019/06/24 职场文书