js随机生成网页背景颜色的方法
作者:bea
本文实例讲述了js随机生成网页背景颜色的方法。分享给大家供大家参考。具体实现方法如下: 代码如下: <HTML> <HEAD> <TITLE>随机生成网页背景颜色的JS特效</TITLE> <STYLE> .30pt{font-size:30pt;color:#de3076} </STYLE> <SCRIPT LANGUAGE="JavaScript"> <!--
本文实例讲述了js随机生成网页背景颜色的方法。分享给大家供大家参考。具体实现方法如下:
代码如下:
<HTML>
<HEAD>
<TITLE>随机生成网页背景颜色的JS特效</TITLE>
<STYLE>
.30pt{font-size:30pt;color:#de3076}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
color=new Array("0","3","6","9","C","F");
speed=250;
document.bgColor="FFFFFF";
bg=new Array("FFFFFF","FFFFFF","FFFFFF");
function begin() {
document.form.col1.value=" X "; document.form.col2.value=" X ";
document.form.col3.value=" X "; i=0; roll(speed);
}
function roll(speedB) //轮子滚动
{
if (document.form.col1.value==" X ") {
document.form.c1.value=document.form.b1.value;
document.form.b1.value=document.form.a1.value;
document.form.a1.value=
color[Math.round(Math.random()*10)%6]+
color[Math.round(Math.random()*10)%6]; //利用随机函数产生轮子上的颜色值
}
if (document.form.col2.value==" X ") {
document.form.c2.value=document.form.b2.value;
document.form.b2.value=document.form.a2.value;
document.form.a2.value=
color[Math.round(Math.random()*10)%6]+
color[Math.round(Math.random()*10)%6];
}
if (document.form.col3.value==" X ") {
document.form.c3.value=document.form.b3.value;
document.form.b3.value=document.form.a3.value;
document.form.a3.value=
color[Math.round(Math.random()*10)%6]+
color[Math.round(Math.random()*10)%6];
}
setTimeout("roll("+speedB+")",speedB);
}
function stop(col) //轮子停止滚动
{
if (col==1) {document.form.col1.value=" ";i++;}
if (col==2) {document.form.col2.value=" ";i++;}
if (col==3) {document.form.col3.value=" ";i++;}
if (i==3) {
bg[0]=document.form.a1.value+
document.form.a2.value+
document.form.a3.value;
bg[1]=document.form.b1.value+
document.form.b2.value+
document.form.b3.value;
bg[2]=document.form.c1.value+
document.form.c2.value+
document.form.c3.value;
speedB=500000;roll(speedB);
}
}
function view(letter) //颜色预览
{
document.bgColor=bg[letter];
document.form.color.value="#"+bg[letter];
}
-->
</script>
</head>
<center>
<br><br><br><br>
<form name="form">
<table cellpadding=2 border=1>
<tr><td align=center>
<input type=text name="a1" size=3 onFocus="this.blur()" value=" ">
<input type=text name="a2" size=3 onFocus="this.blur()" value=" ">
<input type=text name="a3" size=3 onFocus="this.blur()" value=" ">
<input type=button onClick="view(0)" value="预览"><br>
<input type=text name="b1" size=3 onFocus="this.blur()" value=" ">
<input type=text name="b2" size=3 onFocus="this.blur()" value=" ">
<input type=text name="b3" size=3 onFocus="this.blur()" value=" ">
<input type=button onClick="view(1)" value="预览"><br>
<input type=text name="c1" size=3 onFocus="this.blur()" value=" ">
<input type=text name="c2" size=3 onFocus="this.blur()" value=" ">
<input type=text name="c3" size=3 onFocus="this.blur()" value=" ">
<input type=button onClick="view(2)" value="预览"><br>
<input type=button onClick="stop(1)" value=" X " name="col1">
<input type=button onClick="stop(2)" value=" X " name="col2">
<input type=button onClick="stop(3)" value=" X " name="col3">
</td>
<td valign=middle align=center>
<input type=button onClick="begin()" value="启动!"><p>
<table bgcolor=FFFFFF border=1 cellspacing=0>
<tr><td align=center valign=middle>按"X" 轮子停止转动...<p>
BG Color = <input type=text size=7 value="#FFFFFF" name=color>
</td></tr>
</table>
</td></tr>
</table>
</form>
</center>
<table class=30pt>
<tr><td>颜色的随机产生
</tr><tr><td>按下启动按钮,右边的三排轮子开始滚动
</tr><tr><td>按下三个X按钮颜色值定下来
</tr><tr><td>按下预览按钮可看颜色效果
</tr>
</table><p>
</BODY>
</HTML>
希望本文所述对大家的javascript程序设计有所帮助。
有用 | 无用
代码如下:
<HTML>
<HEAD>
<TITLE>随机生成网页背景颜色的JS特效</TITLE>
<STYLE>
.30pt{font-size:30pt;color:#de3076}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
color=new Array("0","3","6","9","C","F");
speed=250;
document.bgColor="FFFFFF";
bg=new Array("FFFFFF","FFFFFF","FFFFFF");
function begin() {
document.form.col1.value=" X "; document.form.col2.value=" X ";
document.form.col3.value=" X "; i=0; roll(speed);
}
function roll(speedB) //轮子滚动
{
if (document.form.col1.value==" X ") {
document.form.c1.value=document.form.b1.value;
document.form.b1.value=document.form.a1.value;
document.form.a1.value=
color[Math.round(Math.random()*10)%6]+
color[Math.round(Math.random()*10)%6]; //利用随机函数产生轮子上的颜色值
}
if (document.form.col2.value==" X ") {
document.form.c2.value=document.form.b2.value;
document.form.b2.value=document.form.a2.value;
document.form.a2.value=
color[Math.round(Math.random()*10)%6]+
color[Math.round(Math.random()*10)%6];
}
if (document.form.col3.value==" X ") {
document.form.c3.value=document.form.b3.value;
document.form.b3.value=document.form.a3.value;
document.form.a3.value=
color[Math.round(Math.random()*10)%6]+
color[Math.round(Math.random()*10)%6];
}
setTimeout("roll("+speedB+")",speedB);
}
function stop(col) //轮子停止滚动
{
if (col==1) {document.form.col1.value=" ";i++;}
if (col==2) {document.form.col2.value=" ";i++;}
if (col==3) {document.form.col3.value=" ";i++;}
if (i==3) {
bg[0]=document.form.a1.value+
document.form.a2.value+
document.form.a3.value;
bg[1]=document.form.b1.value+
document.form.b2.value+
document.form.b3.value;
bg[2]=document.form.c1.value+
document.form.c2.value+
document.form.c3.value;
speedB=500000;roll(speedB);
}
}
function view(letter) //颜色预览
{
document.bgColor=bg[letter];
document.form.color.value="#"+bg[letter];
}
-->
</script>
</head>
<center>
<br><br><br><br>
<form name="form">
<table cellpadding=2 border=1>
<tr><td align=center>
<input type=text name="a1" size=3 onFocus="this.blur()" value=" ">
<input type=text name="a2" size=3 onFocus="this.blur()" value=" ">
<input type=text name="a3" size=3 onFocus="this.blur()" value=" ">
<input type=button onClick="view(0)" value="预览"><br>
<input type=text name="b1" size=3 onFocus="this.blur()" value=" ">
<input type=text name="b2" size=3 onFocus="this.blur()" value=" ">
<input type=text name="b3" size=3 onFocus="this.blur()" value=" ">
<input type=button onClick="view(1)" value="预览"><br>
<input type=text name="c1" size=3 onFocus="this.blur()" value=" ">
<input type=text name="c2" size=3 onFocus="this.blur()" value=" ">
<input type=text name="c3" size=3 onFocus="this.blur()" value=" ">
<input type=button onClick="view(2)" value="预览"><br>
<input type=button onClick="stop(1)" value=" X " name="col1">
<input type=button onClick="stop(2)" value=" X " name="col2">
<input type=button onClick="stop(3)" value=" X " name="col3">
</td>
<td valign=middle align=center>
<input type=button onClick="begin()" value="启动!"><p>
<table bgcolor=FFFFFF border=1 cellspacing=0>
<tr><td align=center valign=middle>按"X" 轮子停止转动...<p>
BG Color = <input type=text size=7 value="#FFFFFF" name=color>
</td></tr>
</table>
</td></tr>
</table>
</form>
</center>
<table class=30pt>
<tr><td>颜色的随机产生
</tr><tr><td>按下启动按钮,右边的三排轮子开始滚动
</tr><tr><td>按下三个X按钮颜色值定下来
</tr><tr><td>按下预览按钮可看颜色效果
</tr>
</table><p>
</BODY>
</HTML>
希望本文所述对大家的javascript程序设计有所帮助。
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- js实现有时间限制消失的图片方法
- js用拖动滑块来控制图片大小的方法
- javascript中局部变量和全局变量的区别详解
- 对比分析AngularJS中的$http.post与jQuery.post的区别
- JavaScript中Function详解
- JS实现图片产生波纹一样flash效果的方法
- js实现鼠标触发图片抖动效果的方法
- javascript实现当前页导航激活的方法
- jquery 根据name名获取元素的value值
- jQuery使用元素属性attr赋值详解
- jquery实现公告翻滚效果
- JS+CSS实现淡入式焦点图片幻灯切换效果的方法
- JS+CSS实现模仿浏览器网页字符查找功能的方法
- js+CSS实现弹出居中背景半透明div层的方法
- js使用post 方式打开新窗口
- JS仿Windows开机启动Loading进度条的方法
- JS实现跟随鼠标闪烁转动色块的方法
- javascript中typeof操作符和constucor属性检测
- JS实现网页滚动条感应鼠标变色的方法