闪购活动js 【一个倒计时接一个倒计时活动】

简介:

封装倒计时js -闪购活动(一个倒计时接一个倒计时活动)


闪购活动 上个活动结束 下个活动接着开始 以此类推【技术要点:时间的连续】的js代码


应用场景:手机端商城,几分钟活动,手指左右滑动界面到另一个倒计时活动(要求:第一个倒计时活动后,第二个倒计时活动才开始,以此类推)




wKiom1Uwqn-QC83-AAArY1xv0TU232.jpg

wKiom1Uwqn-R9knWAABAr1ACGK4821.jpg


代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html  xmlns = "http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv = "Content-Type"  content = "text/html; charset=utf-8"  />
< title >闪购活动  上个活动结束  下个活动接着开始  以此类推</ title >
</ head >
< body >
  < script >  
     function countDown( maxtime,_times,liu,fn )  
     {   
        var liu = document.getElementById(liu);
        var timer = setInterval(function()                                
        {  
            if(maxtime>=0){     
                  minutes = Math.floor(maxtime/60);   
                  seconds = Math.floor(maxtime%60); 
                  if(minutes< 10 ){
                      minutes = "0" +minutes;
                      }
                 if(seconds<10){
                      seconds = "0" +seconds;
                      }  
                  if(maxtime > _times){
                      msg = "--:--";  
                      liu.style.display="none";
                      }else{
                          msg = ""+minutes+":"+seconds+"";    
                          liu.style.display="";
                          }; 
                  fn( msg );
                  --maxtime;     
             }     
              else{     
                 clearInterval( timer );  
                 fn("00:00"); 
                 liu.style.display="",liu.innerHTML="结束";
             }     
         }, 1000);  
     }  
     </ script >  
       
     < div  id = "timer1"  style = "color:red" >--:--</ div >  
     < div  id = "timer2"  style = "color:red" >--:--</ div >
     < div  id = "timer3"  style = "color:red" >--:--</ div >    
     < div  id = "cont1"  style = "color:red; display:none;" >价格:888</ div
     < div  id = "cont2"  style = "color:red; display:none;" >价格:999</ div
     < div  id = "cont3"  style = "color:red; display:none;" >价格:555</ div
       
      < script >
      //注意这里的这些活动是在当前本地之间为背景下的
      var EndTime= new Date('2015/04/17 14:35:00');//结束时间
      var startTime= new Date('2015/04/17 14:30:00');//开始时间
      var EndTime2= new Date('2015/04/17 14:40:00');//结束时间
      var startTime2= new Date('2015/04/17 14:35:01');//开始时间
      var EndTime3= new Date('2015/04/17 14:45:00');//结束时间
      var startTime3= new Date('2015/04/17 14:40:01');//开始时间
      var NowTime = new Date();
      var _time =  (EndTime.getTime() - startTime.getTime())/1000;
      var _time2 =  (EndTime2.getTime() - startTime2.getTime())/1000;
      var _time3 =  (EndTime3.getTime() - startTime3.getTime())/1000;
      var t =(EndTime.getTime() - NowTime.getTime())/1000;
      var t2 =(EndTime2.getTime() - NowTime.getTime())/1000;
      var t3 =(EndTime3.getTime() - NowTime.getTime())/1000;
      
         countDown( t,_time,"cont1",function( msg )  
         {  
             document.getElementById('timer1').innerHTML = msg;
         });  
           
         countDown( t2,_time2,"cont2",function( msg )  
         {  
             document.getElementById('timer2').innerHTML = msg;
         }) 
         countDown( t3,_time3,"cont3",function( msg )  
         {  
             document.getElementById('timer3').innerHTML = msg;
         }) 
      </ script >  
</ body >
</ html >






源码下载地址:

http://down.51cto.com/data/2039771




                j_0022.gif                        j_0022.gif 

             j_0022.gif                        j_0022.gif

j_0022.gifj_0022.gifj_0022.gifj_0022.gifj_0022.gifj_0022.gifj_0022.gifj_0022.gifj_0022.gifj_0022.gifj_0022.gif

             j_0022.gif                        j_0022.gif

                j_0022.gif                        j_0022.gif








   本文转自许琴 51CTO博客,原文链接:http://blog.51cto.com/xuqin/1633869,如需转载请自行联系原作者






相关文章
|
1月前
|
JavaScript
JS利用时间戳倒计时案例
JS利用时间戳倒计时案例
|
3月前
|
移动开发 JavaScript 前端开发
分享75个JS特效倒计时,总有一款适合您
分享75个JS特效倒计时,总有一款适合您
23 0
|
3月前
|
JavaScript 前端开发 小程序
element 订单列表中 实现多个倒计时(vue+js)
element 订单列表中 实现多个倒计时(vue+js)
|
3月前
|
JavaScript
实现一个网页同时调用多个倒计时 jquery/js
实现一个网页同时调用多个倒计时 jquery/js
|
4月前
|
JavaScript
JS倒计时
JS倒计时
|
5月前
|
JavaScript 前端开发
js实现长按录制视频按钮外部转圈倒计时10秒的效果
js实现长按录制视频按钮外部转圈倒计时10秒的效果
36 0
|
7月前
|
JavaScript
js倒计时效果demo示例
js倒计时效果demo示例
|
9月前
|
JavaScript
js实现获取验证短信倒计时功能
前言 今天和大家分享一个小功能,在我们进行需要获取手机验证码或其他方式的验证码进行登录时会有一个功能,就是当你点击发送验证码时会有一个倒计时,倒计时没有结束时按钮是禁用的状态,防止重复发送短信,下面我们来看一下这个功能使用JS该如何实现。