>>点击这里下载完整html源码<<

这是截图:

网页背景颜色随时间变化,核心代码如下:

 <SCRIPT LANGUAGE="JavaScript">
 <!-- Begin

 var i=0, bg=0, bgI=1, cNum=1;

 var cArray = new Array(4);

 var hex = new Array(30);

 cArray[0]="FF0000";

 cArray[1]="FFFFFF";

 cArray[2]="0000FF";

 cArray[3]="FF0000";

 cArray[4]="FFFFFF";

 hex[0]="00";

 hex[1]="09";

 hex[2]="11";

 hex[3]="1A";

 hex[4]="22";

 hex[5]="2B";

 hex[6]="33";

 hex[7]="3C";

 hex[8]="44";

 hex[9]="4D";

 hex[10]="55";

 hex[11]="5E";

 hex[12]="66";

 hex[13]="6F";

 hex[14]="77";

 hex[15]="80";

 hex[16]="88";

 hex[17]="91";

 hex[18]="99";

 hex[19]="A2";

 hex[20]="AA";

 hex[21]="B3";

 hex[22]="BB";

 hex[23]="C4";

 hex[24]="CC";

 hex[25]="D5";

 hex[26]="DD";

 hex[27]="E6";

 hex[28]="EE";

 hex[29]="F7";

 hex[30]="FF";

 function BgFade() {

      if (cNum==1) {FadeRed();}

      else if (cNum==2) {FadeWhite();}

      else {FadeBlue();}

 }

 function FadeRed() {

      bg+=bgI;

      if (bg>29) {bgI=-1;}

      else if (bg<1) {bgI=-1;cNum=2;}

      document.body.bgColor="#"+hex[bg]+"0000";

 }

 function FadeWhite() {

      bg+=bgI;

      if (bg>29) {bgI=-1;}

      else if (bg<1) {bgI=-1;cNum=3;}

      document.body.bgColor="#"+hex[bg]+hex[bg]+hex[bg];

 }

 function FadeBlue() {

      bg+=bgI;

      if (bg>29) {bgI=-1;}

      else if (bg<1) {bgI=-1;cNum=1;}

      document.body.bgColor="#0000"+hex[bg];

 }

 //  End -->

 </script>

JavaScript实例技巧精选(14)—动态变化背景颜色的更多相关文章

  1. JavaScript实例技巧精选(10)—计算器实例2

    >>点击这里下载完整html源码<< 这是截图: 利用Javascript和html实现的另一个计算器实例,核心代码如下: <script language=" ...

  2. JavaScript实例技巧精选(9)—计算器实例1

    >>点击这里下载完整html源码<< 这是截图: 利用Javascript和html实现的一个计算器实例,核心代码如下: <script language="J ...

  3. Javascript实例技巧精选(7)—设置和获取文本框与文本域的光标位置(兼容IE和Chrome,Firefox)

    >>点击这里下载完整html源码<< 截图如下: 本实例描述了如何用Javascript来控制和获取文本框/文本域的鼠标光标位置,以下代码兼容IE和Chrome,Firefox ...

  4. JavaScript实例技巧精选(13)—计算在网页上的停留时间

    >>点击这里下载完整html源码<< 这是截图: 核心代码如下: <SCRIPT LANGUAGE="JAVASCRIPT"> <!-- ...

  5. JavaScript实例技巧精选(12)—计算星座与属相

    >>点击这里下载完整html源码<< 这是截图: 核心代码如下: <SCRIPT LANGUAGE="JavaScript"> <!-- ...

  6. Javascript实例技巧精选(8)—计算当月剩余天数

    >>点击这里下载完整html源码<< 截图如下: 利用Javascript在网页上计算当前月份的剩余天数,相应代码如下: <script language="J ...

  7. Javascript实例技巧精选(6)—滚动鼠标中键读取Json数据分页显示网页内容

    >>点击这里下载完整html源码<< 截图如下: 滚动鼠标中键读取Json数据分页显示网页内容,关键的Javascript如下: <script type="t ...

  8. JavaScript实例技巧精选(11)—计算器实例3

    >>点击这里下载完整html源码<< 界面如下 将以下代码插入<body></body>中 <FORM NAME="Calc" ...

  9. CSS 之动态变换背景颜色

    先上效果图 HTML代码: 123456789 <div class="header"> <h1>GCCHRN'S BLOG</h1> < ...

随机推荐

  1. JavaScript通告/订阅的例子

    原文链接: Pub/Sub JavaScript Object原始日期: 2014年6一个月11日本: 2014年6月13日 翻译人员: 铁锚 高效AJAX站点的三大杀器: 事件代理, 浏览历史管理, ...

  2. TCP/IP的经典网络编程

                                                                             TCP/IP网络编程之四书五经             ...

  3. Visual studio 2013 bug:visual studio no editoroptiondefinition export found for the given option nam

    昨天VS 2013打开项目,双击cs当文件,下面出现bug. Google没有理由.最后,在刚刚好清理C磁盘缓存用户文件夹. 然后就OK了. 详细的路径是:C:\Users\{当前用户}\AppDat ...

  4. 自己写CPU第五级(5)——测试逻辑、实现移动和空指令

    我们会继续上传新书<自己写CPU>(未公布),今天是19片,我每星期试试4 5.6 測试程序1--測试逻辑操作实现效果 编写例如以下測试程序用于检验逻辑操作指令是否实现正确,文件名称命名为 ...

  5. ACdreamoj(1105)模拟题

    题意:射一次激光最多能够攻击到几个敌人(因为激光非常强大,能够在击中敌人后穿过它,而瑶瑶自己的坦克因为有特殊装置,所以不会被激光击中.激光也会直接穿过它) . 表示此处为空地 * 表示此处为障碍(激光 ...

  6. linux文章(11)---umask和chmod

    一.用途 文将介绍linux环境下有关文件訪问模式相关的命令.         umask用来设置默认的文件訪问模式屏蔽值:chmod用来改动文件的訪问模式.         本文将选取ubuntu1 ...

  7. suggest的使用方法

    suggest的使用方法注意: 1. 要表示汉语的"建议做某事",英语通经常使用suggest doing sth,而不能用 suggest to do sth: 2. " ...

  8. 有趣iOS开展 - 网络请求

    网络请求 $(function () { $('pre.prettyprint code').each(function () { var lines = $(this).text().split(' ...

  9. linux_删除空文件(大小等于0的文件)的方法

    1: 查看 find . -name "*" -type f -size 0c 2:删除 find . -name "*" -type f -size 0c | ...

  10. HDU 3376 &amp;&amp; 2686 方格取数 最大和 费用流裸题

    题意: 1.一个人从[1,1] ->[n,n] ->[1,1] 2.仅仅能走最短路 3.走过的点不能再走 问最大和. 对每一个点拆点限流为1就可以满足3. 费用流流量为2满足1 最大费用流 ...