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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。