html+js实现黑客帝国动态下雨的效果

今天无意中在看到快手刷到了一个程序员的视频，他用html+JS脚本写了一个仿黑客帝国的动态下雨特效作品，看上去感觉牛逼哄哄啊。那必须把代码整理好了，分享给大家装逼用。

js

//下落速度
var speed = 8;
//生成rain
function rain() {
    var spans = [10]
    for (var i = 0; i < 10; i++) {
        spans[i] = document.createElement('span')
        spans[i].className = 'span' + i;
        spans[i].innerText = Math.floor(Math.random() * 10)
    }
    var x = Math.floor(Math.random() * screen.availWidth - 10) + 10
    var big = Math.floor(Math.random() * 28 + 20)
    var rain = document.createElement('div')
    spans[9].style.fontSize = big + 'px'
    rain.className = 'rain'
    rain.style.left = x + 'px';
    rain.style.top = -200 + 'px'
    for (var i = 0; i < 10; i++) {
        rain.appendChild(spans[i])
        rain.appendChild(document.createElement('br'))
    }
    document.body.appendChild(rain)
}
//雨点下落
function inRain() {
    var rains = document.querySelectorAll('.rain');
    var body = document.body;
    var rain;
    for (var i = 0; i < rains.length; i++) {
        rain = rains[i]
        rain.style.top = rain.offsetTop + speed + 'px'
        if (rain.offsetTop > 600) {
            body.removeChild(rain);
        }
    }
}
//数字变化
function change() {
    var span = document.getElementsByTagName('span')
    for (var i = 0; i < span.length; i++) {
        span[i].innerText = Math.floor(Math.random() * 10)
    }
}
setInterval(rain, 25);
setInterval(inRain, 16);
setInterval(change, 100);

css

body {
background-color:black;
width:100%;
height:100%;
overflow:hidden;
}
.rain {
width:20px;
height:20px;
position:absolute;
font-weight:500;
}
.span0 {
color:rgba(8,248,8,0.1);
}
.span1 {
color:rgba(8,248,8,0.2);
}
.span2 {
color:rgba(8,248,8,0.3);
}
.span3 {
color:rgba(8,248,8,0.4);
}
.span4 {
color:rgba(8,248,8,0.5);
}
.span5 {
color:rgba(8,248,8,0.6);
}
.span6 {
color:rgba(8,248,8,0.7);
}
.span7 {
color:rgba(8,248,8,0.8);
}
.span8 {
color:rgba(8,248,8,0.9);
}
.span9 {
color:rgba(8,248,8,1);
font-weight:500;
}
.span0,.span1,.span2,.span3,.span4,.span5,.span6,.span7,.span8,.span9 {
font-size:16px;
text-align:center;
}
div {
text-align:center;
}