二话不说直接贴代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点气球</title>
</head>
<body>
<!--
实现功能：
js生成div 在页面上向上移动 已不同的速度 点击气球 气球爆炸消失 1.js生成div标签 并初始化
1 一次生成10个
2 生成一个标签
1 createElement
2 设置属性 className
3 添加到父节点里
3 同时生成多个标签
1 节点片段
4 初始化气球生成位置
1 纵向
top = 浏览器高度-气球高度
2 横向
0-浏览器宽度随机//能取到零 2.让气球动起来
1 获取所有的气球节点
2 循环所有的top属性递减
3 定时器 3.点击气球，气球爆炸并消失
1 鼠标点击事件，事件委托
2 气球被点击之后缩小直到消失
爸爸.removeChild
消失动画：
1 速度加 宽高减
-->
</body>
</html>
这里css和js的路径没有写，请自行引入。html里面其实没什么东西，就是些注释。
css：
* {
margin:;
padding:;
}
body {
background: #ccc;
overflow: hidden;
}
.balloon {
position: absolute;
width: 160px;
height: 160px;
background-color: #faf9f9;
/*圆角属性*/
border-radius: 50% 50% 25% 50%;
/*顺时针旋转45度*/
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
/*盒子阴影 x位移 y位移 羽化 半径 颜色*/
box-shadow: -8px -8px 80px -8px #873940 inset;
}
.balloon::after {
position: absolute;
content: ''; /*内容必须要有*/
bottom: 3px;
right: 3px;
border: 8px solid transparent;
border-right-color: #873940;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
border-radius: 50%;
}js：
var num = 10;
//获取浏览器宽高
var wH = window.innerHeight,
hW = window.innerWidth,
bz = 160;
var balloons = []; init();//初始化十个气球
move();//动画
addListener(document.body, 'click', clickBalloon);//事件委托，为body添加事件监听。 //初始化函数
function init() {
//创建dom片段
var fragment = document.createDocumentFragment();
for (var i = 0; i < num; i++) {
var aBalloon = document.createElement('div');
aBalloon.className = 'balloon';
var randomX = ~~(Math.random() * (hW - bz));
randomX = Math.max(0, randomX);
aBalloon.style.top = wH - bz + 'px';//设置垂直位置
aBalloon.style.left = randomX + 'px';//设置横向位置
aBalloon.speed = ~~(8 * Math.random())+1;//设置上移速度
balloons.push(aBalloon);
fragment.appendChild(aBalloon);
}
document.body.appendChild(fragment);
} //气球移动函数
//不用setInterval：因为setInterval容易发生丢帧
function move() {
//如果没有气球了，停止此setTimeout
var len = balloons.length;
if (balloons.length === 0) {
return 0;
} else {
//遍历所有的气球
for (var i = 0; i < len; i++) {
//如果气球飞出浏览器
if (~~(balloons[i].style.top.slice(0, -2)) < -160) {
var me = balloons[i];
me.parentNode.removeChild(me);
//删除此节点后要初始化balloons对象
balloons = document.querySelectorAll('.balloon');
i--;
len--;
} else {
balloons[i].style.top = balloons[i].offsetTop - balloons[i].speed + 'px';
}
}
setTimeout(move, 1000 / 60);
}
} //点击气球函数
function clickBalloon(event) {
if (event.target.className === 'balloon') {
//判断触发事件的元素的类名是否是balloon
boom.call(event.target, function () {
//为什么不把此句放到boom的if语句中：因为，这里是最后气球的动画，如果我们不想要消失了，想换成动画，就在这里修改
console.log(this.parentNode);
this.parentNode.removeChild(this);
}.bind(event.target));//让evnet.target去替换boom中的this去执行***
}
} //气球爆炸函数
function boom(cb) {
//注意不使用bind的话setInterval的this是指向window，因为setInterval总是由浏览器去调用
//bind：硬绑定，延迟触发函数，内部指向强制绑定指定对象。
//call是主动触发
this.timer = setInterval(function () {
if (this.offsetWidth < 10) {
clearInterval(this.timer);
//this.parentNode.removeChild(this);
cb && cb();//cb如果存在，cb执行
} else {
this.speed++;
this.style.width = this.offsetWidth - 10 + 'px';//宽度减少
this.style.height = this.offsetHeight - 10 + 'px';//高度减少
}
}.bind(this), 1000 / 30);
} /*
* addEventListener:监听Dom元素的事件
*
* target：监听对象
* type：监听函数类型，如click,mouseover
* func：监听函数
*/ function addListener(target, type, func) {
target.addEventListener ? target.addEventListener(type, func, false) : target.attachEvent("on" + type, func);
}
function removeListener(target, type, func) {
target.removeEventListener ? target.removeEventListener(type, func, false) : target.detachEvent("on" + type, func);
}
大家可以粘贴看一下效果，想再接着做也可以再优化优化什么的。要说的没什么，都在注释里，要注意的就一点：
一开始我并没有加判断移出浏览器的处理，后来发现，如果不点击气球，任它飞，这个元素其实是一只存在的，只不过是top属性在一只减少而已。
于是我就想在for循环里添加判断，气球是否已经飞出浏览器。是的话删除此节点。
但是浏览器一直报错。说此removeChild()这个方法找不到。
我就很奇怪，点击时候用的也是这个方法啊，也没报错啊。怎么就找不到呢。
后来发现，balloons[]对象在for循环外就赋值了，在for 循环里删去了这个数组中的一个对象，但是balloons并不是动态改变的。于是：
i++时找到的balloons[i]，已经不是你想要的了。在这里要进行balloons对象的初始化，并让i和len分别减一。