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实现瀑布流页面
Apr 11 jQuery
jquery拖动改变div大小
Jul 04 jQuery
jquery版轮播图效果和extend扩展
Jul 18 jQuery
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
jQuery插件Validation表单验证详解
May 26 jQuery
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
浅谈JS和jQuery的区别
Mar 27 jQuery
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 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/12/06 PHP
如何在PHP程序中防止盗链
2008/04/09 PHP
php生成静态页面的简单示例
2014/04/17 PHP
Yii2 rbac权限控制之rule教程详解
2016/06/23 PHP
php 中奖概率算法实现代码
2017/01/25 PHP
PHP观察者模式定义与用法实例分析
2019/03/22 PHP
PHP7导出Excel报ERR_EMPTY_RESPONSE解决方法
2019/04/16 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
jquery jqPlot API 中文使用教程(非常强大的图表工具)
2011/08/15 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
2015/09/11 Javascript
JS实现在状态栏显示打字效果完整实例
2015/11/02 Javascript
JS针对Array的各种操作汇总
2016/11/29 Javascript
JavaScript如何获取到导航条中HTTP信息
2017/10/10 Javascript
layui表格 返回的数据状态异常的解决方法
2019/09/10 Javascript
浅谈vuex为什么不建议在action中修改state
2020/02/02 Javascript
python实现决策树C4.5算法详解(在ID3基础上改进)
2017/05/31 Python
python发送邮件实例分享
2017/07/28 Python
Python使用pickle模块存储数据报错解决示例代码
2018/01/26 Python
Python自定义线程池实现方法分析
2018/02/07 Python
python实现排序算法解析
2018/09/08 Python
命令行运行Python脚本时传入参数的三种方式详解
2019/10/11 Python
Python大数据之使用lxml库解析html网页文件示例
2019/11/16 Python
Django-xadmin后台导入json数据及后台显示信息图标和主题更改方式
2020/03/11 Python
pytorch使用horovod多gpu训练的实现
2020/09/09 Python
Python自动化办公Excel模块openpyxl原理及用法解析
2020/11/05 Python
python help函数实例用法
2020/12/06 Python
彪马俄罗斯官网:PUMA俄罗斯
2019/07/13 全球购物
澳大利亚领先的内衣店:Bendon Lingerie澳大利亚
2020/05/15 全球购物
毕业生优秀推荐信
2013/11/26 职场文书
电子商务专业学生职业生涯规划
2014/03/07 职场文书
政风行风整改方案
2014/10/25 职场文书
2014年精神文明建设工作总结
2014/11/19 职场文书
家装业务员岗位职责
2015/04/03 职场文书
2016年秋季新学期致辞
2015/07/30 职场文书
安全教育培训制度
2015/08/06 职场文书
Python使用protobuf序列化和反序列化的实现
2021/05/19 Python