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中关于bind()方法的使用技巧分享
Mar 30 jQuery
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
jQuery使用each遍历循环的方法
Sep 19 jQuery
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
jQuery实现弹幕特效
Nov 29 jQuery
jQuery实现放大镜案例
Oct 19 jQuery
jquery实现抽奖功能
Oct 22 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
在WIN98下以apache模块方式安装php
2006/10/09 PHP
php对二维数组进行排序的简单实例
2013/12/19 PHP
使用php显示搜索引擎来的关键词
2014/02/13 PHP
ThinkPHP使用心得分享-分页类Page的用法
2014/05/15 PHP
PHP仿微信发红包领红包效果
2016/10/30 PHP
用javascript实现自定义标签
2007/05/08 Javascript
深入理解Javascript闭包 新手版
2010/12/28 Javascript
javascript中关于break,continue的特殊用法与介绍
2012/05/24 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
2013/05/17 Javascript
js 处理数组重复元素示例代码
2013/12/27 Javascript
QQ登录背景闪动效果附效果演示源码下载
2015/09/22 Javascript
JavaScript中的函数(二)
2015/12/23 Javascript
JavaScript深度复制(deep clone)的实现方法
2016/02/19 Javascript
在javascript中使用com组件的简单实现方法
2016/08/17 Javascript
vue.js加载新的内容(实例代码)
2017/06/01 Javascript
JavaScript正则表达式和级联效果
2017/09/14 Javascript
JavaScript体验异步更好的解决办法
2018/01/08 Javascript
深入理解ES6之数据解构的用法
2018/01/13 Javascript
使用JavaScript生成罗马字符的实例代码
2018/06/08 Javascript
JS实现方形抽奖效果
2018/08/27 Javascript
vue实现点击选中,其他的不选中方法
2018/09/05 Javascript
JavaScript循环遍历你会用哪些之小结篇
2018/09/28 Javascript
JS实现省市县三级下拉联动
2020/04/10 Javascript
JS实现横向跑马灯效果代码
2020/04/20 Javascript
JavaScript 实现继承的几种方式
2021/02/19 Javascript
python smtplib模块发送SSL/TLS安全邮件实例
2015/04/08 Python
python Flask实现restful api service
2017/12/04 Python
python 执行终端/控制台命令的例子
2019/07/12 Python
Belvilla法国:休闲度假房屋出租
2020/10/03 全球购物
医院实习介绍信
2014/01/12 职场文书
企业管理毕业生求职信范文
2014/03/07 职场文书
德育标兵事迹材料
2014/08/24 职场文书
党委书记群众路线对照检查材料思想汇报
2014/10/04 职场文书
房地产置业顾问工作总结
2015/10/23 职场文书
读《解忧杂货店》有感:请相信一切都是最好的安排
2019/11/07 职场文书
Redis字典实现、Hash键冲突及渐进式rehash详解
2021/09/04 Redis