<!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>
Js动态绑定事件与定时器--实现div块的放大缩小
最新推荐文章于 2022-12-20 17:30:40 发布
关键词由CSDN通过智能技术生成