脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js随机生成网页背景颜色

js随机生成网页背景颜色的方法

 更新时间：2015年02月26日 11:58:44   作者：代码家园  
这篇文章主要介绍了js随机生成网页背景颜色的方法,涉及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">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
         </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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • javascript中打印当前的时间实现思路及代码

    javascript中打印当前的时间实现思路及代码

    打印当前的时间的方法有很多，在本文为大家详细介绍下使用javascript是如何做到的，具体实现如下，感兴趣的朋友可以参考下
    2013-12-12
  • 根据表格中的某一列进行排序的javascript代码

    根据表格中的某一列进行排序的javascript代码

    根据表格中的某一列进行排序的实现方法有很多，下面为大家介绍下如何使用js来简单实现下，需要的朋友不要错过
    2013-11-11
  • JavaScript实现私有属性的几种方式小结

    JavaScript实现私有属性的几种方式小结

    在JavaScript中,私有属性是指只能在对象内部访问的属性,外部无法直接访问,JavaScript并没有提供官方的私有属性的支持,但可以通过一些技巧来模拟实现私有属性,所以本文给大家总结了JavaScript实现私有属性的几种方式,需要的朋友可以参考下
    2024-04-04
  • JavaScript+Java实现HTML页面转为PDF文件保存的方法

    JavaScript+Java实现HTML页面转为PDF文件保存的方法

    借助iText这个Java库,我们可以将HTML文件保存为图片文件进而转换成PDF格式,接下来就来具体看下JavaScript+Java实现HTML页面转为PDF文件保存的方法
    2016-05-05
  • Bootstrap~多级导航(级联导航)的实现效果【附代码】

    Bootstrap~多级导航(级联导航)的实现效果【附代码】

    下面小编就为大家分享一篇Bootstrap~多级导航(级联导航)的实现效果【附代码】。小编觉得挺不错。希望对大家有所帮助。一起跟随小编过来看看吧
    2016-03-03
  • JavaScript避免嵌套代码浅析

    JavaScript避免嵌套代码浅析

    这篇文章主要介绍了JavaScript避免嵌套代码，很多时候需要编写的逻辑本身就很恶心, 乍看之下, 堆页岩般的判定嵌套里似乎每一层都是必要的, 也只能说尽量让它看起来不那么恶心
    2023-02-02
  • Js实现自定义右键行为

    Js实现自定义右键行为

    本文主要给大家分享的是一则javascript实现的自定义右键行为的小技巧，非常的简单实用，有相同需求的小伙伴可以参考下。
    2015-03-03
  • 原生js的弹出层且其内的窗口居中

    原生js的弹出层且其内的窗口居中

    弹出层内含窗口且居中，在本例使用原生js来实现，与网上的有所不一样，大家不妨参考下
    2014-05-05
  • JavaScript 替换所有匹配内容及正则替换方法

    JavaScript 替换所有匹配内容及正则替换方法

    这篇文章主要介绍了JavaScript 替换所有匹配内容，文中给大家提到了使用正则表达式替换方法，通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2020-02-02
  • JS+CSS实现可拖动的弹出提示框

    JS+CSS实现可拖动的弹出提示框

    这篇文章主要介绍了JS+CSS实现可拖动的弹出提示框,涉及针对鼠标事件及html元素的操作技巧,非常具有实用价值,需要的朋友可以参考下
    2015-02-02

最新评论