侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

js倒计时效果

2024-05-12 星期日 / 0 评论 / 0 点赞 / 98 阅读 / 7365 字

不涉及任何图片等,直接复制然后运行即可!下载地址请点击效果截图:可创建多个实例html:结构:js:多实例调用效果1倒计时,把div的id作为容器参数,总秒数做参数,还可以设置结束时调用函数<!DOC

不涉及任何图片等,直接复制然后运行即可!

下载地址请点击

效果截图:可创建多个实例

html:结构:

js:多实例调用

效果1

倒计时,把div的id作为容器参数,总秒数做参数,还可以设置结束时调用函数

<!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中某个属性的值做总秒数设置

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

广告 广告

评论区