仿linux系統九宮格屏保程序:js網頁版

警告:以下代碼由季雨林本人探索寫出,經過IE,FireFox,Chrome測試

發現Chrome(以及360的極速瀏覽器)瀏覽器對於javascript的支持明顯勝於其他瀏覽器,請勿在電腦上長時間開啓該頁面,即使是js引擎強大的Chrome也會在運行半小時之後佔用滿內存,而其他瀏覽器甚至不能流暢運行,該頁面製作初衷是爲了仿造一種屏幕保護效果(雨林木風Linux系統:九宮格屏保),頁面剛啓動時的CPU佔用達到頂峯時開始正常速度運行(200ms切換顏色)

代碼如下(新建文本文件寫入以下代碼,然後把該文件的後綴名改成“.html”即可):

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Div仿屏幕保護效果 季雨林</title>
<script type="text/javascript" src="divControl.js"></script>
<script type="text/javascript">
 var colors =new Array();
  colors[0] = "#222";
  colors[1] = "#333";
  colors[2] = "#444";
  colors[3] = "#555";
  colors[4] = "#666";
  colors[5] = "#777";
  colors[6] = "#888";
  colors[7] = "#999";
  colors[8] = "#aaa";
  colors[9] = "#bbb";
 function setTimePoint(){  
  var indexArray = Math.floor((Math.random()*10));
  var indexArray2 = Math.floor((Math.random()*10));
  var idName = "id"+indexArray;
  document.getElementById(idName).style.backgroundColor = colors[indexArray2];
  //setTimeout(setTimePoint,100);
  setInterval(setTimePoint,300);
 }
</script>
<style type="text/css">
 body{
  text-align:center;
  background-color:#9CF;
 }
</style>
</head>
<body onload="setTimePoint();">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
 <tr height="200px">
    <td id="id1">&nbsp;</td>
    <td id="id2">&nbsp;</td>
    <td id="id3">&nbsp;</td>
  </tr>
  <tr height="200px">
    <td id="id4">&nbsp;</td>
    <td id="id5">&nbsp;</td>
    <td id="id6">&nbsp;</td>
  </tr>
  <tr height="200px">
    <td id="id7">&nbsp;</td>
    <td id="id8">&nbsp;</td>
    <td id="id9">&nbsp;</td>
  </tr>  
</table>
</body>
</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章