jQuery 实现倒计时天,时,分,秒功能


Posted in jQuery onJuly 31, 2018

1.HTML部分

<span class="joind">135</span>天<span class="joinh">7</span>时<span class="joinm">46</span>分<span class="joins">25</span>秒

2.js部分

<script src="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
 var setTimer = null;
 var chazhi = 0;
 //差值计算
 //例子(模拟)
 chazhi = 135 * 86400000;
 //真实时间(注意月份需减掉1,否则时间会计算错误)
 //chazhi = (new Date(year,month-1,day,hour,minute,second)) - (new Date()); //计算剩余的毫秒数
 //chazhi = (new Date(2018,8-1,6,6,6,6)) - (new Date());
 
 //执行函数部分
 countFunc(chazhi);
 setTimer = setInterval(function() {
 chazhi = chazhi - 1000;
 countFunc(chazhi);
 }, 1000);
 function countFunc(leftTime) {
 if(leftTime >= 0) {
  var days = parseInt(leftTime / 1000 / 60 / 60 / 24, 10); //计算剩余的天数 
  var hours = parseInt(leftTime / 1000 / 60 / 60 % 24, 10); //计算剩余的小时 
  var minutes = parseInt(leftTime / 1000 / 60 % 60, 10); //计算剩余的分钟 
  var seconds = parseInt(leftTime / 1000 % 60, 10); //计算剩余的秒数 
  days = checkTime(days);
  hours = checkTime(hours);
  minutes = checkTime(minutes);
  seconds = checkTime(seconds);
  $(".joind").html(days);
  $(".joinh").html(hours);
  $(".joinm").html(minutes);
  $(".joins").html(seconds);
 } else {
  clearInterval(setTimer);
  $(".joind").html("00");
  $(".joinh").html("00");
  $(".joinm").html("00");
  $(".joins").html("00");
 }
 }
 function checkTime(i) { //将0-9的数字前面加上0,例1变为01 
 if(i < 10) {
  i = "0" + i;
 }
 return i;
 }
</script>

3.说明

如果变为真实时间月份需要减1,否则时间差计算会有错误

总结

以上所述是小编给大家介绍的jQuery实现倒计时天,时,分,秒,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
jQuery UI Grid 模态框中的表格实例代码
Apr 01 jQuery
jQuery EasyUI之验证框validatebox实例详解
Apr 10 jQuery
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
jquery实现企业定位式导航效果
Jan 01 jQuery
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
jQuery实现表格隔行换色
Sep 01 jQuery
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 jQuery
jQuery 筛选器简单操作示例
Oct 02 jQuery
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 jQuery
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 #jQuery
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 #jQuery
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 #jQuery
jQuery实现菜单的显示和隐藏功能示例
Jul 24 #jQuery
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 #jQuery
jquery实现搜索框功能实例详解
Jul 23 #jQuery
jQuery实现的点击按钮改变样式功能示例
Jul 21 #jQuery
You might like
几种显示数据的方法的比较
2006/10/09 PHP
php输出echo、print、print_r、printf、sprintf、var_dump的区别比较
2013/06/21 PHP
PHP解压tar.gz格式文件的方法
2016/02/14 PHP
Yii2.0表关联查询实例分析
2016/07/18 PHP
PHP实现数组根据某个字段进行水平合并,横向合并案例分析
2019/10/08 PHP
javascript 复杂的嵌套环境中输出单引号和双引号
2009/05/26 Javascript
jQuery实现图片局部放大镜效果
2016/03/17 Javascript
JavaScript基础重点(必看)
2016/07/09 Javascript
domReady的实现案例
2016/11/23 Javascript
基于jQuery制作小图标上下滑动特效
2017/01/18 Javascript
js操作浏览器的参数方法
2017/01/21 Javascript
AngularJS前端页面操作之用户修改密码功能示例
2017/03/27 Javascript
Webpack实战加载SVG的方法
2017/12/26 Javascript
Vue中render方法的使用详解
2018/01/26 Javascript
使用Angular CLI进行Build(构建)和Serve详解
2018/03/24 Javascript
Puppet的一些技巧
2018/09/17 Javascript
小程序实现页面顶部选项卡效果
2018/11/06 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&amp;平移轮播效果
2019/08/16 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
2019/12/15 Javascript
JS实现百度搜索框关键字推荐
2020/02/17 Javascript
JS常用排序方法实例代码解析
2020/03/03 Javascript
three.js 如何制作魔方
2020/07/31 Javascript
Flexible.js可伸缩布局实现方法详解
2020/11/13 Javascript
python3调用百度翻译API实现实时翻译
2018/08/16 Python
python实现本地图片转存并重命名的示例代码
2018/10/27 Python
Python3 导入上级目录中的模块实例
2019/02/16 Python
django基于restframework的CBV封装详解
2019/08/08 Python
python实现人性化显示金额数字实例详解
2020/09/25 Python
开办大学饮食联盟创业计划书
2014/01/29 职场文书
初中毕业生的自我评价
2014/03/03 职场文书
办理房产过户的委托书
2014/09/14 职场文书
机关单位工作失职检讨书
2014/11/20 职场文书
施工员岗位职责范本
2015/04/11 职场文书
2015国庆节66周年标语
2015/07/30 职场文书
驾驶员安全责任协议书
2016/03/22 职场文书
JS监听Esc 键触发事键
2021/04/14 Javascript