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 相关文章推荐
通过action传过来的值在option获取进行验证的方法
Nov 14 Javascript
js实现简单选项卡与自动切换效果的方法
Apr 10 Javascript
JavaScript对象参数的引用传递
Jan 14 Javascript
jQuery移动端图片上传组件
Jun 12 Javascript
JavaScript——DOM操作——Window.document对象详解
Jul 14 Javascript
基于JavaScript实现在新的tab页打开url
Aug 04 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
Oct 27 Javascript
vue使用codemirror的两种用法
Aug 27 Javascript
JavaScript中的类型检查
Feb 03 Javascript
用JS实现选项卡
Mar 23 Javascript
antd design table更改某行数据的样式操作
Oct 31 Javascript
深入讲解Vue中父子组件通信与事件触发
Mar 22 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 fputcsv命令 写csv文件遇到的小问题(多维数组连接符)
2011/05/24 PHP
windwos下使用php连接oracle数据库的过程分享
2014/05/26 PHP
thinkphp修改配置进入默认首页的方法
2017/02/07 PHP
Thinkphp框架+Layui实现图片/文件上传功能分析
2020/02/07 PHP
JavaScript 闭包在封装函数时的简单分析
2009/11/28 Javascript
热点新闻滚动特效的js代码
2013/08/17 Javascript
js函数获取html中className所在的内容并去除标签
2013/09/08 Javascript
手机平板等移动端适配跳转URL的js代码
2014/01/25 Javascript
JQuery实现table行折叠效果以JSON做数据源
2014/05/26 Javascript
jQuery提示效果代码分享
2014/11/20 Javascript
jquery插件unobtrusive实现片段式加载
2015/06/15 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
2015/10/09 Javascript
js验证身份证号有效性并提示对应信息
2015/10/19 Javascript
JS选取DOM元素的简单方法
2016/07/08 Javascript
js实现浏览器倒计时跳转页面效果
2016/08/12 Javascript
浅析Visual Studio Code断点调试Vue
2018/02/27 Javascript
vue单页面在微信下只能分享落地页的解决方案
2019/04/15 Javascript
vue实现短信验证码登录功能(流程详解)
2019/12/10 Javascript
详解Vue的watch中的immediate与watch是什么意思
2019/12/30 Javascript
详解JavaScript中精度失准问题及解决方法
2020/02/04 Javascript
浅谈Python2.6和Python3.0中八进制数字表示的区别
2017/04/28 Python
Python3实现发送QQ邮件功能(html)
2017/12/15 Python
pytorch numpy list类型之间的相互转换实例
2019/08/18 Python
python实现的读取网页并分词功能示例
2019/10/29 Python
python实现的批量分析xml标签中各个类别个数功能示例
2019/12/30 Python
Django创建一个后台的基本步骤记录
2020/10/02 Python
PyTorch 中的傅里叶卷积实现示例
2020/12/11 Python
css3实现圆锥渐变conic-gradient效果
2020/02/12 HTML / CSS
Toppik顶丰增发纤维官网:解决头发稀疏
2017/12/30 全球购物
英超联赛的首选足球:Mitre足球
2019/05/06 全球购物
自我鉴定三原则
2014/01/13 职场文书
营销经理工作检讨书
2014/11/03 职场文书
2014年学校团委工作总结
2014/12/20 职场文书
《梅花魂》教学反思
2016/02/18 职场文书
入团申请书格式
2019/06/20 职场文书
Python实现Excel文件的合并(以新冠疫情数据为例)
2022/03/20 Python