黑客帝国代码雨又又又更新了

最新推荐文章于 2024-05-20 21:21:56 发布

FRANK 程序猿

最新推荐文章于 2024-05-20 21:21:56 发布

阅读量146

点赞数 2

分类专栏： html代码雨文章标签： html5

本文链接：https://blog.csdn.net/m0_72846951/article/details/128464807

版权

html代码雨专栏收录该内容

2 篇文章 0 订阅

订阅专栏

黑客帝国代码雨更新了！

效果图：

修改了部分BUG，造型改变了非常炫酷，有兴趣的伙伴下载玩玩！！！

点个赞再走啊 :-D

代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>黑客帝国数字雨（原创）</title>
<style>
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;
}
</style>
</head>
<body>

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

</body>
</html>