首页 | 新闻 | 短信 | 邮件 | 商城 | 搜索 | 社区 | 在线 | 企业
搜狐首页 >> IT频道首页 >> 网狐教程 >> 网站制作 >> Javascript
用JavaScript实现变色背景和文字
2003-03-12 10:42  转自: 中国电脑教育报
   制作变色背景和文字的JavaScript代码有很多种,不过大多数背景颜色变化时有跳跃感,不够柔和。本例的效果特别酷!

请看效果:



背景请用bgcolor参数,前景文字请用fgcolor参数。

全部代码如下:

1、背景:

< html >
< head >
< title >bgcolor< /title >
< meta http-equiv="Content-Type" content="text/html; charset=gb2312" >
< script language="JavaScript" >
< !--
//you can assign the initial color of the background here
r=255;
g=50;
b=50;
flag=0;
t=new Array;
o=new Array;
d=new Array;

function hex(a,c)
{
t[a]=Math.floor(c/16)
o[a]=c%16
switch (t[a])
{
case 10:
t[a]='A';
break;
case 11:
t[a]='B';
break;
case 12:
t[a]='C';
break;
case 13:
t[a]='D';
break;
case 14:
t[a]='E';
break;
case 15:
t[a]='F';
break;
default:
break;
}
switch (o[a])
{
case 10:
o[a]='A';
break;
case 11:
o[a]='B';
break;
case 12:
o[a]='C';
break;
case 13:
o[a]='D';
break;
case 14:
o[a]='E';
break;
case 15:
o[a]='F';
break;
default:
break;
}
}

function ran(a,c)
{
if ((Math.random() >2/3||c==0)&&c< 255)
{
c++
d[a]=2;
}
else
{
if ((Math.random()< =1/2||c==255)&&c >0)
{
c--
d[a]=1;
}
else d[a]=0;
}
return c
}
function do_it(a,c)
{
if ((d[a]==2&&c< 255)||c==0)
{
c++
d[a]=2
}
else
if ((d[a]==1&&c >0)||c==255)
{
c--;
d[a]=1;
}
if (a==3)
{
if (d[1]==0&&d[2]==0&&d[3]==0)
flag=1
}
return c
}
function disco()
{
if (flag==0)
{
r=ran(1, r);
g=ran(2, g);
b=ran(3, b);
hex(1,r)
hex(2,g)
hex(3,b)
document.bgColor="#"+t[1]+o[1]+t[2]+o[2]+t[3]+o[3]
flag=50
}
else
{
r=do_it(1, r)
g=do_it(2,g)
b=do_it(3,b)
hex(1,r)
hex(2,g)
hex(3,b)
document.bgColor="#"+t[1]+o[1]+t[2]+o[2]+t[3]+o[3]
flag--
}
if (document.all)
setTimeout('disco()',20)
}
//-- >
< /script >
< /head >

< body onload="disco()" bgcolor="#FFFFFF" text="#000000" >
< /body >
< /html >
2、前景文字:


< html >
< head >
< title >bgcolor< /title >
< meta http-equiv="Content-Type" content="text/html; charset=gb2312" >
< script language="JavaScript" >
< !--
//you can assign the initial color of the background here
r=255;
g=0;
b=0;
flag=0;
t=new Array;
o=new Array;
d=new Array;
function hex(a,c)
{
t[a]=Math.floor(c/16)
o[a]=c%16
switch (t[a])
{
case 10:
t[a]='A';
break;
case 11:
t[a]='B';
break;
case 12:
t[a]='C';
break;
case 13:
t[a]='D';
break;
case 14:
t[a]='E';
break;
case 15:
t[a]='F';
break;
default:
break;
}
switch (o[a])
{
case 10:
o[a]='A';
break;
case 11:
o[a]='B';
break;
case 12:
o[a]='C';
break;
case 13:
o[a]='D';
break;
case 14:
o[a]='E';
break;
case 15:
o[a]='F';
break;
default:
break;
}
}

function ran(a,c)
{
if ((Math.random() >2/3||c==0)&&c< 255)
{
c++
d[a]=2;
}
else
{
if ((Math.random()< =1/2||c==255)&&c >0)
{
c--
d[a]=1;
}
else d[a]=0;
}
return c
}
function do_it(a,c)
{
if ((d[a]==2&&c< 255)||c==0)
{
c++
d[a]=2
}
else
if ((d[a]==1&&c >0)||c==255)
{
c--;
d[a]=1;
}
if (a==3)
{
if (d[1]==0&&d[2]==0&&d[3]==0)
flag=1
}
return c
}
function disco()
{
if (flag==0)
{
r=ran(1, r);
g=ran(2, g);
b=ran(3, b);
hex(1,r)
hex(2,g)
hex(3,b)
document.fgColor="#"+t[1]+o[1]+t[2]+o[2]+t[3]+o[3]
flag=50
}
else
{
r=do_it(1, r)
g=do_it(2,g)
b=do_it(3,b)
hex(1,r)
hex(2,g)
hex(3,b)
document.fgColor="#"+t[1]+o[1]+t[2]+o[2]+t[3]+o[3]
flag--
}
if (document.all)
setTimeout('disco()',0)
}
//-- >
< /script >
< /head >

< body onload="disco()" text="#000000" style="font:25pt 黑体" >赛迪网电脑应用
< /body >
< /html >

我来说两句 去相关俱乐部 发短信息
     为搜狐IT频道查错 得每日精彩大奖——点击可了解详细信息
搜狐IT频道:体察IT业界动态,传播IT时尚生活——点击进入 >>滚动新闻
相关连接
最热点击

去东京迪斯尼,过桃色圣诞节!

精彩相册[男][女]
活力社员[男][女]
魅力情人[男][女]
美女 天若有情
帅哥 不帅照脸踢
·和弦铃声:
原来的我 挥着翅膀的女孩
·疯狂音效:
On…个头啊 翠花,接电话…
订阅任何彩信服务
三天内退订不收费!!!
请发表您的看法
用户: 匿名发出
您要为您所发的言论的后果负责,故请各位遵纪守法并注意语言文明。
留言:
*经营许可证编号:京ICP00000008号
*遵守《互联网电子公告服务管理规定》
*遵守《全国人大常委会关于维护互联网安全的规定》

新闻搜索
关键字:

三重奖励,百分百中奖
·找老乡尽在激情老乡会
·攒魔法袜子拿圣诞礼物
搜狐彩信最新推荐
·[] 眉飞色舞
·[] 厉鬼再现
热门词:必杀功 林忆莲
精彩订阅
新闻资讯
美国正式宣布萨达姆已被捕!
订阅 焦点新闻,了解详情


搜狐商城
·影视|徐静蕾我和爸爸
·音乐|欧美音乐盛典展
·书籍|黑客大曝光
·书籍|1元图书特卖场
·化妆|畅销精品优惠哦
·精品|zippo火机5折起
更多...


网站登录 - 搜狐招聘 - 广告服务 - 联系方式 - 保护隐私权 - 公司介绍
Copyright © 2003 Sohu.com Inc. All rights reserved. 搜狐公司 版权所有