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获取table下某一行某一列的值实现代码
Apr 07 jQuery
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
Vue项目中使用jquery的简单方法
May 16 jQuery
jQuery操作cookie的示例代码
Jun 05 jQuery
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 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
php中获取关键词及所属来源搜索引擎名称的代码
2011/02/15 PHP
基于PHP输出缓存(output_buffering)的深入理解
2013/06/13 PHP
AJAX的跨域访问-两种有效的解决方法介绍
2013/06/22 PHP
php stripslashes和addslashes的区别
2014/02/03 PHP
PHP判断IP并转跳到相应城市分站的方法
2015/03/25 PHP
php强制用户转向www域名的方法
2015/06/19 PHP
PHP设计模式之观察者模式实例
2016/02/22 PHP
PHP框架Laravel中使用UUID实现数据分表操作示例
2018/05/30 PHP
js left,right,mid函数
2008/06/10 Javascript
javascript demo 基本技巧
2009/12/18 Javascript
LABjs、RequireJS、SeaJS的区别
2014/03/04 Javascript
jQuery使用cookie与json简单实现购物车功能
2016/04/15 Javascript
关于Javascript中defer和async的区别总结
2016/09/20 Javascript
小程序实现页面顶部选项卡效果
2018/11/06 Javascript
vue  directive定义全局和局部指令及指令简写
2018/11/20 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
2019/06/18 Javascript
vue + typescript + 极验登录验证的实现方法
2019/06/27 Javascript
JavaScript前端实现压缩图片功能
2020/03/06 Javascript
在vue中使用eslint,配合vscode的操作
2020/11/09 Javascript
python实现批量转换文件编码(批转换编码示例)
2014/01/23 Python
python对json的相关操作实例详解
2017/01/04 Python
Django自定义分页与bootstrap分页结合
2021/02/22 Python
python文件选择对话框的操作方法
2019/06/27 Python
Python对列表的操作知识点详解
2019/08/20 Python
调整Jupyter notebook的启动目录操作
2020/04/10 Python
Python基于BeautifulSoup爬取京东商品信息
2020/06/01 Python
英国婚礼商城:Wedding Mall
2019/11/02 全球购物
标记环网Toke Ring IEEE802.5
2014/05/26 面试题
校庆筹备方案
2014/03/30 职场文书
护理目标管理责任书
2014/07/25 职场文书
我在伊朗长大观后感
2015/06/16 职场文书
婚礼长辈答谢词
2015/09/29 职场文书
《包身工》教学反思
2016/02/23 职场文书
在校大学生才艺比赛策划书怎么写?
2019/08/26 职场文书
总结Python使用过程中的bug
2021/06/18 Python
MySQL中LAG()函数和LEAD()函数的使用
2022/08/14 MySQL