代码雨（coderain)源码（html5+css3+javascript,原创)

2024-05-27 15:20 由前后端it技术阿诚发表于 #前端开发

大家看过黑客帝国的代码雨吗？本人自己写了一个，效果还可以。演示效果请见https://www.lanbaoshi.site/coderain.htm

下面上代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>代码雨</title>
<style type="text/css">
body,div{font-size:14px;color:#007700;writing-mode:vertical-lr;text-orientation: upright;}
span{background:#00ff00;padding:2px}
</style>
<script language="javascript">
function blink()
{

var thestr="01934184314370143701344301874304301";//这个thestr可以修改
var thelength=thestr.length;//取得一个长度
var thezongstr="01234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ";//代码雨的字符串来自thezongstr的随机位。
var thelength2=thezongstr.length;//取得thezongstr的长度
for(var i=1;i<=27;i++)
{

var therndstr="";//therndstr清零。
var rnd1=Math.random();//产生随机数
var thenewlength=10+Math.round((thelength-10)*rnd1);//新长度

for(var j=0;j<thenewlength;j++)
{
var rnd2=Math.random();//在产生随机数
var thexuhao=Math.round(thelength2*rnd2)-1;//利用thelength2产生第二个随机数，数值是0到thezongstr的长度减一
therndstr+=thezongstr.split("")[thexuhao];
//内循环结束
}

document.getElementById("thespan"+i.toString()).innerText=therndstr;
//每个span赋予一个随机字符串。
//外循环结束
}

window.setTimeout("blink();",200);//调用此函数后每隔200毫秒再调用一次。

}
</script>

</div>
</td></tr></table>
</body>
</html>

各位可以拷贝这段代码，保存为html文件，打开就可以看到效果。说明可以看javascript代码的注释。

此外，大家可以看到，这段代码雨，文字是从上往下排列的，这是因为css的writing-mode设置成了vertical-rl,也就是，垂直方向自右而左的书写方式。还有这里，text-orientation: upright，让文字的方向仍然是从左到右排列。