前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >仿linux系统九宫格屏保程序:js网页版

仿linux系统九宫格屏保程序:js网页版

作者头像
opengps
发布2019-02-13 17:05:34
1.4K0
发布2019-02-13 17:05:34
举报
文章被收录于专栏:opengpsopengps

警告:以下代码由季雨林本人探索写出,经过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>

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2012年01月10日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档