1.案例呈现
用户在页面单击鼠标左键，页面浮现“富强”、“民主”、“文明”、“和谐”、“自由”、“平等”、“公正”、“法治”、“爱国”、“敬业”、“诚信”、“友善”等社会主义核心价值观内容，并向上移动100px，然后消失。案例在Chrome浏览器运行效果，如图8-9所示。
图8-9 案例效果
2.案例分析
用户在页面任意位置单击鼠标左键时，将触发document的点击事件。在事件处理程序中，首先创建一个节点，将节点内容设置为社会主义核心价值观内容中的一个，节点颜色设置为随机值，节点坐标设置为鼠标坐标，然后将新建节点添加至页面中。最后开启定时器，每隔100毫秒改变新创建节点的top属性，当上移距离大于100px时，停止定时器并删除新增节点。
3.案例实现
1 <script>
2 var a = ["❤富强❤", "❤民主❤", "❤文明❤", "❤和谐❤", "❤自由❤", "❤平等❤", "❤公正❤", "❤法治❤", "❤爱国❤", "❤敬业❤", "❤诚信❤", "❤友善❤"];
3 var index = 0;
4 document.onclick = function(e) {
5 var s = document.createElement('span');
6 s.innerHTML = a[index++ % a.length];
7 s.style.top = e.clientY + 'px';
8 s.style.left = e.clientX + 'px';
9 console.log(e.clientX, e.clientY);
10 s.style.color = 'rgb(' + 255 * Math.random() + ',' + 255 * Math.random() + ',' + 255 * Math.random() + ')';
11 document.body.appendChild(s);
12 var t = s.offsetTop;
13 var tim = setInterval(function() {
14 s.style.top = s.offsetTop - 10 + 'px';
15 if (Math.abs(t - s.offsetTop) > 100) {
16 clearInterval(tim);
17 document.body.removeChild(s);
18 }
19 }, 100)
20 }
21</script>
上述代码中，第13行代码开启定时器，每隔100ms，使新建节点向上移动10px。当上移距离大于100px时，停止定时器并删除新增节点。