小球随机生成掉落弹起
DOM随机生成一个随机x轴的随机色的小球来回弹
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var speed = 1;
var y = -50;
function init() {
createElem();
animation();
}
function createElem() {//创建小球
var div = document.createElement("div");
Object.assign(div.style, {
width: "50px",
height: "50px",
backgroundColor: randomColor(),
borderRadius: "50%",
position: "absolute",
top: "-50px"
});
setX(div);
document.body.appendChild(div);
return div;
}
function randomColor() {//随机色
var col = "#";
for (var i = 0; i < 6; i++) {
col += Math.floor(Math.random() * 16).toString(16);
}
return col;
}
function animation() {//动画函数
requestAnimationFrame(animation);
update();
}
function random(min, max) {//随机数
return Math.floor(Math.random() * (max - min)) + min;
}
function update() {//控制小球弹落
if (y > 400){
speed = -speed
};
speed += 0.2;
y=y+ speed;
var div=document.querySelector("div")
div.style.top = y + "px";
}
function setX(div){//随机设置一个x坐标为小球的显示
var x=random(0, 1440);
div.style.left=x+"px";
}
init();
</script>
</body>
</html>
比较简单，下面是展示效果
