js倒计时效果

时间 2019-11-10

标签倒计时效果栏目 JavaScript 繁體版

原文原文链接

不涉及任何图片等，直接复制而后运行便可！css

下载地址请点击html

效果截图：可建立多个实例函数

html：结构：spa

js：多实例调用.net

效果1code

倒计时，把div的id做为容器参数，总秒数作参数，还能够设置结束时调用函数htm

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>倒计时</title>
		<link rel="stylesheet" href="css/common.css" type="text/css" charset="utf-8"/>
		<style type="text/css">
		*{ margin:0; padding:0;}
		.dtime{ margin:10px;}
		.dtime span{ color:#C30;}
		</style>       

	</head>
	<body>
   		<div class="dtime" id="a1"></div>
        <div class="dtime" id="a2"></div>
        <div class="dtime" id="a3"></div>
        <div class="dtime" id="a4"></div>
        <div class="dtime" id="a5"></div>
	</body>	
    <script>
	function tbdTimeCountdown(args){//倒计时函数
		var ele=document.getElementById(args.id);
		var alltime=args.alltime;
		var arr=[];

		var t=Math.floor(alltime/(24*60*60));
		var yt=alltime%(24*60*60);

		var s=Math.floor(yt/(60*60));
		var ys=yt%(60*60);

		var f=Math.floor(ys/(60));
		var yf=ys%(60);

		var m=yf;

		arr[0]=[t,"天"];
		arr[1]=[s,"小时"];
		arr[2]=[f,"分"];
		arr[3]=[m,"秒结束"];

		var s=ce(arr,0);

		ele.innerHTML=s;

		var dong;

		dong=setInterval(function(){
			alltime-=1;
			if(alltime<=0){
				clearInterval(dong);
				ele.innerHTML="<span>0</span>秒";
				args.end();
			}else{
				t=Math.floor(alltime/(24*60*60));
				yt=alltime%(24*60*60);

				s=Math.floor(yt/(60*60));
				ys=yt%(60*60);

				f=Math.floor(ys/(60));
				yf=ys%(60);

				m=yf;

				arr[0]=[t,"天"];
				arr[1]=[s,"小时"];
				arr[2]=[f,"分"];
				arr[3]=[m,"秒结束"];

				var s=ce(arr,0);

				ele.innerHTML=s;
			};						
		},1000);

		function ce(arr,sta){
			var i=sta;
			if(i<arr.length){
				if(arr[i][0]!=0){
					var s="";
					for(var j=i;j<arr.length;j++){
						s+="<span>"+arr[j][0]+"</span>"+arr[j][1];
					};
					return s;
				}else{
					return ce(arr,i+1);
				};
			};
		};
	};//倒计时end
	//效果1
	//86402 3602 62
	tbdTimeCountdown({id:"a1",//含有倒计时容器
		alltime:3,//倒计时总秒数
		end:function(){//倒计时结束，时间为0是调用的函数
			//alert("倒计时结束才会执行！");
		},

	});
	//效果2
	tbdTimeCountdown({id:"a2",//含有倒计时容器
		alltime:62,//倒计时总秒数
		end:function(){//倒计时结束，时间为0是调用的函数
		},

	});
	//效果3
	tbdTimeCountdown({id:"a3",//含有倒计时容器
		alltime:3602,//倒计时总秒数
		end:function(){//倒计时结束，时间为0是调用的函数
		},

	});
	//效果4
	tbdTimeCountdown({id:"a4",//含有倒计时容器
		alltime:86402,//倒计时总秒数
		end:function(){//倒计时结束，时间为0是调用的函数
		},

	});
	//效果4
	tbdTimeCountdown({id:"a5",//含有倒计时容器
		alltime:154789,//倒计时总秒数
		end:function(){//倒计时结束，时间为0是调用的函数
		},

	});
    </script>
</html>

效果2图片

倒计时效果，div的id作容器，div中某个属性的值作总秒数设置ip

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>倒计时</title>
		<link rel="stylesheet" href="css/common.css" type="text/css" charset="utf-8"/>
		<style type="text/css">
		*{ margin:0; padding:0;}
		.dtime{ margin:10px;}
		.dtime span{ color:#C30;}
		</style>       

	</head>
	<body>
   		<div class="dtime" id="a1" alltime="3"></div>
        <div class="dtime" id="a2" alltime="62"></div>
        <div class="dtime" id="a3" alltime="3605"></div>
        <div class="dtime" id="a4" alltime="48605"></div>
        <div class="dtime" id="a5" alltime="123456"></div>
	</body>	
    <script>
	function tbdTimeCountdown(args){//倒计时函数
		var ele=document.getElementById(args.id);
		var alltime=Number(ele.getAttribute(args.alltime));
		var arr=[];

		var t=Math.floor(alltime/(24*60*60));
		var yt=alltime%(24*60*60);

		var s=Math.floor(yt/(60*60));
		var ys=yt%(60*60);

		var f=Math.floor(ys/(60));
		var yf=ys%(60);

		var m=yf;

		arr[0]=[t,"天"];
		arr[1]=[s,"小时"];
		arr[2]=[f,"分"];
		arr[3]=[m,"秒结束"];

		var s=ce(arr,0);

		ele.innerHTML=s;

		var dong;

		dong=setInterval(function(){
			alltime-=1;
			ele.setAttribute(args.alltime,alltime);
			if(alltime<=0){
				clearInterval(dong);
				ele.innerHTML="<span>0</span>秒";
				args.end();
			}else{
				t=Math.floor(alltime/(24*60*60));
				yt=alltime%(24*60*60);

				s=Math.floor(yt/(60*60));
				ys=yt%(60*60);

				f=Math.floor(ys/(60));
				yf=ys%(60);

				m=yf;

				arr[0]=[t,"天"];
				arr[1]=[s,"小时"];
				arr[2]=[f,"分"];
				arr[3]=[m,"秒结束"];

				var s=ce(arr,0);

				ele.innerHTML=s;
			};						
		},1000);

		function ce(arr,sta){
			var i=sta;
			if(i<arr.length){
				if(arr[i][0]!=0){
					var s="";
					for(var j=i;j<arr.length;j++){
						s+="<span>"+arr[j][0]+"</span>"+arr[j][1];
					};
					return s;
				}else{
					return ce(arr,i+1);
				};
			};
		};
	};//倒计时end
	//效果1
	//86402 3602 62
	tbdTimeCountdown({id:"a1",//含有倒计时容器
		alltime:"alltime",//倒计时总秒数
		end:function(){//倒计时结束，时间为0是调用的函数
			//alert("倒计时结束才会执行！");
		},

	});
	//效果2
	tbdTimeCountdown({id:"a2",//含有倒计时容器
		alltime:"alltime",//倒计时总秒数
		end:function(){//倒计时结束，时间为0是调用的函数
		},

	});
	//效果3
	tbdTimeCountdown({id:"a3",//含有倒计时容器
		alltime:"alltime",//倒计时总秒数
		end:function(){//倒计时结束，时间为0是调用的函数
		},

	});
	//效果4
	tbdTimeCountdown({id:"a4",//含有倒计时容器
		alltime:"alltime",//倒计时总秒数
		end:function(){//倒计时结束，时间为0是调用的函数
		},

	});
	//效果4
	tbdTimeCountdown({id:"a5",//含有倒计时容器
		alltime:"alltime",//倒计时总秒数
		end:function(){//倒计时结束，时间为0是调用的函数
		},

	});
    </script>
</html>