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

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

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

Document

.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;

}

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();

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

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

随 ...

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

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

HTML 5 &plus;CSS3 &plus; 原生js 做(雪花全屏飘落 &plus; 3d旋转图)

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

用原生JS写一个网页版的2048小游戏(兼容移动端)

这个游戏JS部分全都是用原生JS代码写的,加有少量的CSS3动画,并简单的兼容了一下移动端. 先看一下在线的demo:https://yuan-yiming.github.io/2048-online ...

随机推荐

MyBatis代码自动生成&lpar;利用命令&rpar;

这几天在学习springmvc,需要用到mybatis,所以研究了一下mybatis自动代码生成,当然也可以手动敲,但是那样效率非常的慢,并且出错率也是很高的,利用MyBatis生成器自动生成实体类. ...

Apache &sol; PHP 5&period;x Remote Code Execution Exploit

测试方法: 本站提供程序(方法)可能带有攻击性,仅供安全研究与教学之用,风险自负! /* Apache Magica by Kingcope */ /* gcc apache-magika.c -o ...

JAVA-2-DATA

import java.util.*; public class Ch0310 { public static void main(String[] args) { // TODO 自动生成的方法存根 ...

Java—异常处理总结

异常处理是程序设计中一个非常重要的方面,也是程序设计的一大难点,从C开始,你也许已经知道如何用if...else...来控制异常了,也许是自发的,然而这种控制异常痛苦,同一个异常或者错误如果多个地方出 ...

hdu 4730 We Love MOE Girls

http://acm.hdu.edu.cn/showproblem.php?pid=4730 直接用string类处理字符串. AC代码: #include #incl ...

团队作业4——第一次项目冲刺(Alpha版本)2nd day

一.Daily Scrum Meeting照片 二.燃尽图 三.项目进展 界面 1.四个用户登录界面已经完成. 2.界面内的功能完成了一小部分. 登陆部分 1.QQ授权已经申请,还未通过. 2.通过好 ...

Appium环境搭建——安装以及运行appium server失败点总结

一.运行Appium失败:未安装.Net Framework 4.5 之前安装AppScan安全测试工具时,就要求.Net 4.5以上环境,我其中一台电脑的系统是Win7-32bit的,安装.Net ...

SLAM的前世今生

SLAM技术已经蓬勃发展起来,这里综述性地介绍下SLAM的主体知识.SLAM的主体技术不多,难点在于细节.来源是:技术分享.ppt 前世 人类惆怅近千年的问题不是:我是谁,我要做什么,我要去哪里!而是 ...

Codeforces 739C Alyona and towers 线段树

Alyona and towers 这个题写起来真的要人命... 我们发现一个区间被加上一个d的时候, 内部的结构是不变的, 改变的只是左端点右端点的值, 这样就能区间合并了. 如果用差分的话会简单一 ...

利用Tensorflow实现神经网络模型

首先看一下神经网络模型,一个比较简单的两层神经. 代码如下: # 定义参数 n_hidden_1 = 256 #第一层神经元 n_hidden_2 = 128 #第二层神经元 n_input = 78 ...