警告:以下代码由季雨林本人探索写出,经过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"> </td> <td id="id2"> </td> <td id="id3"> </td> </tr> <tr height="200px"> <td id="id4"> </td> <td id="id5"> </td> <td id="id6"> </td> </tr> <tr height="200px"> <td id="id7"> </td> <td id="id8"> </td> <td id="id9"> </td> </tr> </table> </body> </html>