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
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
使用jQuery实现购物车结算功能
Aug 15 jQuery
jQuery中过滤器的基本用法示例
Oct 11 jQuery
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
jquery分页插件pagination使用教程
Oct 23 jQuery
jQuery实现网页拼图游戏
Apr 22 jQuery
详解jQuery-each()方法
Mar 13 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
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/03/02 无线电
php 操作excel文件的方法小结
2009/12/31 PHP
PHP文章按日期(月日)SQL归档语句
2012/11/29 PHP
ThinkPHP分页实例
2014/10/15 PHP
laravel容器延迟加载以及auth扩展详解
2015/03/02 PHP
详解PHP执行定时任务的实现思路
2015/12/21 PHP
php 微信公众平台开发模式实现多客服的实例代码
2016/11/07 PHP
Laravel实现表单提交
2017/05/07 PHP
基于javascript 闭包基础分享
2013/07/10 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
2014/10/17 Javascript
js的window.showModalDialog及window.open用法实例分析
2015/01/29 Javascript
input输入密码变黑点密文的实现方法
2017/01/09 Javascript
jquery实现input框获取焦点的简单实例
2017/01/26 Javascript
es6学习之解构时应该注意的点
2017/08/29 Javascript
Vue封装一个简单轻量的上传文件组件的示例
2018/03/21 Javascript
Vue使用watch监听一个对象中的属性的实现方法
2019/05/10 Javascript
js实现图片实时时钟
2020/01/15 Javascript
JS数组的常用10种方法详解
2020/05/08 Javascript
Vue实现PC端靠边悬浮球的代码
2020/05/09 Javascript
解决vuex刷新数据消失问题
2020/11/12 Javascript
为Python程序添加图形化界面的教程
2015/04/29 Python
用Python编写一个简单的CS架构后门的方法
2018/11/20 Python
Python使用requests提交HTTP表单的方法
2018/12/26 Python
python中aioysql(异步操作MySQL)的方法
2019/04/11 Python
基于腾讯云服务器部署微信小程序后台服务(Python+Django)
2019/05/08 Python
基于Numpy.convolve使用Python实现滑动平均滤波的思路详解
2019/05/16 Python
Python使用正则表达式分割字符串的实现方法
2019/07/16 Python
django创建超级用户过程解析
2019/09/18 Python
Python实现基于socket的udp传输与接收功能详解
2019/11/15 Python
python3将变量写入SQL语句的实现方式
2020/03/02 Python
Aveda美国官网:天然护发产品、洗发水、护发素和沙龙
2016/12/09 全球购物
AJAX应用和传统Web应用有什么不同
2013/08/24 面试题
2014各大专业毕业生自我评价
2014/09/17 职场文书
新人入职感言
2015/07/31 职场文书
公司出差管理制度范本
2015/08/05 职场文书
MySQL为id选择合适的数据类型
2021/06/07 MySQL