当前位置:首页 > 编程教程 > javascript技术文章 > jQuery 实现倒计时天,时,分,秒功能

jQuery如何实现倒计时功能

  • 发布时间:
  • 作者:码农之家
  • 点击:92

这篇文章主要知识点是关于jquery、倒计时、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

JavaScript和jQuery实战手册
  • 类型:JavaScript大小:103 MB格式:PDF作者:大卫·索耶·麦克法兰德
立即下载

jQuery 实现倒计时天,时,分,秒功能

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实现倒计时天,时,分,秒,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

JavaScript 相关电子书
学习笔记
网友NO.102586

jQuery实现发送验证码并60秒倒计时功能

本文给大家分享一段js代码关于实现验证码功能并在60秒后倒计时功能。废话不多说了,具体代码如下所示: !DOCTYPE htmlhtmlheadmeta http-equiv="content-type" content="text/html; charset=UTF-8"meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" id="viewport" name="viewport"title/titlescript src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"/scriptscript type="text/javascript" var countdown=60; function settime(obj) { if (countdown == 0) { obj.removeAttribute("disabled"); obj.value="免费获取验证码"; countdown = 60; return;} else { obj.setAttribute("disabled", true); obj.value="重新发送(" + countdown + ")"; countdown--; } setTimeout(function() { settime(obj) },1000) }/scriptbody input type="button" id="btn" value="免费获取验证码" onclick="settime(this)" / /body/html 以上所述是小编给大家介绍的jQuery实现发送验证码并60秒倒计时功能,希望对大家有所帮助,如果大家……

网友NO.385421

基于jQuery倒计时插件实现团购秒杀效果

倒计时一般是用来表示未来某一时刻距现在时刻还剩多少时间。倒计时在WEB上应用非常广泛,如考试系统倒计时,团购网站中的优惠活动倒计时等等。今天,我们来使用jQuery倒计时超级实现团购秒杀效果,感兴趣的朋友一起学习吧! 1.1 帮助文档关键字 倒计时 秒杀 timer 1.2. 使用场景 这样的倒计时在购物网站中会经常使用到,比如秒杀,限时抢购,确认收货倒计时。 这个功能并不难实现,就是利用js的定时执行,搜了一下网上的代码,五花八门,都是一个方法,没有做到封装,方便使用,所以写了一个插件,方便项目中使用。 1.4. 使用说明 开始使用 1、 引入oao.timer.js 2、 要显示倒计时时间的div div id="timer1" end-date="2016-1-1"/div div id="timer2" end-date="2015/10/1 12:5:2"/divCode: 3、 初始化倒计时 $(function(){//文档加载完初始化倒计时 $("#timer1").oaoTime(); $("#timer2").oaoTime();……

网友NO.410875

jquery实现倒计时效果

设计一个答题的小游戏,每道题可以有20秒时间作答,超过时间就要给出相应的提醒,由于20秒时间太长,不适合做GIF动态图,下面来看一下我写的5秒倒计时的测试程序结果: 一、主体程序 !DOCTYPE htmlhtml head meta charset="utf-8" / title手写倒计时程序/title link rel="stylesheet" type="text/css" href="css/layout.css"/ /head body section class="countDown" span id="countDownTime"/span section class="clear"/section /section script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"/script script src="js/layout.js" type="text/javascript" charset="utf-8"/script /body/html 二、CSS样式 *{ margin: 0; padding:0;}html{ font-size: 12px;}.countDown{ width: 3.8rem; text-align: center; margin: 2rem auto 0 auto;}.countDown #countDownTime{ font-size: 2rem;} 三、Jquery程序 先来说一下倒计时的原理: 1、将时间转为0:0格式 2、需要开启一个定时器,每隔1000ms就让时间自动减1 3、判断……

网友NO.547073

jQuery倒计时代码(超简单)

具体代码如下所示: !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" titleTitle/title/headbody span class="timespan"/span/bodyscript src="libs/jquery-1.11.3.js"/scriptscript var starttime = new Date("2017/11/20"); setInterval(function () { var nowtime = new Date(); var time = starttime - nowtime; var day = parseInt(time / 1000 / 60 / 60 / 24); var hour = parseInt(time / 1000 / 60 / 60 % 24); var minute = parseInt(time / 1000 / 60 % 60); var seconds = parseInt(time / 1000 % 60); $('.timespan').html(day + "天" + hour + "小时" + minute + "分钟" + seconds + "秒"); }, 1000);/script/html 以上所述是小编给大家介绍的jQuery倒计时代码(超简单),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持! ……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com

idea注册码