用JavaScript实现变色背景和文字
制作变色背景和文字的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"
>赛迪网电脑应用
< /body >
< /html > [@more@]
分享标题:用JavaScript实现变色背景和文字(转)
链接URL:
http://bjjierui.cn/article/jdidhh.html