溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

用JavaScript實現(xiàn)變色背景和文字(轉(zhuǎn))

發(fā)布時間:2020-08-18 14:03:19 來源:ITPUB博客 閱讀:249 作者:rainytag 欄目:編程語言
用JavaScript實現(xiàn)變色背景和文字

  制作變色背景和文字的JavaScript代碼有很多種,不過大多數(shù)背景顏色變化時有跳躍感,不夠柔和。本例的效果特別酷!

請看效果:




背景請用bgcolor參數(shù),前景文字請用fgcolor參數(shù)。

全部代碼如下:

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" >賽迪網(wǎng)電腦應(yīng)用
< /body >
< /html > [@more@]
向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI