Js动态绑定事件与定时器--实现div块的放大缩小

最新推荐文章于 2022-12-20 17:30:40 发布

大源阿良

最新推荐文章于 2022-12-20 17:30:40 发布

阅读量528

点赞数

本文链接：https://blog.csdn.net/Shirongliang/article/details/123010331

版权

JavaScript DOM操作动态效果事件处理盒子模型

关键词由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="box" style="width: 100px;height: 100px; border: 1px solid;"></div>
		<input type="button"  value="放" onclick="openBox()"/>
		<input type="button" value="收" onclick="closeBox()" />
	</body>
	<script type="text/javascript">
		var timeInstance = undefined;
		//动态绑定事件：document.querySelectorAll[0].onclic = function()
		//{
		//	closbox();
		//}
		function closeBox(){
			var divDom = document.getElementById('box')
			//注意更改块元素的样式宽度高度后记得将值传回
			//代码中采用将宽度高度通过parseInt()方法转化为int类型进行变化
			divDom.style.width = (parseInt(divDom.style.width) - 2)+'px'
			divDom.style.height = (parseInt(divDom.style.height) - 2)+'px'
			 if(parseInt(divDom.style.width) < 10 && parseInt(divDom.style.height) < 10){
				 clearTimeout(timeInstance);
			 }
			 else {setTimeout(closeBox,50);}
		}
		function openBox(){
			var divDom = document.getElementById('box')
			 divDom.style.width = (parseInt(divDom.style.width) + 2)+'px'
			 divDom.style.height = (parseInt(divDom.style.height) + 2)+'px'
			 if(parseInt(divDom.style.width) > 200 && parseInt(divDom.style.height) > 200){
				clearTimeout(timeInstance);
			 }
			 else {setTimeout(openBox,50);}
		}
	</script>
</html>

大源阿良

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Js动态绑定事件与定时器--实现div块的放大缩小

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="box" style="width: 100px;height: 100px; border: 1px solid;"></div> <input type="button"
复制链接

扫一扫