js实现小球随机生成掉落弹起

最新推荐文章于 2024-05-23 20:09:14 发布

tianlei11

最新推荐文章于 2024-05-23 20:09:14 发布

阅读量2.1k

点赞数 3

文章标签： html javascript css

本文链接：https://blog.csdn.net/tianlei11/article/details/105311795

版权

小球随机生成掉落弹起

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>

比较简单，下面是展示效果
在这里插入图片描述

tianlei11

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
js实现小球随机生成掉落弹起

小球随机生成掉落弹起DOM随机生成一个随机x轴的随机色的小球来回弹<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1...
复制链接

扫一扫