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 EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
jquery 键盘事件的使用方法详解
Sep 13 jQuery
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
jquery添加div实现消息聊天框
Feb 08 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读取xml方法介绍
2013/01/12 PHP
Window 7/XP 安装Apache 2.4与PHP 5.4 的过程详解
2013/06/02 PHP
PHP+MySql实现一个简单的留言板
2020/07/19 PHP
jquery.validate使用攻略 第二部
2010/07/01 Javascript
JavaScript验证18位身份证号码最后一位正确性的实现代码
2014/08/07 Javascript
jquery淡入淡出效果简单实例
2016/01/14 Javascript
一起学写js Calender日历控件
2016/04/14 Javascript
javascript事件模型介绍
2016/05/31 Javascript
checkbox批量选中,获取选中项的值的简单实例
2016/06/28 Javascript
javascript 显示全局变量与隐式全局变量的区别
2017/02/09 Javascript
package.json文件配置详解
2017/06/15 Javascript
利用pm2部署多个node.js项目的配置教程
2017/10/22 Javascript
Angular浏览器插件Batarang介绍及使用
2018/02/07 Javascript
NodeJS如何实现同步的方法示例
2018/08/24 NodeJs
vue环形进度条组件实例应用
2018/10/10 Javascript
Vuex实现数据共享的方法
2019/12/20 Javascript
JS实现电脑虚拟键盘打字测试
2020/06/24 Javascript
js实现盒子滚动动画效果
2020/08/09 Javascript
Python使用百度API上传文件到百度网盘代码分享
2014/11/08 Python
Pycharm远程调试openstack的方法
2017/11/21 Python
安装python时MySQLdb报错的问题描述及解决方法
2018/03/20 Python
关于Tensorflow中的tf.train.batch函数的使用
2018/04/24 Python
python opencv3实现人脸识别(windows)
2018/05/25 Python
python实现简单登陆系统
2018/10/18 Python
Python中作用域的深入讲解
2018/12/10 Python
基于Python爬取爱奇艺资源过程解析
2020/03/02 Python
Tensorflow tf.nn.depthwise_conv2d如何实现深度卷积的
2020/04/20 Python
Python学习笔记之装饰器
2020/08/06 Python
使用python-cv2实现视频的分解与合成的示例代码
2020/10/26 Python
Oroton中国官网:澳洲知名奢侈配饰品牌
2017/03/26 全球购物
物流毕业生个人的自我评价
2014/02/13 职场文书
乔迁之喜主持词
2014/03/27 职场文书
小学生学习雷锋倡议书
2014/05/15 职场文书
法学自荐信
2014/06/20 职场文书
财政专业大学生职业生涯规划书
2014/09/17 职场文书
2016年教师节贺卡寄语
2015/12/04 职场文书