>>点击这里下载完整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. react.js 从零开始(七)React (虚拟)DOM

    React 元素 React 中最主要的类型就是 ReactElement.它有四个属性:type,props,key 和ref.它没有方法,并且原型上什么都没有. 可以通过 React.create ...

  2. android static达到Service与Activity于Handler沟通

    供static理解力,仅适用于static理解力,不喜勿喷 第一种方式:离Service中获取Activity的static变量,调用该静态变量的getHandler()获取Handler进行发送消息 ...

  3. hdu 3068 最长回文(manachar模板)

    Problem Description 给出一个只由小写英文字符a,b,c...y,z组成的字符串S,求S中最长回文串的长度.回文就是正反读都是一样的字符串,如aba, abba等   Input 输 ...

  4. Nyoj 布线问题(并查集&&图论)

    描述南阳理工学院要进行用电线路改造,现在校长要求设计师设计出一种布线方式,该布线方式需要满足以下条件:1.把所有的楼都供上电.2.所用电线花费最少   输入 第一行是一个整数n表示有n组测试数据.(n ...

  5. bigdata_hadoop集群配置_内存分配

    haoop集群  做好内存管理跟重要,不然经常会给抛出个 OutMemory   ,内存溢出 以horntonworks给出推荐配置为样本,给出一种常见的Hadoop集群上各组件的内存分配方案.配置时 ...

  6. java编程接口(1) ------ Swing基金会

    本文提出了自己的学习笔记.欢迎转载,但请注明出处:http://blog.csdn.net/jesson20121020 近期想学下java的界面编程,在此记录下.    大多数的Swing应用都被构 ...

  7. Asp.net Mvc WebSocket

    转载一种仿照Asp.net Mvc思维构建WebSocket服务器的方法 问题场景 Asp.net Mvc提供了DependencyResolver.Routing.Filter. Modelbind ...

  8. cocos2d-x 3.0游戏实例学习笔记 《跑酷》第四步--地图循环&amp;主角加入动作

    说明:这里是借鉴:晓风残月前辈的博客,他是将泰然网的跑酷教程,用cocos2d-x 2.X 版本号重写的,眼下我正在学习cocos2d-X3.0 于是就用cocos2d-X 3.0重写,并做相关笔记 ...

  9. 蜗牛—Hibernate之初识配置

    下载Hibernate的jar包 把下面jar文件考到项目lib下 然后在myeclipse中打开database的view视图创建一个新的数据库连接 接下来,配置连接,须要导入ORACLE的jar包 ...

  10. IOS开发-Swift新语言初见

    Safe Swift pairs increased type safety with type inference, restricts direct access to pointers, and ...