<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<!-- 知识点:dom创建、dom添加、数组、取模% -->
<title>方块改变</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: linear-gradient(#a1e6e9 0%, #fff 100%)no-repeat;
min-height: 400px;
}
.wrap_box {
width: 500px;
margin: 30px auto;
background: #fff;
border-radius: 5px;
padding: 30px;
box-shadow: 0px 0px 10px #5ab1fd;
}
button {
cursor: pointer;
}
button {
background: #fff;
line-height: 32px;
border: 2px solid #5ab1fd;
width: 80px;
font-size: 14px;
color: #5ab1fd;
outline: none 0;
}
button:hover {
border: 2px solid #de4965;
color: #de4965;
}
.contents {
border: 2px solid #5ab1fd;
margin-top: 10px;
padding: 10px;
position: relative;
width: 250px;
height: 250px;
}
.contents>div {
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
background: #5ab1fd;
color: #fff;
position: absolute;
border-radius: 2px;
}
</style>
</head>
<body>
<div class=" wrap">
<div class="btn">
<button class="mybtn">显示</button>
</div>
<div class=" contents ">
<div style="left:10px ;top:10px">1</div>
<div style="left:60px ;top:60px">1</div>
<div style="left:110px ;top:110px">1</div>
<div style="left:160px ;top:160px">1</div>
<div style="left:210px ;top:210px">1</div>
</div>
</div>
<!-- 知识点:dom创建、dom添加、数组、取模% -->
<script>
// 获取dom
var btn = document.getElementByClassName("mybtn");
var box = document.getElementByClassName("contents")[0];
var adiv = box.getElementByTagName('div');
var nowIndex = -1;
//位置数据
var moveArr[
[[0, 0], [50, 50], [100, 100], [50, 150], [0, 200]],
[[0, 0], [50, 50], [100, 100], [150, 50], [200, 0]],
[[200, 0], [150, 50], [100, 100], [150, 150], [200, 200]],
[[0, 200], [50, 150], [100, 100], [150, 150], [200, 200]]
];
//写点击事件
btn.οnclick=function(){
if(nowIndex == -1){
for(var i=0;i<5;i++){
adiv[i] .style.display = 'block';
}
btn.innerHtml = " 改变 "；
nowIndex++;
} else{
for(var i=0;i<adiv.length;i++){
var arrIndex = nowIndex%4; //取模
adiv[i].style.left = (moveArr[arrIndex][i][0]+10)+'px';
adiv[i].style.top = (moveArr[arrIndex][i][1]+10)+'px';
}
}
}
</script>
</body>
</html>
扫一扫
1217
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
