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插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
详解jQuery-each()方法
Mar 13 jQuery
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
JQuery插件tablesorter表格排序实现过程解析
May 28 jQuery
jquery实现淡入淡出轮播图效果
Dec 13 jQuery
jquery实现图片放大镜效果
Dec 23 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
Symfony2框架学习笔记之HTTP Cache用法详解
2016/03/18 PHP
php禁用函数设置及查看方法详解
2016/07/25 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
2010/03/20 Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
2011/11/14 Javascript
javascript实现按回车键切换焦点
2015/02/09 Javascript
C++中的string类的用法小结
2015/08/07 Javascript
js实现div在页面拖动效果
2016/05/04 Javascript
node网页分段渲染详解
2016/09/05 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
2016/11/03 Javascript
微信小程序 下拉列表的实现实例代码
2017/03/08 Javascript
vue拦截器Vue.http.interceptors.push使用详解
2017/04/22 Javascript
微信JS SDK接入的几点注意事项(必看篇)
2017/06/23 Javascript
使用 Javascript 实现浏览器推送提醒功能的示例
2017/11/03 Javascript
JS实现的JSON数组去重算法示例
2018/04/11 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
2018/08/16 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
2018/09/16 Javascript
Javascript的this详解
2019/03/23 Javascript
Vue数字输入框组件的使用方法
2019/10/19 Javascript
vue-router之实现导航切换过渡动画效果
2019/10/31 Javascript
在Vue 中实现循环渲染多个相同echarts图表
2020/07/20 Javascript
python统计多维数组的行数和列数实例
2018/06/23 Python
python 自动批量打开网页的示例
2019/02/21 Python
关于python 的legend图例,参数使用说明
2020/04/17 Python
详解pycharm自动import所需的库的操作方法
2020/11/30 Python
使用numpngw和matplotlib生成png动画的示例代码
2021/01/24 Python
NIHAOMARKET官方海外旗舰店:意大利你好华人超市
2018/01/27 全球购物
园林施工员岗位职责
2013/12/11 职场文书
网上开商店的创业计划书
2014/01/19 职场文书
中学家长会邀请函
2014/02/03 职场文书
学校三八妇女节活动情况总结
2014/03/09 职场文书
有趣的广告词
2014/03/18 职场文书
解除合同协议书
2014/04/17 职场文书
大学生入党积极分子自我评价
2014/09/20 职场文书
《狮子和鹿》教学反思
2016/02/16 职场文书
SONY AN-LP1 短波有源天线放大器
2021/04/22 无线电