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

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

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

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

代码:

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

                        

                        

                        

                        

时间: 2024-08-04 14:31:00

闪购活动js 【一个倒计时接一个倒计时活动】的相关文章

用js在网页上完成倒计时3秒后自动跳转到另一个页面

<body> <div id="time"></div> <a href="#" onclick="stop()">停止</a> <script type="text/javascript"> var i=3; function changeTime(){ document.getElementById("time").innerHTM

js实现动态给一个div添加文本内容与简单的日历

js实现动态给一个div添加文本内容(即在文本框中输入一段文字,点击设置文字按钮实现将文本框中的文字添加到div中) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <style

canvas:制作一个很炫的倒计时

canvas:制作一个很炫的倒计时 1.目的:     很多网站都会用到倒计时,如:天猫等.本文讲述的是一个用canvas实现的绚丽的倒计时. 2.原理: canvas标签类似于html的其他标签,<canvas></canvas>,canvas就相当于一张画布,可以在上面绘制各种自己想要的效果. 数字的点阵实现,利用0和1,0标示不填充,1表示用绿色小球填充.         <canvas id="canvas" width="1200&qu

css,js文件后面加一个版本号

由于前几天,更新了项目,更新的文件有js文件,今天客人截图过来,我发现修改之后的效果没有显示出来,我回复说清理浏览器缓存.到了晚上,客人找老板,说还没有处理到這个,说客人不懂這个.所以想到之前自己为了避免浏览器缓存js,css文件,在js,css后面加一个版本号,时间随机.這次笔者是在js后面加了一个版本号参数,应该可以强制到客人的浏览器浏览這个画面时,重新下载修改之后的js文件.如: <script type="text/javascript" src="js/tes

js字符串长度计算(一个汉字==两个字符)和字符串截取

js字符串长度计算(一个汉字==两个字符)和字符串截取 String.prototype.realLength = function() { return this.replace(/[^\x00-\xff]/g, "**").length; // [^\x00-\xff] - 匹配非双字节的字符 }; String.prototype.realSubstring = function(n){ var str = this||''; if(this.realLength()<=n

js如何获取另一个页面传递过来的值?

var t="<%=request.getParameter("do")%>"; alert(t); js如何获取另一个页面传递过来的值?

php大力力 [028节] 如何下载js文件,网上一个*.js无法下载啊??????

php大力力 [028节] 如何下载js文件,网上一个*.js无法下载啊?????? safari也无法下载 迅雷也无法下载 是不是对方网站服务器的不让下载那个js目录的文件??? 只能调用js函数啊??? 痛苦啊痛苦 难过啊 ?? php大力力 [028节] 如何下载js文件,网上一个*.js无法下载啊?????? http://www.cnblogs.com/dalitongxue/p/4764290.html

css文件和js文件后面带一个问号

经常看一些网站页面源代码中的css文件和js文件后面带一个问号,后面跟着一连串数字或字符,这是干什么用的? 这个方法我也用过,而且很好用?,它的作用有两个:1.作为版本号,让自己方便记忆.查找:2.作为修改标签,让浏览器重新下载新文件. 其实css文件后面得问号起不到实际作用,仅能当作后缀,如果用问号加参数的方法,可以添加版本号等信息,比如新浪.facebook上用到的: http://xxx.xxx.cn/css/common/index.css?version=20101126145707

Node.js入门以及第一个helloworld程序

1.概念:简单的说 Node.js 就是运行在服务端的 JavaScript.学之前需要明白Node.js是无法挑战jsp.php或者asp这种老牌网站的地位的,是永远不会出现在证券.金融这种领域的.node.js的出现,就像是思维的极限反转带来的性能极致,它就像是一个玩具一样,如果把传统的jsp必做战斗机的话,那么node.js就是一个无人机! 2.Node.js的三大特性 单线程 事件驱动 非阻塞I/O Node.js的这三个特性,缺一不可,正是这些特性导致他的性能高效.当别人考虑如何进行服