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> < ...
随机推荐
- C++ 虚函数表决心
C++ 虚函数表解析 xml:namespace prefix = o /> 陈皓 http://blog.csdn.net/haoel 前言 C++中的虚函数的作用主要是实现了多态的机制. 关 ...
- 配置路线图RouteMap注意事项
路线图RouteMap一个特征是First Match Win.假设没有人RouteMap实例都满足,那么.默认拒绝操作,然后配置路线图时,有一点需要特别注意.否则容易出错,这是默认的处理.通常的做法 ...
- JMeter怎么使用代理服务器
一.JMeter有一个内置的代理服务器,主要用户使用浏览器录制脚本,在左侧的WorkBench中添加HTTP Proxy Server即可, 其中port表示代理服务器段口号, URL Pattern ...
- hdu2602 Bone Collector (01背包)
本文来源于:http://blog.csdn.net/svitter 题意:典型到不能再典型的01背包.给了我一遍AC的快感. //================================== ...
- 移植X264成功
http://blog.csdn.net/mashang123456789/article/details/8673426 http://blog.csdn.net/b5w2p0/article/de ...
- Cocos2d-x 3.0final 终结者系列教程14-L新abel-Cocos2d-x公文
目 录 新文本标签类Label 其它文本标签 字体制作工具使用介绍 小结 https://github.com/chukong/cocos-docs/blob/master/manual/framew ...
- Compare .NET Objects对象比较组件
Compare .NET Objects对象比较组件 阅读目录 1.Compare .NET Objects介绍 2. Compare .NET Objects注意事项 3.一个简单的使用案例 4.三 ...
- C#关于图片的相关处理
public class ImageHelper { /// <summary> /// 图片转换成字节流 /// </summary> /// <param name= ...
- BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第3章节--SharePoint 2013 开发者工具 SharePoint中基于Web开发
BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第3章节--SharePoint 2013 开发者工具 SharePoint中基于Web开发 之前提到过, ...
- Cocos2d-x之MenuItem
***************************************转载请注明出处:http://blog.csdn.net/lttree************************** ...