原生JS移动div
程序员文章站
2022-06-09 20:06:26
...
新手入门小案例1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
button{
width: 100px;
height: 50px;
z-index: 999;
position: relative;
}
div{
width: 200px;
height: 100px;
position: absolute;
top: 0;
left: 0;
background-color: skyblue;
}
</style>
</head>
<body>
<button id="btn0">向左</button>
<button id="btn1">向右</button>
<button id="btn2">向上</button>
<button id="btn3">向下</button>
<div id="div"></div>
<script>
var div=document.getElementById("div");
var lefts=0;
var tops=0;
var step=10;
for(var i=0;i<4;i++){
var btn=document.getElementById("btn"+i);
btn.addEventListener("click",clickHandler);
}
function clickHandler(e) {
switch (this){
case btn0:
lefts-=step;
div.style.left=lefts+"px";
break;
case btn1:
lefts+=step;
div.style.left=lefts+"px";
break;
case btn2:
tops-=step;
div.style.top=tops+"px";
break;
case btn3:
tops+=step;
div.style.top=tops+"px";
break;
}
}
</script>
</body>
</html>
这个是操作dom的一个案例，值得新手看看。
上一篇： js中的闭包
下一篇： Java se异常笔记