1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>五彩小球</title>
6 <style>
7 *{margin: 0;padding: 0;list-
style: none;}
8 html, body, #box{width: 100%;height: 100%
;}
9 #box{background-color: #000
;}
10 </style>
11 </head>
12 <body>
13 <div id="box"></div>
14
15 <script src="js/Underscore-min.js"></script>
16 <script src="js/Ball.js"></script>
17 <script>
18
19 // 装小球
20 var ballArr =
[];
21 // 颜色数组
22 var colorArr = ['red', 'green', 'blue', 'yellow', 'orange', 'purple', 'pink'
];
23
24 // 1. 获取盒子
25 var box = document.getElementById('box'
);
26 // 2. 监听鼠标的移动
27 box.addEventListener('mousemove',
function (ev) {
28 var ball =
new Ball({
29 'parentId': 'box'
,
30 'left'
: ev.clientX,
31 'top'
: ev.clientY,
32 'bgColor': colorArr[_.random(0, colorArr.length-1
)]
33 });
34 // ball.render();
35 ballArr.push(ball);
36 });
37 // 3. 定时器
38 setInterval(
function () {
39 // 清除之前的状态
40 for (
var i = 0; i < box.children.length; i++
) {
41 box.children[i].remove();
42 }
43
44 // 小球的绘制和移动
45 for(
var j=0; j<ballArr.length; j++
){
46 ballArr[j].render();
47 ballArr[j].update(ballArr);
48 }
49 }, 50
);
50 </script>
51 </body>
52 </html>
function Ball(option) {
option = option ||
{};
// 1. 属性
this.parentId =
option.parentId;
this.r = 60
;
this.left = option.left || 0
;
this.top = option.top || 0
;
this.bgColor = option.bgColor || 'red'
;
// 2. 变化量
this.dX = _.random(-10, 10
);
this.dY = _.random(-10, 10
);
this.dR = _.random(1, 3
);
}
Ball.prototype =
{
constructor: Ball,
render: function () {
var parentNode = document.getElementById(
this.parentId);
var childNode = document.createElement('div'
);
childNode.style.width =
this.r + 'px'
;
childNode.style.height =
this.r + 'px'
;
childNode.style.backgroundColor =
this.bgColor;
childNode.style.borderRadius = '50%'
;
childNode.style.position = 'absolute'
;
childNode.style.left =
this.left + 'px'
;
childNode.style.top =
this.top + 'px'
;
parentNode.appendChild(childNode);
},
update: function (ballArr) {
this.left +=
this.dX;
this.top +=
this.dY;
this.r -=
this.dR;
if(
this.r <= 0
){
ballArr = _.without(ballArr,
this)
}
}
};
转载于:https://www.cnblogs.com/zhangzhengyang/p/11241514.html
相关资源：数据结构—成绩单生成器
