黑客帝国代码雨更新了!
效果图:
修改了部分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>