黑客帝国数字雨（原创）

Html

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;
}

//下落速度
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);

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

黑客帝国数字雨（原创）

代码描述：数字雨下落的浪漫

更新时间：2021-12-17 01:02:55

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

微风

相关代码

黑客帝国数字雨（原创）

最新