當前位置:蘿卜系統下載站 > 技術開發教程 > 詳細頁面

《黑客帝國》中的字符下落效果JS代碼如何寫

《黑客帝國》中的字符下落效果JS代碼如何寫

更新時間:2023-06-22 文章作者:未知 信息來源:網絡 閱讀次數:

編程(Programming)是編定程序的中文簡稱,就是讓計算機代碼解決某個問題,對某個計算體系規定一定的運算方式,使計算體系按照該計算方式運行,并最終得到相應結果的過程。為了使計算機能夠理解(understand)人的意圖,人類就必須將需解決的問題的思路、方法和手段通過計算機能夠理解的形式告訴計算機,使得計算機能夠根據人的指令一步一步去工作,完成某種特定的任務。這種人和計算體系之間交流的過程就是編程。

【實例名稱】

《黑客帝國》中的字符下落效果

【實例描述】

 所有看過電影《黑客帝國》的人可能都對一個場非常熟悉,那就是一連串的0、l編碼。本例學習如何制作那種字符下落效果。

【實例代碼】

<HTML> <HEAD> <TITLE>黑客帝國</TITLE> <meta http-equiv="Content-Type" content="text/html;charset=gb2312"> </HEAD> <style type="text/css"> body {  overflow:hidden;  margin:0;  background-color:#000000;  font-family:宋體; } DIV.#heike {  overflow:hidden;  position:relative;  top:5%;  width:90%;  height:90%;  border-style:solid;  border-width:1;  border-color:#009900; } </style> <script language="javascript"> var strCount; var str; var Color; var Font; var sLine = "W<br>W<br>W<br>.<br>B<br>a<br>i<br>D<br>u<br>.<br>C<br>O<br>M"; function OnLoad() {  strCount = 40;  str = [];  Color = [];  Font = [];  Color[0] = "#002211";//文字的顏色  Color[1] = "#003311";  Color[2] = "#005511";  Color[3] = "#008811";  Color[4] = "#00BB99";  Color[5] = "#114411";  Color[6] = "#335566";  Color[7] = "#668899";  Color[8] = "#99BBAA";  Color[9] = "#CECECC";  Font[0] = "10px";    //文字的大小  Font[1] = "12px";  Font[2] = "14px";  Font[3] = "16px";  Font[4] = "18px";  setTimeout("strik()",50); } function strik() {  for(var i=0;i<strCount;i++)  {   if(typeof(str[i]) != "undefined")   //如果字符串存在   {    if(str[i]["Carch"].style.pixelTop > heike.clientHeight)    {     str[i]["Carch"].outerHTML = "";     delete str[i]["Level"];//刪除數組元素     delete str[i]["Speed"];     delete str[i]["Carch"];     delete str[i];    }    else    {     str[i]["Carch"].style.pixelTop += str[i]["Speed"];    }   }   else if(Math.random()<0.25)             //隨機小數   {    str[i] = new Array();    str[i]["Level"] = Math.round(Math.random()*4);    str[i]["Speed"] = (Math.round(Math.random()*str[i]["Level"])<<2)+10;    document.all["heike"].insertAdjacentHTML("AfterBegin","<span id='SPAN_"+i+"'>"+sLine+"</span>");    str[i]["Carch"] = document.all["SPAN_"+i];    str[i]["Carch"].style.fontSize = Font[str[i]["Level"]];             //字體    str[i]["Carch"].style.position = "absolute";                        //位置    str[i]["Carch"].style.pixelLeft = Math.round(Math.random()*heike.clientWidth);  //x坐標    str[i]["Carch"].style.pixelTop = -str[i]["Carch"].offsetHeight;                 //y坐標    str[i]["Carch"].style.color = Color[str[i]["Level"]+5];                         //顏色    str[i]["Carch"].style.filter = "glow(Color="+Color[str[i]["Level"]]+",Strength=5)";//濾鏡效果    str[i]["Carch"].style.zIndex = str[i]["Level"];                                    //z-Index   }  }  setTimeout("strik()",50); } </script> <BODY onload="OnLoad()"> <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> <tr><td align="center" height="100%"><div id="heike"></div></td></tr> <tr><td align="center" style="padding:5;font-size:9pt;color:#FFFFFF;">使用 IE 6.0 以上版本或以 IE 為核心的瀏覽器瀏覽本頁,1024*768分辨率為佳</td></tr> </table> </BODY> </HTML>

【運行效果】

運行效果

【難點剖析】

本例的重點是對顏色和速度的隨機設置。JavaScript中的“Math”對象用來提供數學運算,其中“Math random”用來獲取一個0到1之問的隨機數!癕ath.round”是采
用四舍五入方式取得最接近的整數。代碼中使用了兩維數組,“delete”方法用來刪除數組中的元索。

【源碼下載】

本實例JS代碼下載


使用編程語言寫的程序,由于每條指令都對應計算機一個特定的基本動作,所以程序占用內存少、執行效率高。

溫馨提示:喜歡本站的話,請收藏一下本站!

本類教程下載

系統下載排行

網站地圖xml | 網站地圖html
亚洲嫩草影院久久精品