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 27 jQuery
jQuery Tree Multiselect使用详解
May 02 jQuery
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
jQuery选择器之子元素选择器详解
Sep 18 jQuery
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
jQuery实现模糊查询的方法分析
May 10 jQuery
jQuery分组选择器简单用法示例
Apr 04 jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
jQuery实现获取多选框的值示例
Feb 07 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
ThinkPHP模板判断输出Defined标签用法详解
2014/06/30 PHP
PHP使用缓存即时输出内容(output buffering)的方法
2015/08/03 PHP
php简单统计在线人数的方法
2016/05/10 PHP
PHP AjaxForm提交图片上传并显示图片源码
2016/11/29 PHP
Laravel中10个有用的用法小结
2019/05/06 PHP
PHP使用ajax的post方式下载excel文件简单示例
2019/08/06 PHP
firefox插件Firebug的使用教程
2010/01/02 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
2014/03/05 Javascript
基于javascript实现判断移动终端浏览器版本信息
2014/12/09 Javascript
jQuery中大家不太了解的几个方法
2015/03/04 Javascript
javascript实现rgb颜色转换成16进制格式
2015/07/10 Javascript
javascript日期处理函数,性能优化批处理
2015/09/06 Javascript
Javascript模仿淘宝信用评价实例(附源码)
2015/11/26 Javascript
js中window.open的参数及注意注意事项
2016/07/06 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
2016/08/06 Javascript
jsp 网站引入外部css或者js失效问题解决
2016/10/31 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
2017/02/13 Javascript
基于vue的换肤功能的示例代码
2017/10/10 Javascript
微信小程序下拉菜单效果的实例代码
2019/05/14 Javascript
[04:29]2014DOTA2国际邀请赛 主赛事第三日TOPPLAY
2014/07/21 DOTA
[01:55]TI9显影之尘系列 - Evil Geniuses
2019/08/22 DOTA
使用Python设置tmpfs来加速项目的教程
2015/04/17 Python
基于Python如何使用AIML搭建聊天机器人
2016/01/27 Python
Python判断一个三位数是否为水仙花数的示例
2018/11/13 Python
python实现点击按钮修改数据的方法
2019/07/17 Python
详解Python二维数组与三维数组切片的方法
2019/07/18 Python
Python使用ffmpy将amr格式的音频转化为mp3格式的例子
2019/08/08 Python
Pytorch释放显存占用方式
2020/01/13 Python
Python timeit模块的使用实践
2020/01/13 Python
python中字典增加和删除使用方法
2020/09/30 Python
HTML5中的Article和Section元素认识及使用
2013/03/22 HTML / CSS
英国专业美容产品在线:Mylee(从指甲到脱毛)
2020/07/06 全球购物
表扬信格式
2014/01/12 职场文书
护理专科毕业自荐信范文
2014/04/21 职场文书
计划生育工作汇报
2014/10/28 职场文书
入党转正介绍人意见
2015/06/03 职场文书