jquery实现倒计时

 1 <html>
 2 <head>
 3     <meta charset="utf-8"/>
 4     <title>jquery实现倒计时</title>
 5     <script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
 6 </head>
 7
 8 <body>
 9 <div id="remainTime" style="font-size:20px;font-weight:800;color:#FF9900"></div>
10
11 <script type="text/javascript">
12     $(function(){
13         var now=new Date();
14         var end=new Date(2018,2,3,16,10,00);//结束的时间：年，月，日，分，秒（月的索引是0~11）
15         /*两个时间相减,得到的是毫秒ms,变成秒*/
16         var result=Math.floor(end-now)/1000;
17
18         var interval=setInterval(sub,1000); //定时器 调度对象
19         /*封装减1秒的函数*/
20         function sub(){
21             if (result>1) {
22                result = result - 1;
23                var second = Math.floor(result % 60);     // 计算秒 ，取余
24                var minite = Math.floor((result / 60) % 60); //计算分 ，换算有多少分，取余，余出多少秒
25                var hour = Math.floor((result / 3600) % 24); //计算小时，换算有多少小时，取余，24小时制除以24，余出多少小时
26                var day = Math.floor(result / (3600*24));  //计算天 ，换算有多少天
27
28                $("#remainTime").html(day + "天" + hour + "小时" + minite + "分" + second + "秒");
29             } else{
30                 alert("倒计时结束！");
31                 window.clearInterval(interval);//这里可以添加倒计时结束后需要执行的事件
32             }
33         };
34     });
35 </script>
36 </body>
37 </html>

转载于:https://www.cnblogs.com/tongzhou/p/6513962.html

jquery实现倒计时相关推荐

jQuery自适应倒计时插件
jQuery自适应倒计时插件在线演示本地下载更多专业前端知识,请上 [猿2048]www.mk2048.com
jq倒计时html源码,jQuery实现倒计时功能
定义和用法 setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被 ...
jquery.countdown 倒计时插件的学习
1.第一种简单的使用第一个时间是你的倒计时截止时间,finalDate格式可以是YYYY/MM/DD MM/DD/YYYY YYYY/MM/DD hh:mm:ss MM/DD/YYYY hh:mm: ...
jQuery实现倒计时效果
<script type="text/javascript">/*@用途:jQuery实现倒计时效果$(".time").countDown({ti ...
jQuery实现倒计时计时器
本文转载自 jquery 做一个小的倒计时效果在实际运用中,经常会使用到倒计时的效果.以下代码利用jQuery实现了一个倒计时计时器. <!DOCTYPE html> <html& ...
php++倒计时插件下载,jQuery实现倒计时插件
本文将使用jQuery开发一个倒计时效果插件,使用这个插件你可以生成一个非常炫的倒计时器,你可以方便的整合到你需要的web功能模块中,希望大家喜欢! 以下代码将演示如何调用上述插件: $(functi ...
Jquery高考倒计时
// 先引入Jquery文件 <span id="timestr"><span> <script type="text/javascript ...
jQuery实现倒计时功能
首先计算倒计时的总秒数,然后定义一个定时器let timer = null var intDiff = parseInt(60);//倒计时总秒数量 timer = window.setInterva ...
jQuery 实现倒计时按钮
<button onclick="send()" id="sendBtn">发送验证码</button> function send ( ...

jquery实现倒计时

jquery实现倒计时相关推荐

最新文章

热门文章