实现简易版方块掉落
作者：互联网
原生JS 实现方块掉落
效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box{
width:500px;
height: 700px;
margin: 0 auto;
border: 1px solid #000;
position: relative;
}
#box>.boxchider{
box-sizing: border-box;
width: 100px;
float: left;
position: relative;
height:100%;
}
.claerfix::after{
content:"";
display:block;
visibility:hidden;
clear:both;
}
</style>
</head>
<body>
<div>
<h1 id="title"></h1>
<div id="box" class="claerfix">
<div class="boxchider" >
</div >
<div class="boxchider">
</div>
<div class="boxchider" >
</div>
<div class="boxchider" >
</div>
<div class="boxchider" >
</div>
</div>
</div>
<script>
var box=document.getElementById("box");
// 获取五条轨道
var listbox=document.getElementsByClassName("boxchider");
// 工厂方法
function Move(){
// 创建Div
var createdDiv=document.createElement("div");
// 生成随机数
var num = Math.floor(Math.random() * 5);
// 初始化动态创建的div
createdDiv.style.position='absolute';
createdDiv.style.width=100+"px";
createdDiv.style.height=70+"px";
createdDiv.style.background="#ccc";
// 根据随机数选择在哪一个轨道上创建
var chider=listbox[num];
if(chider.clientHeight<=70) {
} else{
document.getElementById("title").innerHTML=num;
chider.appendChild(createdDiv);
// 向指定轨道添加滑块
for (let i = 0; i <chider.clientHeight-70; i++) {
// 定时器实现动画效果
setTimeout(()=>{
// 因为向相对于指定滑块的高度进行 绝对定位 那么就是 父级的高度-当前滑块的高度则等于向下坠落的位置
createdDiv.style.top=i+"px";
},i*7);
}
// 每次坠落都给当前轨道的高度减去已经添加过的高度 如果到70 直接给70即可
chider.style.height=chider.clientHeight<=70?70+"px":chider.clientHeight-70+"px"
}
}
setInterval(() => {
// 定时循环调用程序
Move();
},1000);
</script>
</body>
</html>
标签：box,style,掉落,height,简易版,createdDiv,chider,var,方块 来源： https://blog.csdn.net/weixin_46106630/article/details/120780516