首 页 教育新闻课件中心论文中心教学教案试题中心语文专题综合下载技术教程公务员  
设为首页
加入收藏
联系我们
您当前的位置:中国教育资源网 -> 技术教程 -> 网站建设 -> DOMJS -> 技术内容 退出登录 用户管理

用javascript实现变色背景和文字DOMJS教程

论文作者:佚名  论文来源:不详  论文发布时间:2006-6-20 1:01:23  论文发布人:chjchjchj

减小字体 增大字体

  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 >

 
[] [返回上一页] [打 印] [收 藏]  
 ∷相关技术评论  (评论内容只代表网友观点,与本站立场无关!) [查看发表评论...]
 
 中国教育资源网免费技术教程下载中心-站内广告 站内广告 中国教育资源网免费技术教程下载中心-站内广告 
 中国教育资源网站内搜索 站内搜索 中国教育资源网站内搜索 
 

   
 中国教育资源网免费技术教程下载中心-栏目导航 栏目导航 中国教育资源网免费技术教程下载中心-栏目导航 
· Dreamweaver · FrontPage
· CSSHTML · DOMJS
· Google排名 · 搜索研究
· 网络赚钱 · Alexa相关
· 建站交流 · 源码精华
· 经验技巧
 
中国教育资源网免费技术教程下载中心-相关教程  相关技术 中国教育资源网免费技术教程下载中心-相关教程
· 用javascript脚
· 在网页中使用ja
· 用javascript判
· 用javascript代
· 常用javascript
· 利用javascript
· javascript实例
· javascript实例
· [组图] 用javascript实
· 用javascript连
 中国教育资源网免费技术教程下载中心-本月热门教程 本月热门 中国教育资源网免费技术教程下载中心-本月热门教程 
 
 中国教育资源网免费技术教程下载中心-本日热门论文 本日热门 中国教育资源网免费技术教程下载中心-本日热门论文 
 
关于本站 - 网站帮助 - 免费课件 - 美容 - 绿色软件 - 软件下载 - 广告合作 - 下载声明 - 友情连接 - 网站地图 - 网站留言
浙ICP备06010405号 Email:cnkjz@163.com 技术支持:名流设计
版权所有 Copyright© 2002-2004 名流