文章地址 https://www.cnblogs.com/sandraryan/

需求：生成n个小球，让他们在一个大盒子中碰壁反弹，要求小球随机颜色，大小，初始位置，运动速度。

思路分析： 创建小球随机颜色等，添加到页面中。然后让小球发生移动。

ps：计时器超级耗性能的qwq

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .wrap {

            width: 900px;

            height: 500px;

            box-shadow: 0 0 20px black;

            margin: 50px auto;

            position: relative;

            border-radius: 8px;

        }

        .wrap div {

            border-radius: 50%;

            position: absolute;

        }

    </style>

</head>

<body>

    <!-- 放置小球的容器 -->

    <div class="wrap"></div>

    <script>

        var wrap = document.getElementsByClassName("wrap")[0];

        //封装随机数函数

        function rn(a, b) {

            return Math.round(Math.random() * (a - b) + b);

        }

        // 封装函数创建小球

        function createBall() {

            //创建元素

            var el = document.createElement("div");

            // 随机元素的颜色 大小 速度 位置

            // 随机一个宽高（元素宽高相同）

            el.w = rn(10, 30);

            el.style.width = el.w + "px";

            el.style.height = el.w + "px";

            // 随机透明度，并取小数点后一位

            //不能用之前封装的rn()，因为他四舍五入了，只能取到整数

            var op = Math.random().toFixed(1);

            el.style.backgroundColor = "rgba(" + rn(0, 255) + "," + rn(0, 255) + "," + rn(0, 255) + "," + op + ")";

            // 计算left top 可以到达的最大值

            var ml = wrap.offsetWidth - el.w;

            var mt = wrap.offsetHeight - el.w;

            // 随机生成在wrap中

            // 位置为0 到可使用的最大值

            el.style.left = rn(0, ml) + "px";

            el.style.top = rn(0, mt) + "px";

            // 如果生成的速度为0，让他直接变成1；

            // 或运算符短路操作，前一个值为0，会看后面的值能否决定结果

            // 或运算符只要有一个为真，全都为真

            el.vx = rn(-2, 3) || 1;

            el.vy = rn(-2, 3) || 1;

            //生成元素添加至父元素wrap

            wrap.appendChild(el);

        }

        // 封装函数 循环产生多个小球

        function cerateAll() {

            // 创建100个小球

            for (var i = 0; i < 100; i++) {

                createBall();

            }

        }

        cerateAll();

        // 让所有小球发生移动

        function ballMove() {

            // 获取所有小球

            var balls = document.querySelectorAll(".wrap div");

            // 添加计时器

            setInterval(function () {

                // 实现每个小球的碰壁反弹

                // 循环遍历所有小球，改变他们的left top值

                for (var i = 0; i < balls.length; i++) {

                    // 获取小球当前left top

                    // 当前dom节点的操作指针复制给b，不是传递一个值

                    var b = balls[i];

                    var l = b.offsetLeft;

                    var t = b.offsetTop;

                    // 设置碰壁条件

                    // 到达父级元素边框，改变运动方向

                    if (l <= 0 || l > wrap.offsetWidth - b.w) {

                        b.vx *= -1;

                    }

                    if (t <= 0 || t >= wrap.offsetHeight - b.w) {

                        b.vy *= -1;

                    }

                    // 在此基础上加上增量 当前的值累加速度 设置为新的left top

                    b.style.left = l + b.vx + "px";

                    b.style.top = t + b.vy + "px";

                }

            }, 50);

        }

        ballMove();

    </script>

</body>

</html>

