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 相关文章推荐
Js控制弹窗实现在任意分辨率下居中显示
Aug 01 Javascript
javascript:void(0)的作用示例介绍
Oct 28 Javascript
jquery1.10给新增元素绑定事件的方法
Mar 06 Javascript
javascript字符串替换函数如何一次性全部替换掉
Oct 30 Javascript
深入理解Node中的buffer模块
Jun 03 Javascript
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
Vue.js获取被选择的option的value和text值方法
Aug 24 Javascript
JS实现的新闻列表自动滚动效果示例
Jan 30 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
Sep 05 Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
Aug 10 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
Oct 28 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
Nov 12 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
ThinkPHP3.1新特性之字段合法性检测详解
2014/06/19 PHP
两种php去除二维数组的重复项方法
2015/11/04 PHP
PHP 绘制网站登录首页图片验证码
2016/04/12 PHP
event.srcElement 用法笔记e.target
2009/12/18 Javascript
JS 自定义函数缺省值的设置方法
2010/05/05 Javascript
JAVASCRIPT函数作用域和提前声明 分享
2013/08/22 Javascript
jquery遍历checkbox介绍
2014/02/21 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
2014/04/12 Javascript
jQuery实现友好的轮播图片特效
2015/01/12 Javascript
js实现简单随机抽奖的方法
2015/01/27 Javascript
同一个网页中实现多个JavaScript特效的方法
2015/02/02 Javascript
纯JavaScript代码实现移动设备绘图解锁
2015/10/16 Javascript
Javascript技术栈中的四种依赖注入小结
2016/02/27 Javascript
JavaScript必知必会(十) call apply bind的用法说明
2016/06/08 Javascript
jQuery Form表单取值的方法
2017/01/11 Javascript
Vue中的数据监听和数据交互案例解析
2017/07/12 Javascript
VUE element-ui 写个复用Table组件的示例代码
2017/11/18 Javascript
微信小程序实现简单input正则表达式验证功能示例
2017/11/30 Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
2019/07/19 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
2020/01/03 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
2020/02/11 Javascript
[00:44]华丽开场!DOTA2勇士令状带来全新对阵画面
2019/05/15 DOTA
python求素数示例分享
2014/02/16 Python
win10系统下Anaconda3安装配置方法图文教程
2018/09/19 Python
一行Python代码过滤标点符号等特殊字符
2019/08/12 Python
使用python自动追踪你的快递(物流推送邮箱)
2020/03/17 Python
Python获取浏览器窗口句柄过程解析
2020/07/25 Python
Python中qutip用法示例详解
2020/10/02 Python
html5组织内容_动力节点Java学院整理
2017/07/10 HTML / CSS
AmazeUI 折叠面板的实现代码
2020/08/17 HTML / CSS
Joie官方网上商店:购买服装和女装配饰
2018/06/05 全球购物
英国女性化妆品收纳和家具网站:Beautify
2019/12/07 全球购物
员工工作表现评语
2014/04/26 职场文书
漂亮妈妈观后感
2015/06/08 职场文书
Redis Cluster集群动态扩容的实现
2021/07/15 Redis
基于PostgreSQL/openGauss 的分布式数据库解决方案
2021/12/06 PostgreSQL