代碼雨（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，讓文字的方向仍然是從左到右排列。
浙公網安備 33010602011771號