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,Angular实现登录界面验证码详解
Apr 27 jQuery
jQuery Position方法使用和兼容性
Aug 23 jQuery
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 jQuery
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 jQuery
jQuery 移除事件的方法
Jun 20 jQuery
jQuery实现图片切换效果
Oct 19 jQuery
使用jQuery实现购物车
Oct 29 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
1.PHP简介
2006/10/09 PHP
[原创]ThinkPHP中SHOW_RUN_TIME不能正常显示运行时间的解决方法
2015/10/10 PHP
php基于mcrypt_encrypt和mcrypt_decrypt实现字符串加密解密的方法
2016/07/12 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
用JavaScript获取网页中的js、css、Flash等文件
2006/12/20 Javascript
JS控件autocomplete 0.11演示及下载 1月5日已更新
2007/01/09 Javascript
符合W3C网页标准的iframe标签的使用方法
2007/07/19 Javascript
JavaScript 创建对象
2009/07/17 Javascript
两个比较有用的Javascript工具函数代码
2010/02/17 Javascript
js继承的实现代码
2010/08/05 Javascript
jquery ui resizable bug解决方法
2010/10/26 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
2012/01/13 Javascript
JS正则中的RegExp对象对象
2012/11/07 Javascript
javascript时间函数基础介绍
2013/03/28 Javascript
文字不间断滚动(上下左右)实例代码
2013/04/21 Javascript
javascript的switch用法注意事项分析
2015/02/02 Javascript
js Canvas绘制圆形时钟教程
2017/02/06 Javascript
Node.js 回调函数实例详解
2017/07/06 Javascript
JavaScript如何获取到导航条中HTTP信息
2017/10/10 Javascript
微信小程序实现漂亮的弹窗效果
2020/05/26 Javascript
js replace替换字符串同时替换多个方法
2018/11/27 Javascript
浅谈ECMAScript 中的Array类型
2019/06/10 Javascript
浅谈vuex的基本用法和mapaction传值问题
2019/11/08 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
2020/07/24 Javascript
[03:40]2014DOTA2国际邀请赛 B神专访:躲箭真的很难
2014/07/13 DOTA
[54:17]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第二场 1月10日
2021/03/11 DOTA
python3中bytes和string之间的互相转换
2017/02/09 Python
Django自定义分页与bootstrap分页结合
2021/02/22 Python
Python IDLE入门简介
2017/12/08 Python
python threading和multiprocessing模块基本用法实例分析
2019/07/25 Python
Python文件操作基础流程解析
2020/03/19 Python
JAVA及PYTHON质数计算代码对比解析
2020/06/10 Python
Python3爬虫ChromeDriver的安装实例
2021/02/06 Python
linux系统都有哪些运行级别
2012/04/15 面试题
群教个人对照检查材料
2014/08/20 职场文书
《刺客之王:C罗全景传记》:时代从来不会亏待手艺人
2019/11/28 职场文书