前端 JS定时器弹框

最新推荐文章于 2024-07-15 16:14:38 发布

某某某的洛先生

最新推荐文章于 2024-07-15 16:14:38 发布

阅读量810

点赞数

本文链接：https://blog.csdn.net/cc576795555/article/details/86358581

版权

本文详细介绍了如何使用JavaScript的setTimeout和setInterval函数来创建定时器，实现在网页上弹出提示框的功能。通过实例代码，讲解了定时器的工作原理及如何控制定时器的执行和清除，帮助读者更好地理解和应用前端开发中的定时器技巧。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>定时器弹框</title>
	<style type="text/css">
		.pop{
			width: 400px;
			height: 300px;
			background-color: #fff;
			border: 1px solid #000;
			/*固定定位*/
			position: fixed;
			/*左上角位于页面中心*/
			left: 50%;
			top: 50%;
			/*让div向左偏移半个宽度、向上偏移半个高度，使div位于页面中心*/
			margin-left: -200px;
			margin-top: -150px;
			/*弹窗在最上面*/
			z-index: 9999;
		}
		/*遮罩样式*/
		.mask{
			position: fixed;
			width: 100%;
			height: 100%;
			background-color: #000;
			left: 0;
			top: 0;
			/*设置透明度30%*/
			opacity: 0.3;
			filter: alpha(opacity=30);/*兼容IE6、7、8*/
			/*遮罩在弹窗的下面，在网页所有内容的上面*/
			z-index: 9990;
		}
		.pop_con{
			display: none;/*默认不显示，用定时器显示*/
		}
	</style>
	<script type="text/javascript">
		/*
		setTimeout		只执行一次的定时器
		clearTimeout	关闭只执行一次的定时器
		setInterval		反复执行的定时器
		clearInterval	关闭反复执行的定时器
		*/