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

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


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


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




wKiom1Uwqn-QC83-AAArY1xv0TU232.jpg

wKiom1Uwqn-R9knWAABAr1ACGK4821.jpg


代码:

<!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





                                                 

你可能感兴趣的