代码雨（coderain)源码（html5+css3+javascript,原创)
大家看过黑客帝国的代码雨吗？本人自己写了一个，效果还可以。演示效果请见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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"; />
<title>code rain</title>
</head>
<body bgcolor=#000000 onload=javascript:{blink();}>
<table width=100% height=100% align=center><tr align=left><td>
<div align=center style="margin:5em 5em 5em 5em;padding:2em;background:#000000;width:1000px;height:500px;position:relative"><span id="thespan1" style="text-align:right">01934184314370143701344301874304301</span><br /><br /><span id="thespan2">01934184314370143701344301874304301</span><br /><br /><span id="thespan3">01934184314370143701344301874304301</span><br /><br /><span id="thespan4">01934184314370143701344301874304301</span>
<br /><br /><span id="thespan5">01934184314370143701344301874304301</span>
<br /><br /><span id="thespan6">01934184314370143701344301874304301</span>
<br /><br /><span id="thespan7">01934184314370143701344301874304301</span>
<br /><br /><span id="thespan8">01934184314370143701344301874304301</span>
<br /><br /><span id="thespan9">01934184314370143701344301874304301</span>
<br /><br /><span id="thespan10">01934184314370143701344301874304301</span>
<br /><br /><span id="thespan11">01934184314370143701344301874304301</span>
<br /><br /><span id="thespan12">01934184314370143701344301874304301</span>
<br /><br /><span id="thespan13">01934184314370143701344301874304301</span>
<br /><br /><span id="thespan14">01934184314370143701344301874304301</span>
<br /><br /><span id="thespan15">01934184314370143701344301874304301</span>
<br /><br /><span id="thespan16">01934184314370143701344301874304301</span>
<br /><br /><span id="thespan17">01934184314370143701344301874304301</span>
<br /><br /><span id="thespan18">01934184314370143701344301874304301</span>
<br /><br /><span id="thespan19">01934184314370143701344301874304301</span>
<br /><br /><span id="thespan20">01934184314370143701344301874304301</span>
<br /><br /><span id="thespan21">01934184314370143701344301874304301</span>
<br /><br /><span id="thespan22">01934184314370143701344301874304301</span>
<br /><br /><span id="thespan23">01934184314370143701344301874304301</span>
<br /><br /><span id="thespan24">01934184314370143701344301874304301</span>
<br /><br /><span id="thespan25">01934184314370143701344301874304301</span>
<br /><br /><span id="thespan26">01934184314370143701344301874304301</span>
<br /><br /><span id="thespan27">01934184314370143701344301874304301</span>
</div>
</td></tr></table>
</body>
</html>
各位可以拷贝这段代码，保存为html文件，打开就可以看到效果。说明可以看javascript代码的注释。
此外，大家可以看到，这段代码雨，文字是从上往下排列的，这是因为css的writing-mode设置成了vertical-rl,也就是，垂直方向自右而左的书写方式。还有这里，text-orientation: upright，让文字的方向仍然是从左到右排列。
大家看过黑客帝国的代码雨吗？本人自己写了一个，效果还可以。演示效果请见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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"; />
<title>code rain</title>
</head>
<body bgcolor=#000000 onload=javascript:{blink();}>
<table width=100% height=100% align=center><tr align=left><td>
<div align=center style="margin:5em 5em 5em 5em;padding:2em;background:#000000;width:1000px;height:500px;position:relative"><span id="thespan1" style="text-align:right">01934184314370143701344301874304301</span><br /><br /><span id="thespan2">01934184314370143701344301874304301</span><br /><br /><span id="thespan3">01934184314370143701344301874304301</span><br /><br /><span id="thespan4">01934184314370143701344301874304301</span>
<br /><br /><span id="thespan5">01934184314370143701344301874304301</span>
<br /><br /><span id="thespan6">01934184314370143701344301874304301</span>
<br /><br /><span id="thespan7">01934184314370143701344301874304301</span>
<br /><br /><span id="thespan8">01934184314370143701344301874304301</span>
<br /><br /><span id="thespan9">01934184314370143701344301874304301</span>
<br /><br /><span id="thespan10">01934184314370143701344301874304301</span>
<br /><br /><span id="thespan11">01934184314370143701344301874304301</span>
<br /><br /><span id="thespan12">01934184314370143701344301874304301</span>
<br /><br /><span id="thespan13">01934184314370143701344301874304301</span>
<br /><br /><span id="thespan14">01934184314370143701344301874304301</span>
<br /><br /><span id="thespan15">01934184314370143701344301874304301</span>
<br /><br /><span id="thespan16">01934184314370143701344301874304301</span>
<br /><br /><span id="thespan17">01934184314370143701344301874304301</span>
<br /><br /><span id="thespan18">01934184314370143701344301874304301</span>
<br /><br /><span id="thespan19">01934184314370143701344301874304301</span>
<br /><br /><span id="thespan20">01934184314370143701344301874304301</span>
<br /><br /><span id="thespan21">01934184314370143701344301874304301</span>
<br /><br /><span id="thespan22">01934184314370143701344301874304301</span>
<br /><br /><span id="thespan23">01934184314370143701344301874304301</span>
<br /><br /><span id="thespan24">01934184314370143701344301874304301</span>
<br /><br /><span id="thespan25">01934184314370143701344301874304301</span>
<br /><br /><span id="thespan26">01934184314370143701344301874304301</span>
<br /><br /><span id="thespan27">01934184314370143701344301874304301</span>
</div>
</td></tr></table>
</body>
</html>
各位可以拷贝这段代码，保存为html文件，打开就可以看到效果。说明可以看javascript代码的注释。
此外，大家可以看到，这段代码雨，文字是从上往下排列的，这是因为css的writing-mode设置成了vertical-rl,也就是，垂直方向自右而左的书写方式。还有这里，text-orientation: upright，让文字的方向仍然是从左到右排列。
