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+pjax简单示例汇总
Apr 21 jQuery
jquery.form.js异步提交表单详解
Apr 25 jQuery
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
JQuery特殊效果和链式调用操作示例
May 13 jQuery
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
jQuery实现简单轮播图效果
Dec 27 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实现根据浏览器跳转不同语言页面代码
2013/08/02 PHP
php中操作memcached缓存进行增删改查数据的实现代码
2014/08/15 PHP
农历与西历对照
2006/09/06 Javascript
Tab页界面,用jQuery及Ajax技术实现
2009/09/21 Javascript
将json当数据库一样操作的javascript lib
2013/10/28 Javascript
JavaScript实现LI列表数据绑定的方法
2015/08/04 Javascript
AngularJS 服务详细讲解及示例代码
2016/08/17 Javascript
详谈$.data()的用法和作用
2017/02/13 Javascript
vue.js 微信支付前端代码分享
2018/02/10 Javascript
在vue里使用codemirror遇到的问题
2018/11/01 Javascript
基于js实现逐步显示文字输出代码实例
2020/04/02 Javascript
JavaScript Image对象实现原理实例解析
2020/08/26 Javascript
jenkins自动构建发布vue项目的方法步骤
2021/01/04 Vue.js
python使用新浪微博api上传图片到微博示例
2014/01/10 Python
浅谈python中的getattr函数 hasattr函数
2016/06/14 Python
Python如何读取MySQL数据库表数据
2017/03/11 Python
Python处理XML格式数据的方法详解
2017/03/21 Python
python3 破解 geetest(极验)的滑块验证码功能
2018/02/24 Python
Python3中的bytes和str类型详解
2019/05/02 Python
pytorch sampler对数据进行采样的实现
2019/12/31 Python
Python正则表达式学习小例子
2020/03/03 Python
python实现扑克牌交互式界面发牌程序
2020/04/22 Python
介绍一下EJB的体系结构
2012/08/01 面试题
介绍一下except的用法和作用
2015/01/22 面试题
七年级地理教学反思
2014/01/26 职场文书
财务出纳岗位职责
2014/02/03 职场文书
员工入职担保书范文
2014/04/01 职场文书
老兵退伍标语
2014/10/07 职场文书
党的群众路线教育实践活动个人整改措施材料
2014/11/04 职场文书
2015年三万活动总结
2015/03/25 职场文书
活动总结模板大全
2015/05/11 职场文书
2015年科协工作总结
2015/05/19 职场文书
管辖权异议上诉状
2015/05/23 职场文书
Nginx配置之禁止指定IP访问
2022/05/02 Servers
服务器间如何实现文件共享
2022/05/20 Servers
Apache SeaTunnel实现 非CDC数据抽取
2022/05/20 Servers