有趣的JS

<script type="text/javascript">
onload = function() {
	var click_cnt = 0;
	var $html = document.getElementsByTagName("html")[0];
	var $body = document.getElementsByTagName("body")[0];

	var canvas = document.createElement("canvas");
	var ctx = canvas.getContext("2d");

	resize();
	window.onresize = resize;

	function resize() {
		canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
		canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
	}

	var RAF = (function() {
		return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
		function(callback) {
			window.setTimeout(callback, 1000 / 60);
		};
	})();

	// 鼠标活动时，获取鼠标坐标
	var warea = {
		x: null,
		y: null,
		max: 20000
	};
	window.onmousemove = function(e) {
		e = e || window.event;

		warea.x = e.clientX;
		warea.y = e.clientY;
	};
	window.onmouseout = function(e) {
		warea.x = null;
		warea.y = null;
	};

	// 添加粒子
	// x，y为粒子坐标，xa, ya为粒子xy轴加速度，max为连线的最大距离
	var dots = [];
	for (var i = 0; i < 300; i++) {
		var x = Math.random() * canvas.width;
		var y = Math.random() * canvas.height;
		var xa = Math.random() * 2 - 1;
		var ya = Math.random() * 2 - 1;

		dots.push({
			x: x,
			y: y,
			xa: xa,
			ya: ya,
			max: 6000
		})
	}

	// 延迟100秒开始执行动画，如果立即执行有时位置计算会出错
	setTimeout(function() {
		animate();
	},
	100);

	// 每一帧循环的逻辑
	function animate() {
		ctx.clearRect(0, 0, canvas.width, canvas.height);

		// 将鼠标坐标添加进去，产生一个用于比对距离的点数组
		var ndots = [warea].concat(dots);

		dots.forEach(function(dot) {

			// 粒子位移
			dot.x += dot.xa;
			dot.y += dot.ya;

			// 遇到边界将加速度反向
			dot.xa *= (dot.x > canvas.width || dot.x < 0) ? -1 : 1;
			dot.ya *= (dot.y > canvas.height || dot.y < 0) ? -1 : 1;

			// 绘制点
			ctx.fillRect(dot.x - 0.5, dot.y - 0.5, 1, 1);

			// 循环比对粒子间的距离
			for (var i = 0; i < ndots.length; i++) {
				var d2 = ndots[i];

				if (dot === d2 || d2.x === null || d2.y === null) continue;

				var xc = dot.x - d2.x;
				var yc = dot.y - d2.y;

				// 两个粒子之间的距离
				var dis = xc * xc + yc * yc;

				// 距离比
				var ratio;

				// 如果两个粒子之间的距离小于粒子对象的max值，则在两个粒子间画线
				if (dis < d2.max) {

					// 如果是鼠标，则让粒子向鼠标的位置移动
					if (d2 === warea && dis > (d2.max / 2)) {
						dot.x -= xc * 0.03;
						dot.y -= yc * 0.03;
					}

					// 计算距离比
					ratio = (d2.max - dis) / d2.max;

					// 画线
					ctx.beginPath();
					ctx.lineWidth = ratio / 2;
					ctx.strokeStyle = 'rgba(137,129,150,' + (ratio + 0.2) + ')';
					ctx.moveTo(dot.x, dot.y);
					ctx.lineTo(d2.x, d2.y);
					ctx.stroke();
				}
			}

			// 将已经计算过的粒子从数组中删除
			ndots.splice(ndots.indexOf(dot), 1);
		});

		RAF(animate);

	}
	$body.appendChild(canvas);

	$html.onclick = function(e) {
		var $elem = document.createElement("h1");
		// $elem.style.color = "#a7ef1e";
		$elem.style.color = getRandomColor(); // 获取随机颜色
		$elem.style.zIndex = 9999;
		$elem.style.position = "absolute";
		$elem.style.select = "none";
		var x = e.pageX;
		var y = e.pageY;
		$elem.style.left = (x - 10) + "px";
		$elem.style.top = (y - 20) + "px";
		clearInterval(anim);
		click_cnt++;
		if (click_cnt % 12 == 0) {
			$elem.innerText = "友善";
		} else if (click_cnt % 11 == 0) {
			$elem.innerText = "诚信";
		} else if (click_cnt % 10 == 0) {
			$elem.innerText = "敬业";
		} else if (click_cnt % 9 == 0) {
			$elem.innerText = "爱国";
		} else if (click_cnt % 8 == 0) {
			$elem.innerText = "法治";
		} else if (click_cnt % 7 == 0) {
			$elem.innerText = "公正";
		} else if (click_cnt % 6 == 0) {
			$elem.innerText = "平等";
		} else if (click_cnt % 5 == 0) {
			$elem.innerText = "自由";
		} else if (click_cnt % 4 == 0) {
			$elem.innerText = "和谐";
		} else if (click_cnt % 3 == 0) {
			$elem.innerText = "文明";
		} else if (click_cnt % 2 == 0) {
			$elem.innerText = "民主";
		} else if (click_cnt % 1 == 0) {
			$elem.innerText = "富强";
		}

		$elem.style.fontSize = Math.random() * 10 + 10 + "px";
		var increase = 0;
		var anim;
		setTimeout(function() {
			anim = setInterval(function() {
				if (++increase == 150) {
					clearInterval(anim);
					$body.removeChild($elem);
				}
				$elem.style.top = y - 20 - increase + "px";
				$elem.style.opacity = (150 - increase) / 120;
			},
			8);
		},
		70);
		$body.appendChild($elem);
	};
};

var getRandomColor = function() {
	return "rgb(" + Math.round(Math.random() * 255) + "," + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 10) + ')';
}
</script>