定时器

最新推荐文章于 2023-04-09 01:23:43 发布

YRyr.*

最新推荐文章于 2023-04-09 01:23:43 发布

阅读量118

点赞数

分类专栏： CSS 文章标签：定时器

本文链接：https://blog.csdn.net/weixin_43152725/article/details/86171947

版权

CSS 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

定时器弹框

<!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	关闭反复执行的定时器
		*/

		window.onload = function(){
			var oPop = document.getElementById('pop');
			var oShut = document.getElementById('shutOff');

			/*setTimeout(showPop, 3000);//开启定时器，3秒后调用函数showPop()弹框

			function showPop(){
				oPop.style.display = 'block';//显示弹框和遮罩
			}*/
			//开启定时器的简写方式：调用匿名函数
			setTimeout(function(){
				oPop.style.display = 'block';
			}, 3000);

			oShut.onclick = function(){
				oPop.style.display = 'none';//关闭弹框和遮罩
			}
		}
	</script>
</head>
<body>
	<h1>首页标题</h1>
	<p>页面内容</p>
	<a href="http://www.baidu.com">百度网</a>


	<div class="pop_con" id="pop">
		<div class="pop">
			<h3>提示信息！</h3>
			<a href="#" id="shutOff">关闭</a>
		</div>
		<div class="mask"></div>
	</div>
</body>
</html>

定时器的基本用法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>定时器的基本用法</title>
	<script type="text/javascript">
		//单次定时器
		var timer = setTimeout(function(){
			alert('hello!');
		}, 3000);

		//清除单次定时器
		clearTimeout(timer);

		//反复循环定时器
		var timer2 = setInterval(function(){
			alert('hi~~~');
		}, 2000);

		//清除反复循环定时器
		clearInterval(timer2);
	</script>
</head>
<body>
	
</body>
</html>

定时器动画

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>定时器动画</title>
	<style type="text/css">
		.box{
			width: 100px;
			height: 100px;
			background-color: gold;
			position: fixed;
			left: 20px;
			top: 20px;
		}
	</style>
	<script type="text/javascript">
		window.onload = function(){
			var oBox = document.getElementById('box');

			var left = 20;
			//反复循环定时器，每30毫秒修改一次盒子的left值
			var timer = setInterval(function(){
				left += 2;
				oBox.style.left = left + 'px';

				//当left值大于700时停止动画（清除定时器）
				if(left > 700){
					clearInterval(timer);
				}
			},30);
		}
	</script>
</head>
<body>
	<div class="box" id="box"></div>
</body>
</html>

YRyr.*

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
定时器

定时器弹框&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;定时器弹框&lt;/title&gt; &lt;style type="text/css"&gt; .pop{
复制链接

扫一扫

专栏目录