用javascript实现数字雨

最新推荐文章于 2021-06-18 16:57:58 发布

sinolzeng

最新推荐文章于 2021-06-18 16:57:58 发布

阅读量572

点赞数

分类专栏： HTML/HTML5 Javascript

本文链接：https://blog.csdn.net/sinolzeng/article/details/113789045

版权

Javascript 同时被 2 个专栏收录

95 篇文章 1 订阅

订阅专栏

HTML/HTML5

31 篇文章 3 订阅

订阅专栏

数字雨这个东西，无数人写过了，我这个是上课无聊写的版本，纯属娱乐，没有经过性能优化的版本。

和别人不太一样的是我这个版本用了ascii码，数字会变化，就是性能不佳，懒得优化。

和之前的太阳系模型、小人互殴系统一样都是拿来伪装成动态壁纸的。

<!DOCTYPE html>
<html>
<head>
	<title>number rain</title>
</head>
<body style='background-color:black;margin:0;padding:0;width:100%;height:100%;overflow:hidden;'>
<div id='div'></div>
</body>
<script type="text/javascript">
	function id(x){
		return document.getElementById(x)
	}

	function c(K){
		var t = document.createElement('div');
		t.innerHTML = String.fromCharCode(Math.round(Math.random()*128)-1);
		t.style = 'position:absolute;color:green;font-weight:bold;';
		t.style.left = 20*K + 'px';
		t.speed = 4+(Math.random()-0.5)*0.5;
		t.top = 0;
		id('div').appendChild(t);
		return t;
	}

	window.onload = function(){
		var w = window.innerWidth;
		var h = window.innerHeight;

		var nx = Math.round(w/20);
		var all = [];
		for(var j=0;j<50;j++){
			for(var i=0;i<nx;i++){
				all.push(c(i));
			}
		}

		function render(){
			for(var i=0;i<all.length;i++){
				all[i].top += all[i].speed;
				if(all[i].top>h+20){
					all[i].top = 20;
					all[i].speed = 4 + (Math.random()-0.5)*5;
				}
				all[i].style.top = all[i].top + 'px';
				if(Math.random()<0.1){
					all[i].innerHTML = String.fromCharCode(Math.round(Math.random()*128)-1);
				}
				all[i].style.color = 'rgb(0,'+Math.round((all[i].top*2)/h*255)+',0)';
			}
			requestAnimationFrame(render);
		}
		requestAnimationFrame(render);
	}

</script>
</body>
</html>

sinolzeng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
用javascript实现数字雨

数字雨这个东西，无数人写过了，我这个是上课无聊写的版本，纯属娱乐，没有经过性能优化的版本。和别人不太一样的是我这个版本用了ascii码，数字会变化，就是性能不佳，懒得优化。和之前的太阳系模型、小人互殴系统一样都是拿来伪装成动态壁纸的。<!DOCTYPE html><html><head> <title>number rain</title></head><body style='background-col
复制链接

扫一扫