倒计时

最新推荐文章于 2023-03-13 10:27:54 发布

jiaqi2016

最新推荐文章于 2023-03-13 10:27:54 发布

阅读量188

点赞数

分类专栏：备忘

本文链接：https://blog.csdn.net/u010507920/article/details/52640574

版权

备忘专栏收录该内容

23 篇文章 0 订阅

订阅专栏

代码简洁的倒计时效果，备忘：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>倒计时</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		#box {
			width: 200px;
			height: 200px;
			text-align: center;
			background-color: purple;
		}
		#box h3 {
			font-size: 25px;
			padding-top: 30px;
			color: #fff;
		}
		#box p {
			font-size: 25px;
			padding-top: 30px;
			color: #fff;
		}
		
	</style>
</head>
<body>
	<div id="box">
		<h3>限时抢购</h3>
		<p></p>
	</div>
</body>
<script>
	var box=document.getElementById('box');
	//十，分，秒
	var a=10,b=0,c=0;
	function fun(){
		c-=1;
		if(c<0){
			c=59;
			b-=1;
		}
		if(b<0){
			b=59;
			a-=1;
		}
		//补零操作
		function padLeft(ele){
			//小于10代表是单数，需要补零
			if(ele<10){
				ele="0"+ele;
				return ele;
			}else{
				return ele;
			}
		}
		var hour=padLeft(a);
		var min=padLeft(b);
		var sec=padLeft(c);
		box.children[1].innerHTML=hour+"时"+min+"分"+sec+'秒';
    }
    setInterval(fun,1000);
	
</script>
</html>

jiaqi2016

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
倒计时

代码简洁的倒计时效果，备忘：倒计时 * { margin: 0; padding: 0; } #box { width: 200px; height: 200px; text-align: center; background-color: purple; } #box h3 { font-size: 25px;
复制链接

扫一扫