前端倒计时

前端的倒计时，想必大家不陌生，比如备考的时候，倒计时；京东活动倒计时；任务倒计时；等等。

最近遇到一个需求，就是每个用户在创建任务的时候，超过时限，需要将任务结束掉。这就涉及到倒计时的功能。

倒计时需要满足如下几个要求：

1、刷新页面，页面上的时候不能重新开始！

2、倒计时结束的时候需要做一些操作！

如何解决第一个问题呢？

不刷新，无非是写入存储，要么读取后台该任务的创建时间，和目前系统时间作比较，得出需要倒计时的时间。

写入存储：cookie  session里。

我选择的是后台读取。

实现方法：

开始的时候第一个想法使js的计时器，每秒对需要倒计时的进行相减。但还效率上和页面体验不太好。因为页面上来js是单线程进行执行，如果出现阻塞的话，整个页面体验就不好了。

第一次方法：window.name+计时器

 1 var maxtime;
 2 if(window.name==''){
 3  maxtime = 120*60;
 4  }else{
 5  maxtime = window.name;
 6 }
 7 
 8 function CountDown(){
 9  if(maxtime>=0){
10  hours=Math.floor(maxtime/60);
11  minutes = Math.floor(maxtime/60);
12  seconds = Math.floor(maxtime%60);
13  msg = "距离任务结束还有"+minutes+"分"+seconds+"秒";
14 // document.all["timer"].innerHTML = msg;
15  document.getElementById("timer").innerHTML = msg;
16 // if(maxtime == 5*60) alert('注意，还有5分钟!');
17  --maxtime;
18  window.name = maxtime;
19  }
20  else{
21  clearInterval(timer);
22  document.getElementById("timer").innerHTML="任务已经结束!"
23  }
24 }
25 timer = setInterval("CountDown()",1000);

 该方法使用的计时器来完成我们需求。但是性能一般。

在网上查了一些插件，其中jquery的Countdown 比较简单。而且满足我的需求。

需要导入：

1     <script src="../../static/trouble_run/js/jquery-2.1.1.min.js"></script>
2     <script src="../../static/trouble_run/js/jquery.plugin.js"></script>
3     <script src="../../static/trouble_run/js/jquery.countdown.min.js"></script>

 

官网地址：http://keith-wood.name/countdown.html

其中jquery.plugin.js，为jquery的扩展兼容的插件，如果不导入，在高版本的jquery的需要他做兼容否则报错。

代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 
 6     <script src="../../static/trouble_run/js/jquery-2.1.1.min.js"></script>
 7     <script src="../../static/trouble_run/js/jquery.plugin.js"></script>
 8     <script src="../../static/trouble_run/js/jquery.countdown.min.js"></script>
 9 </head>
10 <body>
11         <p>
12             <button  id="compact"  disabled="disabled"
13                      style="font-weight: bold;font-family: Tahoma;height: 28px ;color:red ;"
14                      class=" countdown ">
15 
16             </button>
17         </p>
18 
19 
20 
21     <script type="text/javascript">
22 
23         $(function () {
24             var liftoffTime = new Date('2017-05-03 14:42:47');
25             var timestamp = (new Date()).valueOf();
26             if (liftoffTime.getTime()+7200000 >timestamp){
27             liftoffTime.setHours(liftoffTime.getHours() + 2);
28             $('#compact').countdown({until: liftoffTime, compact: true,
29                   description: '',onExpiry:ac});}
30             else {
31                 ac()
32             }
33         });
34         function ac() {
35             $('#compact').text('任务结束')
36         }
37     </script>
38 </body>
39 </html>

 

其中需要注意的是：

countdown接收的是js日期对象、或者时间字符串形式。
其中：onExpiry参数表示当计时完毕，执行的动作这里是ac函数。
对于setDate（）是设置到倒计时截止至时间。默认是天。需要注意的是，在setDate（）中，可以使用分数。比如1/12表示一天的十二分之一即：2小时。
getDate（）：获取当前时间对象的天数，即day，范围：1-31天。同理getHours（）获取的是当前时间对象的小时。范围0-24小时。如上例子是获取当前小时是14小时。
然后根据小时进行加几 再和当前时间进行对比，是否过期。没过期 cuntdown进行倒计时，否则不进行。
刷新的时候，不会进行时间的更改。
如下是效果：

 






 

posted @ 2017-05-03 15:12  evil_liu  阅读(2045)  评论(0)    收藏  举报