iis服务器助手广告广告
返回顶部
首页 > 资讯 > 精选 >用JavaScript实现变色背景和文字(转)
  • 701
分享到

用JavaScript实现变色背景和文字(转)

2023-06-03 06:06:30 701人浏览 薄情痞子
摘要

用javascript实现变色背景和文字  制作变色背景和文字的JavaScript代码有很多种,不过大多数背景颜色变化时有跳跃感,不够柔和。本例的效果特别酷!请看效果:背景请用bGColor参数,前景文字请用fgcolor参数。全部代码如

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" >赛迪网电脑应用
< /body >
< /html > [@more@]

--结束END--

本文标题: 用JavaScript实现变色背景和文字(转)

本文链接: https://www.lsjlt.com/news/233244.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 用JavaScript实现变色背景和文字(转)
    用JavaScript实现变色背景和文字  制作变色背景和文字的JavaScript代码有很多种,不过大多数背景颜色变化时有跳跃感,不够柔和。本例的效果特别酷!请看效果:背景请用bgcolor参数,前景文字请用fgcolor参数。全部代码如...
    99+
    2023-06-03
  • JavaScript实现弹出层和背景变暗
    这篇文章主要讲解了“JavaScript实现弹出层和背景变暗”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript实现弹出层和背景变暗”吧!Ja...
    99+
    2024-04-02
  • JS实现点击文本框改变背景颜色
    本文实例为大家分享了JS实现点击文本框改变背景颜色的具体代码,供大家参考,具体内容如下 代码如下: <!DOCTYPE html> <html>     &l...
    99+
    2022-11-13
    JS改变背景颜色 JS点击改变背景颜色 JS点击文本框改变颜色
  • react-native实现渐变色背景过程
    目录react-native 渐变色背景react-native学习记录滚动条轮播图示例渐变色ScrollableTabView默认页面ScrollableTabView背景颜色Sc...
    99+
    2024-04-02
  • css实现div背景色渐变色代码分享
    这篇文章主要讲解了“css实现div背景色渐变色代码分享”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“css实现div背景色渐变色代码分享”吧!效果图:代码...
    99+
    2024-04-02
  • css怎么实现背景颜色渐变效果
    本文小编为大家详细介绍“css怎么实现背景颜色渐变效果”,内容详细,步骤清晰,细节处理妥当,希望这篇“css怎么实现背景颜色渐变效果”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。首先,在页面中创建一个div标签;...
    99+
    2023-07-04
  • css中如何实现背景色渐变动画
    这篇文章主要为大家展示了“css中如何实现背景色渐变动画”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“css中如何实现背景色渐变动画”这篇文章吧。通过本文,你能...
    99+
    2024-04-02
  • css好看的渐变色背景怎么实现
    要实现CSS中的渐变色背景,可以使用CSS的linear-gradient()函数。linear-gradient()函数可以在指定...
    99+
    2023-08-08
    css
  • CSS容器背景如何实现颜色渐变
    这篇文章主要介绍了CSS容器背景如何实现颜色渐变,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。语法background: linear-gradient(direc...
    99+
    2023-06-08
  • 利用CSS实现元素的渐变背景色效果
    利用CSS实现元素的渐变背景色效果在Web开发中,为元素添加背景色是非常常见的需求。而为了使页面更加丰富多样,我们通常希望能够实现元素背景色的渐变效果。本文将详细介绍如何利用CSS来实现元素的渐变背景色效果,并提供具体的代码示例。CSS提供...
    99+
    2023-11-21
    CSS渐变背景色
  • css怎么实现鼠标经过文字背景颜色或图片发生变化
    本篇内容介绍了“css怎么实现鼠标经过文字背景颜色或图片发生变化”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所...
    99+
    2024-04-02
  • css如何实现点击div改变背景颜色
    这篇文章主要讲解了“css如何实现点击div改变背景颜色”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“css如何实现点击div改变背景颜色”吧!在css中,...
    99+
    2024-04-02
  • css如何实现背景颜色线性渐变和径向渐变效果
    这篇文章主要介绍了css如何实现背景颜色线性渐变和径向渐变效果的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇css如何实现背景颜色线性渐变和径向渐变效果文章都会有所收获,下面我们一起来看看吧。一、线性渐变(li...
    99+
    2023-07-05
  • jquery如何实现鼠标经过改变背景色
    今天小编给大家分享一下jquery如何实现鼠标经过改变背景色的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一...
    99+
    2024-04-02
  • html点击按钮改变背景颜色怎么实现
    html点击按钮改变背景颜色的实现方法:1.创建一个html文件;2.在html文件中添加html代码架构;3.在body标签里面使用input标签实现一个按钮;4.在html标签里面添加script标签并设置点击按钮改变颜色的功能;5.通...
    99+
    2024-04-02
  • JavaScript如何用按钮触发实现背景色的闪烁
    这篇文章主要介绍了JavaScript如何用按钮触发实现背景色的闪烁的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇JavaScript如何用按钮触发实现背景色的闪烁文章都会有所...
    99+
    2024-04-02
  • 怎么使用Javascript的if语句实现背景色切换
    本文小编为大家详细介绍“怎么使用Javascript的if语句实现背景色切换”,内容详细,步骤清晰,细节处理妥当,希望这篇“怎么使用Javascript的if语句实现背景色切换”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习...
    99+
    2023-07-06
  • CSS怎么改变网页中鼠标选中文字背景颜色
    本篇内容主要讲解“CSS怎么改变网页中鼠标选中文字背景颜色”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS怎么改变网页中鼠标选中文字背景颜色”吧!一个不是那...
    99+
    2024-04-02
  • AngularJs如何实现点击状态值改变背景色
    这篇文章主要介绍AngularJs如何实现点击状态值改变背景色,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!实例如下://更改边框颜色的代码  $("#...
    99+
    2024-04-02
  • 如何实现在shell或者perl中改变字体或背景的颜色
    本篇内容介绍了“如何实现在shell或者perl中改变字体或背景的颜色”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!在shell下提到终端的...
    99+
    2023-06-09
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作