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遮罩层实例讲解
May 11 jQuery
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
AJAX在JQuery中的应用详解
Jan 30 jQuery
jQuery分组选择器简单用法示例
Apr 04 jQuery
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
JQuery插件tablesorter表格排序实现过程解析
May 28 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
LNMP部署laravel以及xhprof安装使用教程
2017/09/14 PHP
JavaScript TO HTML 转换
2006/06/26 Javascript
写给想学习Javascript的朋友一点学习经验小结
2010/11/23 Javascript
轻松实现javascript图片轮播特效
2016/01/13 Javascript
学好js,这些js函数概念一定要知道【推荐】
2017/01/19 Javascript
基于JavaScript定位当前的地理位置
2017/04/11 Javascript
AngularJs实现聊天列表实时刷新功能
2017/06/15 Javascript
JavaScript操作文件_动力节点Java学院整理
2017/06/30 Javascript
React学习笔记之列表渲染示例详解
2017/08/22 Javascript
详解使用jest对vue项目进行单元测试
2018/09/07 Javascript
vue项目打包后怎样优雅的解决跨域
2019/05/26 Javascript
Vue组件间通信 Vuex的用法解析
2019/08/05 Javascript
JS实现躲避粒子小游戏
2020/06/18 Javascript
[02:42]DOTA2英雄基础教程 杰奇洛
2013/12/23 DOTA
[01:33]真香警告!DOTA2勇士令状不朽珍藏Ⅱ饰品欣赏
2018/06/26 DOTA
python脚本作为Windows服务启动代码详解
2018/02/11 Python
Python cookbook(数据结构与算法)找出序列中出现次数最多的元素算法示例
2018/03/15 Python
Pipenv一键搭建python虚拟环境的方法
2018/05/22 Python
python创建文件备份的脚本
2018/09/11 Python
python中ImageTk.PhotoImage()不显示图片却不报错问题解决
2018/12/06 Python
详解python tkinter 图片插入问题
2020/09/03 Python
微信小程序实现可实时改变转速的css3旋转动画实例代码
2018/09/11 HTML / CSS
美国第二大连锁书店:Books-A-Million
2017/12/28 全球购物
中国跨境电子商务网站:NewFrog
2018/03/10 全球购物
Godiva巧克力英国官网:比利时歌帝梵巧克力
2018/08/28 全球购物
mysql有关权限的表都有哪几个
2015/04/22 面试题
幼师专业毕业生自荐信
2013/09/29 职场文书
自我评价如何写好?
2014/01/05 职场文书
制作部班长职位说明书
2014/02/26 职场文书
清明节扫墓活动总结
2015/02/09 职场文书
2015年小学远程教育工作总结
2015/07/28 职场文书
安全教育日主题班会
2015/08/13 职场文书
高二语文教学反思
2016/02/16 职场文书
《我的长生果》教学反思
2016/02/20 职场文书
SQL Server中搜索特定的对象
2022/05/25 SQL Server