用JavaScript实现变色背景和文字

  • 来源: 互联网 作者: rocket   2008-03-20/11:51
  • 用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" style="font:25pt 黑体" >赛迪网电脑应用
    < /body >
    < /html >


    评论 {{userinfo.comments}}

    {{money}}

    {{question.question}}

    A {{question.A}}
    B {{question.B}}
    C {{question.C}}
    D {{question.D}}
    提交

    驱动号 更多