用javascript实现变色背景和文字

2016-02-19 19:36 6 1 收藏

关注图老师设计创意栏目可以让大家能更好的了解电脑,知道有关于电脑的更多有趣教程,今天给大家分享用javascript实现变色背景和文字教程,希望对大家能有一点小小的帮助。

【 tulaoshi.com - Web开发 】

  用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;
}
}

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

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;
}
}

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

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

来源:http://www.tulaoshi.com/n/20160219/1621401.html

延伸阅读
标签: Web开发
效果如下图 要实现这个效果。很简单。 定义CSS样式 a:hover{     background:#f29901; } 这段代码的显示效果如下图 显然,这样太丑了。 只需要再加上一句 a:hover{     background:#f29901;     display:block; } 即可如效果图所示,当鼠标移动到超链接上的时候,整个li元素背...
标签: Web开发
碰到一个用javascript实现随机跳转页面实例,发布出来,共同研究下,或许有用哦。 请看下面的实例 html head titlePlease waiting.../title script language="javascript" !-- function urlList(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z) {     this[0]=a;     this[1]=b;     thi...
标签: Web开发
功能需求 1、调用要方便,做好之后应该像这样: function loadSelect(selectobj){ //传入一个select对象就能将他的样式美化 } 2、不改变原有表单项,表单的页面代码不去破坏: form name="f" onsubmit="getResult();"     fieldset         legend用户注册/legend    &nb...
标签: Web开发
在控制台中输入  db.drawCircle([50,50],20,"black");  db.drawLine([5,5],[36,44],"red");  可以看到效果  代码如下: body style="margin:0px;"  /body  script      function DrawingBoard(width,height,size)      {   &nb...
标签: PS PS教程
本文由 中国 translate(老张)   原创,转载请保留此信息! 先看原图和效果图: [next] 1.打开原图,用色阶调好画面 2.调完图后,按ctrl+E 把色阶层和背景层合并起来; 然后,用自己喜欢的方法把人物扣出来...这里本人是色阶抠的! 3. 在新抠出来的图层下面新建立一个图层,填充色为 #FFFFFF [next] 4.新建一...

经验教程

240

收藏

89
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部