定时器【一】【定时器+计数器实现简单的页面显影】

最新推荐文章于 2024-05-01 10:33:28 发布

Fade Away

最新推荐文章于 2024-05-01 10:33:28 发布

阅读量248

点赞数

分类专栏：定时器

本文链接：https://blog.csdn.net/qq_26239917/article/details/88877454

版权

定时器专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="reset.css">
		<style>
			div{
				width: 500px;
				height: 200px;
				background-color: salmon;
				/* position: absolute; */
				display: none;
				margin:100px auto;
			}
		</style>
	</head>
	<body>
		<div id = "ad">
			广告还剩<span id = "ad_span"></span>秒关闭！
		</div>
	</body>
	<script>
		var ad = getEleID("ad");
		var ad_span = getEleID("ad_span");
		
		var a = 10;
		var count = 0;
		var timer1 = setInterval(function(){
		    count++;
			if(count == 5){
				ad.style.display = "block";
			}
			if(count>=5 && count <=16)
			{
				ad_span.innerText = a;
				a--;
			}
			if(count == 16)
			{
				ad.style.display = "none";
				clearInterval(timer1);
			}
		},1000);
		//
		
		
		function getEleID(ele){
		return	document.getElementById(ele);
		}
	
	</script>
</html>