>>点击这里下载完整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. 光流和KLT

    一 光流 光流的概念是Gibson在1950年首先提出来的. 它是空间运动物体在观察成像平面上的像素运动的瞬时速度.是利用图像序列中像素在时间域上的变化以及相邻帧之间的相关性来找到上一帧跟当前帧之间存 ...

  2. ExtJs在disabled和readOnly美学分析

    ExtJs中disabled和readOnly美观度的分析 ExtJs中.假设设置输入框为仅仅读属性,一般第一考虑的都是readonly=true 它的效果和正常输入框一样,可是不同意输入: 然而,它 ...

  3. hdu 1251(字典树)

    题目链接:http://acm.hdu.edu.cn/status.php?user=NYNU_WMH&pid=1251&status=5 Trie树的基本实现 字母树的插入(Inse ...

  4. 使用JS的FormData对象

    利用FormData对象,你可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 创建一个FormData对象 你可以先创建一个空的F ...

  5. kubernetes多节点部署的决心

    注:以下操作均基于centos7系统. 安装ansible ansilbe能够通过yum或者pip安装,因为kubernetes-ansible用到了密码.故而还须要安装sshpass: pip in ...

  6. Android Permission denied 错误 ( 附Android权限大全 )

    Android Permission denied 错误(附Android权限大全) java.net.SocketException: Permission denied (maybe missin ...

  7. MAC使用小技巧(一)

    [ Mac OS X 终端命令开启功能 ] 1.Lion下显示资源库方法一:显示在“终端”中输入下面的命令:chflags nohidden ~/Library/ 隐藏在“终端”中输入下面的命令:ch ...

  8. C/S模式开发中如何利用WebBrowser控件制作导航窗体

    原文:C/S模式开发中如何利用WebBrowser控件制作导航窗体 转自: CSDN 相信不少同学们都做过MIS系统的开发,今天这里不讨论B/S模式开发的问题.来谈谈winform开发.用过市面上常见 ...

  9. 详解linux vi命令用法

    vi是所有UNIX系统都会提供的屏幕编辑器,它提供了一个视窗设备,通过它可以编辑文件.当然,对UNIX系统略有所知的人,或多或少都觉得vi超级难用,但vi是最基本的编辑器,所以希望读者能好好把它学起来 ...

  10. 响应式web前端框架Foundation & Bootstrap 对比

    Foundation & Bootstrap都是易用.强大且灵活的前端框架,用于构建基于任何设备上的 Web 应用.提供流式布局,及多种 js UI 组件,如导航.表单.按钮.Tabs 等等. ...