JavaScript实例技巧精选(14)—动态变化背景颜色
>>点击这里下载完整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)—动态变化背景颜色的更多相关文章
- JavaScript实例技巧精选(10)—计算器实例2
>>点击这里下载完整html源码<< 这是截图: 利用Javascript和html实现的另一个计算器实例,核心代码如下: <script language=" ...
- JavaScript实例技巧精选(9)—计算器实例1
>>点击这里下载完整html源码<< 这是截图: 利用Javascript和html实现的一个计算器实例,核心代码如下: <script language="J ...
- Javascript实例技巧精选(7)—设置和获取文本框与文本域的光标位置(兼容IE和Chrome,Firefox)
>>点击这里下载完整html源码<< 截图如下: 本实例描述了如何用Javascript来控制和获取文本框/文本域的鼠标光标位置,以下代码兼容IE和Chrome,Firefox ...
- JavaScript实例技巧精选(13)—计算在网页上的停留时间
>>点击这里下载完整html源码<< 这是截图: 核心代码如下: <SCRIPT LANGUAGE="JAVASCRIPT"> <!-- ...
- JavaScript实例技巧精选(12)—计算星座与属相
>>点击这里下载完整html源码<< 这是截图: 核心代码如下: <SCRIPT LANGUAGE="JavaScript"> <!-- ...
- Javascript实例技巧精选(8)—计算当月剩余天数
>>点击这里下载完整html源码<< 截图如下: 利用Javascript在网页上计算当前月份的剩余天数,相应代码如下: <script language="J ...
- Javascript实例技巧精选(6)—滚动鼠标中键读取Json数据分页显示网页内容
>>点击这里下载完整html源码<< 截图如下: 滚动鼠标中键读取Json数据分页显示网页内容,关键的Javascript如下: <script type="t ...
- JavaScript实例技巧精选(11)—计算器实例3
>>点击这里下载完整html源码<< 界面如下 将以下代码插入<body></body>中 <FORM NAME="Calc" ...
- CSS 之动态变换背景颜色
先上效果图 HTML代码: 123456789 <div class="header"> <h1>GCCHRN'S BLOG</h1> < ...
随机推荐
- MySQL学习系列2--MySQL执行计划分析EXPLAIN
原文:MySQL学习系列2--MySQL执行计划分析EXPLAIN 1.Explain语法 EXPLAIN SELECT …… 变体: EXPLAIN EXTENDED SELECT …… 将执行 ...
- SQL2000 MD5加密
原文:SQL2000 MD5加密 /***************************************************************************** * Na ...
- hdu 3460 Ancient Printer
Problem Description The contest is beginning! While preparing the contest, iSea wanted to print the ...
- java_linux_shell_定时kill 启动java程序
#!/bin/bash #while truedo Process_ID=`ps -ef |grep 'LoginSinaWeiboCookie.jar' |grep -v grep |awk '{p ...
- HDU 2070 Fibbonacci Number
Fibbonacci Number Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others ...
- tcp接收队列
对于接收数据包,内核维护如下几个队列:1>全局 backlog 队列,驱动程序调用 netif_rx 将接收到的数据包缓存于该队列中.2>sock 结构中 back_log 队列,网络层在 ...
- href 做导航 特效
<div> <div> <%for (int i = 0; i < 200; i++) { %><%=i.ToString() %> <br ...
- Hadoop学习之配置Eclipse远程调试Hadoop
构建完毕Hadoop项目后,接下来就应该跟踪Hadoop的运行情况,比方在命令行运行hadoop namenode–format时运行了Hadoop的那些代码.当然也能够直接通过阅读源码的方式来做到这 ...
- asp.net mvc3 的数据验证(一)
原文:asp.net mvc3 的数据验证(一) 对于web开发人员来说,对用户输入的信息进行验证是一个重要但是繁琐的工作,而且很多开发者都会忽略.asp.net mvc3框架使用的是叫做“ ...
- MySQL的备份与还原
原文:MySQL的备份与还原 MySQL备份和还原,都是利用mysqldump.mysql和source命令来完成的. 1.Win32下MySQL的备份与还原 1.1 备份 开始菜单 | 运行 | c ...