基础延迟定时器原理--js

最新推荐文章于 2022-08-24 17:52:03 发布

weixin_37460170

最新推荐文章于 2022-08-24 17:52:03 发布

阅读量316

点赞数

分类专栏： ‘美人在骨不在皮’---实现原理

本文链接：https://blog.csdn.net/weixin_37460170/article/details/77933900

版权

‘美人在骨不在皮’---实现原理专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>基础延迟定时器</title>
<style>
#qq{ width:200px; height:500px; background:#ccc;}
#pop{ width:100px; height:100px; background:#fc3; position:absolute; left:220px; top:10px; display:none;}
</style>
<script>
window.onload =function(){
	
	var oQ = document.getElementById('qq');
	var oP = document.getElementById('pop');
	
	oQ.onmouseover = show;
	oQ.onmouseout = hide;
	
	oP.onmouseover = show;
	oP.onmouseout = hide;
	
	function show(){
		
		clearInterval( timer );
		oP.style.display = 'block';
	}
	function hide(){
		
	timer = setTimeout( function(){
		    oP.style.display = 'none';
			}, 200);
	}
	
	};
</script>
</head>

<body>
<div id="qq"></div>
<div id="pop"></div>
</body>
</html>