我要投稿
  • 您当前的位置:57365.com -> 技术教程 -> 网站建设教程 -> DOMJS教程 -> 教程内容
  • [ 收藏本页教程 ]
  • 用javascript实现变色背景和文字DOMJS教程

    教程作者:佚名    教程来源:不详   教程栏目:DOMJS教程    收藏本页
      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 >

     
    我要投稿   -   广告合作   -   关于本站   -   友情连接   -   网站地图   -   联系我们   -   版权声明   -   设为首页   -   加入收藏   -   网站留言
    Copyright © 2009 - 20012 www.www.hxswjs.com All Rights Reserved.57365.com 版权所有