js实现网页回弹小球效果

最新推荐文章于 2024-04-24 09:27:42 发布

soberw-

最新推荐文章于 2024-04-24 09:27:42 发布

阅读量853

点赞数 2

分类专栏： HTML JavaScript 文章标签： html javascript 前端 css3 html5

本文链接：https://blog.csdn.net/qq_44760609/article/details/121381893

版权

JavaScript 同时被 2 个专栏收录

4 篇文章 1 订阅

订阅专栏

HTML

3 篇文章 0 订阅

订阅专栏

直接上效果图

在这里插入图片描述
运行页面会首先弹出一个输入框，询问用户想要产生的小球数量，随后后台就会产生指定数量的小球，在页面中来回跳动，触碰到页面边框时，就会回弹，且产生的小球颜色随机，小球在页面中的位置随机，小球运行的速度随机。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>会反弹的小球</title>
    <style>
        * {
            /*margin: 0;*/
            padding: 0;
            overflow: hidden;
        }

        span {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            position: absolute;
        }
    </style>
</head>
<body>
</body>
</html>
<script>
    /**
     *效果为，页面生成用户指定数量的不同颜色的小球，然后各自移动，触碰到边界就回弹
     */
    let count = parseInt(prompt("你想随机产生几个小球？"));
    // console.log(count)

    for (let i = 1; i <= count; i++) {
        // i = document.createElement("span");
        // document.body.appendChild(i);
        // console.log(i)
        document.body.innerHTML += `<span></span>`
    }

    let spans = document.getElementsByTagName('span');


    for (let i = 0; i < spans.length; i++) {
        spans[i].style.backgroundColor = color();
        site(spans[i]);
        sporting(spans[i]);
    }

    /**
     *返回一个随机颜色
     */
    function color() {
        let rr = Math.round(Math.random() * 255);
        let gg = Math.round(Math.random() * 255);
        let bb = Math.round(Math.random() * 255);
        return `rgb(${rr},${gg},${bb})`;
    }

    /**
     *返回页面内的一个随机位置
     */
    function site(now) {
        let w = window.innerWidth - now.offsetWidth;
        let h = window.innerHeight - now.offsetHeight;
        now.style.left = `${Math.round(Math.random() * w)}px`
        now.style.top = `${Math.round(Math.random() * h)}px`
    }

    /**
     * 实现回弹效果
     * @param now 传入需要回弹的对象
     */
    function sporting(now) {
        let x = now.offsetLeft, y = now.offsetTop;
        let w = 0, h = 0;
        let flagX = true;
        let flagY = true;
        setInterval(function () {
            w = window.innerWidth - now.offsetWidth;
            h = window.innerHeight - now.offsetHeight;
            if (x > w) flagX = false;
            if (y > h) flagY = false;
            if (x < 1) flagX = true;
            if (y < 1) flagY = true;
            x = flagX ? ++x : --x;
            y = flagY ? ++y : --y;
            now.style.left = `${x}px`
            now.style.top = `${y}px`
        }, (Math.round(Math.random() * 10 + 1)))
    }
</script>

如果对你有帮助的话，三连支持一下吧！

soberw-

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
js实现网页回弹小球效果

运行页面会首先弹出一个输入框，询问用户想要产生的小球数量，随后后台就会产生指定数量的小球，在页面中来回跳动，触碰到页面边框时，就会回弹，且产生的小球颜色随机，小球在页面中的位置随机，小球运行的速度随机。
复制链接

扫一扫