设为首页·收藏本页
交友   手机游戏  扑虎网铃声  免费短信  扑虎网图片  picasa相册      
首页>互联网>语言脚本>JavaScript>正文

用javascript实现变色背景和文字(1)

日　期：2006-10-22     来　源：    阅 读:
　　
用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 >
上一篇：利用javascript制作倒计时牌   下一篇：javascript[对象.属性]集锦之四
收藏本文到:
digg this! 添加到del.icio.us bbmao网络收藏夹 添加到365key 我顶 添加到bolaa 推荐到奇客发现 添加到新浪vivi 添加到google书签 添加到yahoo+
查看全部JavaScript内容  
  • 利用javascript制作倒计时牌　 2006-10-22 00:00:00
       利用JavaScript制作倒计时牌 五一劳动节很快就到了。哈哈，到时可以出去好好玩一玩了。是不是在掐指计算了。下面教你一种方法在网页上面制作倒计时牌，这样就方便多了。 把...[阅读全文]
  • javascript[对象.属性]集锦之四　 2006-10-22 00:00:00
       form对象 属性 name 中的NAME属性的字符串值. method 中METHOD属性的类值,"0"="GET" ,"1"="POST" . action 中ACTION属性的字符串值. target 表格数据提交的目标,与标记中相...[阅读全文]
  • 用javascript使链接按钮不断变化　 2006-10-22 00:00:00
       用JavaScript使链接按钮不断变化 按钮是网页中常常能见到的一种东东。但是用按钮做链接你可能还没有见到过。今天教你的这种方法，不仅可以用按钮来制作链接，而且按钮中链...[阅读全文]
  • javascript[对象.属性]集锦之六　 2006-10-22 00:00:00
       select对象 属性 length select对象中对象的个数. name 由NAME=属性定义的select对象的内部名. selectedIndex select对象中当前被选option的下标. options 该属性对应于在H...[阅读全文]
  • javascript中如何实现浏览器上的右键菜单　 2006-10-22 00:00:00
       如何实现浏览器上的右键菜单 最近在程序员大本营中的讨论中有一位老兄提出如何在浏览器中实现类似于应用程序的鼠标右击后出现右键菜单的效果。唯鱼试了试，发现不是很难解...[阅读全文]
  • javascript版的日期输入控件(6)　 2006-10-22 00:00:00
       td width="15%" align="center" id="day" onclick="add_day(year.innerText,month.innerText,this.innerText)" /td /tr tr td width="14%" align="center" id="day" onclic...[阅读全文]
  • javascript进行客户端数据的校验(2)　 2006-10-22 00:00:00
       html网页代码： ＜html ＜head ＜title文章发布＜/title ＜link rel="stylesheet" type="text/css" href="style.css" ＜/head ＜body bgcolor=#fafee9 ＜center原创文章投...[阅读全文]
  • 源码学习:一个简单的日历控件(1)　 2006-10-22 00:00:00
       calendar.js function atCalendarControl(){ var calendar=this; this.calendarPad=null; this.prevMonth=null; this.nextMonth=null; this.prevYear=null; this.nextYear=...[阅读全文]
  • javascript进行客户端数据的校验(1)　 2006-10-22 00:00:00
       //客户端对用户输入数据校验 //如果输入的内容不满足，则不提交，并且焦点自动跳到该位置。 //比发送以后在服务器端校验数据要好用的多！ 脚本代码： ＜script language="J...[阅读全文]
  • 源码学习:一个简单的日历控件(2)　 2006-10-22 00:00:00
       var tbBoard=document.createElement("table"); divBoard.insertAdjacentElement("beforeEnd",tbBoard); tbBoard.style.cssText="position:absolute;top:0;left:0;width:10...[阅读全文]
  • 点一下，首页地址添加到收藏夹　 2006-10-22 00:00:00
       我们都希望自己辛苦制作的主页能够成为网友们的收藏夹中的东东，于是我们不停的用各种方法吸引网友的注意力，大声的告诉他们：如果你觉得的好，就把我的主页填加到你的收藏...[阅读全文]
  • javascript对象与数组参考大全(14)　 2006-10-22 00:00:00
       Onselect 选取事件 B.30 textarea对象 它是form对象的一个属性,宙体中的一个文本区域(TEXTAREA)。 属性 defaultValue textarea对象的缺省值(VALUE=特性) name 该对象的名字...[阅读全文]
  • 利用javascript制作简单动画　 2006-10-22 00:00:00
       如果你需要改变动画播放速度, 比如每5秒换一张图片 改变setTimeout("imgturn('" +numb+ "')", 1000)中的1000为5000 ＜html ＜head ＜title＜/title ＜script language="Jav...[阅读全文]
  • javascript对象与数组参考大全(15)　 2006-10-22 00:00:00
       length 窗口内的框架数 location 窗口所显示文档的完整(绝对)URL(该属性本身也是一个对象)不要把它与如document.location混淆,后者是当前显示文档的URL。用户可以改变windo...[阅读全文]
  • javascript[对象.属性]集锦之十　 2006-10-22 00:00:00
       Math对象 属性 LN10 (10的自然对数) PI (3.1415926...) SQRT1_2 (1/2的平方根) 方法 abs(x) 返回x的绝对值 acos(x) 返回x的arc cosine值 asin(x) 返回x的arc sin值 atan(x)...[阅读全文]
  • javascript版的日期输入控件(1)　 2006-10-22 00:00:00
       !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" HTML HEAD TITLE New Document /TITLE META NAME="Generator" CONTENT="Microsoft FrontPage 5.0" META NA...[阅读全文]
  • javascript[对象.属性]集锦之九　 2006-10-22 00:00:00
       Date对象 要使用Date对象,必须先生成一个Date实例: 变量名=new Date(); 方法 getDay(),getDate(),getHours(),getMinutes(),getMonth(),getSeconds(),getTime(), getTimeZon...[阅读全文]
  • javascript版的日期输入控件(2)　 2006-10-22 00:00:00
       obj_year.innerText=parseInt(num_year)+1; //年数增加 displayCalendar(obj_month.innerText-1,obj_year.innerText); } function plusyear() { var obj_year=document.get...[阅读全文]
  • javascript[对象.属性]集锦之八　 2006-10-22 00:00:00
       string对象 string对象为操作字符串的内容提供了很多方法. 属性 length 字符串的长度,即字符串中字符的个数. 方法 big(),blink(),bold(),fixed(),italics(),small(),sub(),...[阅读全文]
  • javascript版的日期输入控件(3)　 2006-10-22 00:00:00
       displayCalendar(obj_month.innerText-1,obj_year.innerText); } function numberOfDays(month,year) //取得每月天数，判断平年闰年 { var numDays=new Array(31,28,31,30,...[阅读全文]
 用户名： （新注册） 密码： 匿名发表 评论(0条)
 评论内容：(不能超过250字，不支持HTML或代码，只能发表纯文字，请自觉遵守互联网相关政策法规。)
[an error occurred while processing this directive]
热点搜索

内衣写真 汤加丽人体艺术 裸体模特 偷拍 美女视频 诱惑自拍 美女性感 张靓颖走光 清纯少女 劲舞视频 经典搞笑 后舍男生 性感美女 花花公子 美女街舞 广告欣赏 全智贤

娱乐中心精华推荐
资讯中心精华推荐



合作伙伴: 电脑综合 8vv8娱乐榜

关于扑虎　|　扑虎新闻　|　联系扑虎　|　广告服务　|　招贤纳士

Copyright @ 2006-2007 poohu.com. All Right Reserved 陕ICP备06010975号