倒计时弹框-JavaScript

最新推荐文章于 2022-11-04 16:01:20 发布

领导同意

最新推荐文章于 2022-11-04 16:01:20 发布

阅读量1.8k

点赞数 1

分类专栏：笔记文章标签： JavaScript

本文链接：https://blog.csdn.net/qq_39686864/article/details/100142208

版权

笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title>倒计时弹框</title>
	<script type="text/javascript">
		window.onload = function(){
			var oPop = document.getElementsByTagName('div')[0];
			var bTn = document.getElementsByTagName('input')[0];
			var oTip = document.getElementsByTagName('p')[0];
			var iTime = 5;

			bTn.onclick = function(){
				oPop.style.display ='block';

				var timer = setInterval(fnDaojishi,1000);

				function fnDaojishi(){
					iTime--;
					oTip.innerHTML = '还有'+ iTime +'秒关闭'
					if(iTime==0){
						oPop.style.display ='none';
						clearInterval(timer);
						iTime=5;
						oTip.innerHTML = '还有5秒关闭';

					}
				}

			}
		}

	</script>

	<style type="text/css">
		div{
			width: 290px;
			height: 300px;
			background-color: gold;
			display: none;
		}
	</style>

</head>
<body>
	<div class="pop_con">
		<h2>弹框标题</h2>
		<br><br>
		<p id = 'tip'>还有5秒关闭</p>
	</div>

	<input type="button" name="" value="弹出弹框" id="btn">
</body>
</html>

领导同意

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
倒计时弹框-JavaScript

<!DOCTYPE html><html><head> <title>倒计时弹框</title> <script type="text/javascript"> window.onload = function(){ var oPop = document.getElementsByTagName('div'...
复制链接

扫一扫