<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>数字雨滴效果</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
overflow: hidden;
}
</style>
</head>
<body>
<div id="test"></div>
<br>
<input onclick="dianji(this)" id="operate" type="button" value="暂停" />
<br>
<canvas id="canvas" style="background: #000;" width="" height=""></canvas>
</body>
<script type="text/javascript">
/* window.onload = function(){ */
/* 获取画布对象 */
var canvas = document.getElementById("canvas");
/* 获取画布的上下文 */
var context = canvas.getContext("2d");
/* 获取浏览器屏幕的宽度和高度,这里控制显示的宽度和高度,且涵盖所有的浏览器 */
var w = window.innerWidth
||document.documentElement.clientWidth
||document.body.clientWidth;
var h = document.innerHeight
||document.documentElement.clientHeight
||document.body.clientHeight;
/* 设置canvas 的宽度和高度 */
canvas.width = w;
canvas.height = h;
/* 设置每个字的字体大小 */
var fontSize = 20;
/* 计算可以显示多少列 屏幕宽度除以字体大小得出显示的列数*/
var colunms = Math.floor(w / fontSize);/* Math。floor() 向下取整 */
/* 记录每列文字的Y轴坐标 */
var drops = [];
/* 给每一个文字初始化一个起始点的位置 */
for (var i = 0; i < colunms; i++) {
drops.push(0);
}
/* 运动的文字 */
var str = "显示运动字体";
/* fillText(str,x,y) 原理就是去更改y的坐标位置*/
/* 绘画的函数 */
function draw(){
/* 黑BG的帆布 半透明BG显示的轨迹*/
context.fillStyle = "rgba(0,0,0,0.05)"
context.fillRect(0,0,w,h);
/* 给字体设置样式 */
context.font =fontSize +"px 微软黑体";
/* 给字体添加颜色*/
context.fillStyle = "red";/* 可以设置rgb,标准色，十六进制颜色 */
/* 循环字体 写入画布中*/
for (var i = 0; i < colunms; i++) {
/* 随机汉字打印 */
var index = Math.floor(Math.random()*str.length);
/* Math.random()方法可返回介于0~9之间的一个随机数 */
/* index 伪随机整数 */
var x = i*fontSize;/* x坐标 */
var y = drops[i]*fontSize;/* y坐标 */
context.fillText(index,x,y);
/* 如果要改变事件，肯定就是改变每次他的起点 */
/* 在屏幕上划线后，把他的顶部随机发送到顶部 */
/* 讲一个随机性添加到复位中，使分散在轴上的下降 */
if (y >= canvas.height && Math.random() > 0.99) {
drops[i] = 0;
}
/* 增加的y坐标 */
drops[i]++;
};
};
draw();
var intervalId = setInterval(draw,30);
// 测试效果开始/暂停
function dianji(objBtn){
var operate = document.getElementById("operate");
if(objBtn.value == "开始"){
objBtn.value = "暂停";
intervalId = setInterval(draw,30);
}else{
objBtn.value = "开始";
clearInterval(intervalId);
}
return false;
}
/* } */
</script>
</html>（一）获取浏览器屏幕的宽度和高度
有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
对于 Internet Explorer 8、7、6、5：
document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth
所以这里我为了涵盖所有浏览器，将获取方法均列出来
（二）setInterval（翻译为set设置Interval间隔）
setIntervalsetInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
Html代码
1.
2.
10.Stop interval
【与setTimeout的使用区别】
这两个方法都可以用来实现在一个固定时间段之后去执行JavaScript。不过两者各有各的应用场景。
(方 法):
实际上，setTimeout和setInterval的语法相同。它们都有两个参数，一个是将要执行的代码字符串，还有一个是以毫秒为单位的时间间隔，当过了那个时间段之后就将执行那段代码。
不过这两个函数还是有区别的，setInterval在执行完一次代码之后，经过了那个固定的时间间隔，它还会自动重复执行代码，而setTimeout只执行一次那段代码。
（3）Math.floor() === 向下取整
（4）Math.random()方法可返回介于 0 ~ 1 之间的一个随机数
（5）clearInterval（翻译为清除clear间隔interval）
①clearInterval()：取消由 setInterval() 设置的 timeout
②setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。该方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 该方法返回的 ID 值可用作 clearInterval() 方法的参数。
