直接上效果图


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

<!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>

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

js实现网页回弹小球效果的更多相关文章

  1. 利用tween，使用原生js实现模块回弹动画效果

    最近有一个需求,就是当屏幕往下一定像素时,下方会有一个隐藏的模块马上显现出来,向上运动后带有回弹效果.然后屏幕滚回去时这个模块能够原路返回 其实这个效果css3就可以很轻松实现,但是公司要求最低兼容i ...

  2. ［原创］纯JS实现网页中多选复选框checkbox和单选radio的美化效果

    图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...

  3. js写的数码时钟，在“最小化”浏览器 或者 “切换网页”是动画效果好像不对

    一.问题 在“最小化”浏览器 或者 “切换网页”是动画效果不对,不知道哪里出了问题???是不是”最小化“时网页定时器关掉了,还是其他什么原因啊 ???? 二.HTML代码如下 <div id=& ...

  4. JS让网页上文字出现键盘打字的打字效果

    一个挺简单的网页特效:JS让网页上文字出现键盘打字的打字效果实现 演示地址:http://codepen.io/guihailiuli/pen/jPOYMZ 以代码形式实现过程分析: <html ...

  5. 纯js实现网页tab选项卡切换效果

    纯js实现网页tab选项卡切换效果 百度搜索     js 点击菜单项就可以切换内容的效果

  6. Rainyday.js – 使用 JavaScript 实现雨滴效果

    Rainyday.js 背后的想法是创建一个 JavaScript 库,利用 HTML5 Canvas 渲染一个雨滴落在玻璃表面的动画.Rainyday.js 有功能可扩展的 API,例如碰撞检测和易 ...

  7. js实现网页防止被iframe框架嵌套及几种location.href的区别

    首先我们了解一下几种location.href的区别简单的说:几种location.href的区别js实现网页被iframe框架功能,感兴趣的朋友可以了解下 首先我们了解一下:window.locat ...

  8. 实用js+css多级树形展开效果导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. js+css实现带缓冲效果右键弹出菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. MongoDB与微服务

    1. 微服务的优势 * 开发速度快 * 变化响应快 * 易维护 * 扩容简单2. 微服务架构设计要素 * 服务解耦(Decouple) * HTTP API - 简单接口(Dumb Pipes) * ...

  2. CentOS 7 如何清空文件内容

    https://www.cnblogs.com/zqifa/p/linux-vim-4.html 方法1.在非编辑状态下使用快捷键gg跳至首行头部,再使用dG即可清空,或 输入"%d&quo ...

  3. Word2010制作简单个人简历

    原文链接:https://www.toutiao.com/i6489366535050625550/ 以学习使用按钮属性为主,具体样式可以根据个人设置 选择"页面布局"选项卡,&q ...

  4. 硬核 - Java 随机数相关 API 的演进与思考（上）

    本系列将 Java 17 之前的随机数 API 以及 Java 17 之后的统一 API 都做了比较详细的说明,并且将随机数的特性以及实现思路也做了一些简单的分析,帮助大家明白为何会有这么多的随机数算 ...

  5. 【Java】comparable、comparator

    comparable.comparator接口 说明 Java中的对象,正常情况下,只能进行比较:== 或 != .不能使用 > 或 < 的,但是在开发场景中,我们需要对多个对象进行排序, ...

  6. 学习OAuth 2.0

    认识OAuth 2.0 OAuth 2.0 是行业标准的授权协议. OAuth 2.0 专注于客户端开发人员的简单性,同时为 Web 应用程序.桌面应用程序.移动设备提供特定的授权流程. 应用场景 有 ...

  7. dubbo-gateway 高性能dubbo网关

    dubbo-gateway dubbo-gateway 提供了http协议到dubbo协议的转换,但[并非]使用dubbo的[泛化]调用(泛化调用性能比普通调用有10-20%的损耗,通过普通异步的调用 ...

  8. 『无为则无心』Python基础 — 42、Python中文件的读写操作（二）

    目录 (5)文件对象方法(重点) 1)写方法 2)读方法 3)seek()方法 4)tell()方法 (6)关闭 (7)综合练习:读取大文件 (5)文件对象方法(重点) 1)写方法 @1.语法 对象对 ...

  9. python 小兵(6)函数根据问题详解

    _list = []for i in range(3): def func(a): return i+a_list.append(func)for f in _list: print(f(1)) 首先 ...

  10. Web：移动端阻止默认行为的小坑

    问题 移动端 web 开发中,使用 addEventListener 阻止了 touchstart 事件的默认行为却发现没有生效 描述 再移动端 web 开发中,我们一般会用 addEventList ...