原生js实现多个随机大小颜色位置速度小球的碰壁反弹的更多相关文章

  1. 原生js实现的一个随机颜色的简单效果

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta na ...

  2. 原生js实现简单的随机点名系统

    <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8 ...

  3. 原生JS实现随着鼠标滚动到元素位置触发对应css3动画，简单易用滚动监测

    预览链接:http://www.vanwee.cn/%E6%BB%9A%E5%8A%A8%E7%9B%91%E5%90%AC/ <style> body{overflow-x: hidde ...

  4. 原生js 平滑滚动到页面的某个位置

    window.scrollTo() 语法1:  window.scrollTo(x-coord,y-coord) x-coord 是文档中的横轴坐标. y-coord 是文档中的纵轴坐标. 例子: w ...

  5. JS实现鼠标移入DIV随机变换颜色

    今天分享一个在 JavaScript中,实现一个鼠标移入可以随机变换颜色,本质就是js的随机数运用. 代码如下: <!DOCTYPE html> <html> <head ...

  6. js随机背景颜色

    // 要求: 随机生成颜色RGB 核心点 :(0,0,0) rgb 每一组的数字取值范围是 0~255 // 需要随机生成 0~255 之间的整数 function getRandom(min, ma ...

  7. 随机生成气泡碰撞（原生js）

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>随 ...

  8. js点击按钮为元素随机字体颜色和背景色

    文章地址 https://www.cnblogs.com/sandraryan/ 写两个button和一个div,点击按钮分别改变背景色和前景色(字体颜色).产生的是一个随机颜色. <!DOCT ...

  9. HTML 5 +CSS3 + 原生js 做（雪花全屏飘落 + 3d旋转图）

    原文:HTML 5 +CSS3 + 原生js 做(雪花全屏飘落 + 3d旋转图) 3d旋转图:主要用css3中transform属性中的rotate,translate;以及用来做舞台效果的 pers ...

随机推荐

  1. Eclipse Git插件切换分支的时候不要Reset

    今天做了一件蠢事,我在当前分支上改了很多代码,后来切换分支的时候,有一个文件有冲突,eclipse提示这个文件冲突,我可以选择commit/stash/reset,我一看这个文件没什么关系,不需要提交 ...

  2. oracle-Dbca数据库模板

    数据库模板是用xml文件格式保存在本地磁盘上的数据库配置的定义. Dbca能够使用两种类型的模板:种子模板和非种子模板. 种子模板指含有定义信息和实际的数据文件与重做日志文件的模板定义. 种子模板的优 ...

  3. bnd.bnd属性文件格式

    1.Header以大写字母开头 Bundle-Name: StoreAdminProductsTool 2.Instruction以-和小写字母开头 -sources: true 3. Macro形式 ...

  4. JavaScript--放大镜

    上例图: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF- ...

  5. Minitab软件是现代质量管理统计的领先者，全球六西格玛实施的共同语言，以无可比拟的强大功能和简易的可视化操作深受广大质量学者和统计专家的青睐。

    Minitab软件是现代质量管理统计的领先者,全球六西格玛实施的共同语言,以无可比拟的强大功能和简易的可视化操作深受广大质量学者和统计专家的青睐. MINITAB 功能菜单包括:基础和高级统计工具: ...

  6. python学习之旅1-2（基础知识）

    三,python基础初识. 1.运行python代码. 在d盘下创建一个t1.py文件内容是: print('hello world') 打开windows命令行输入cmd,确定后 写入代码pytho ...

  7. Auto reloading enabled

    在eclipse中集成tomcat来开发时, 如果使用run as模式启动项目的话,tomcat配置Auto reloading enabled,我们修改java文件,项目会重新加载,修改的内容会生效 ...

  8. Pyhton 单行、多行注释方法

    一.python单行注释的符号 井号#常被用作单行注释符号,在代码中使用#时,它右边的任何数据都会被忽略,当做是注释.类似c++的// 二.批量.多行注释的符号 多行注释是用三引号: ”’ 注释内容 ...

  9. 【JZOJ4835】【GDOI2017模拟10.31】量化交易

    题目描述 数据范围 解法 贪心: 从左往右枚举,设枚举到元素为x,并维护一个堆: 设此时堆顶元素为y, 如果x大于y,那么x可以与y产生差价,立即将差价贡献给答案. 如果y之前已经和其他元素z产生过差 ...

  10. pycharm 的简单操作

    pycharm常用 快捷键 ctrl + q 快速查看文档 ctrl + 鼠标左键 进入代码定义 CTRL + F1 显示错误描述或警告信息 F3 下一个 Shift + F3 前一个 Ctrl + ...