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


Posted in Javascript onFebruary 26, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
jQuery使用andSelf()来包含之前的选择集
May 19 Javascript
jquery中append()与appendto()用法分析
Nov 14 Javascript
javascript实现汉字转拼音代码分享
Apr 20 Javascript
学习JavaScript设计模式之代理模式
Jan 12 Javascript
JS控制TreeView的结点选择
Nov 11 Javascript
解析AngularJS中get请求URL出现的跨域问题
Dec 01 Javascript
vue图片加载与显示默认图片实例代码
Mar 16 Javascript
学习React中ref的两个demo示例
Aug 14 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
May 27 Javascript
利用不到200行代码写一款属于你自己的js类库
Jul 08 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
Sep 18 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
May 27 Javascript
jQuery简单实现隐藏以及显示特效
Feb 26 #Javascript
最流行的Node.js精简型和全栈型开发框架介绍
Feb 26 #Javascript
jQuery对象初始化的传参方式
Feb 26 #Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
Feb 26 #Javascript
JS实现很酷的水波文字特效实例
Feb 26 #Javascript
jQuery中slideUp 和 slideDown 的点击事件
Feb 26 #Javascript
jQuery实现移动 和 渐变特效的点击事件
Feb 26 #Javascript
You might like
php中数据的批量导入(csv文件)
2006/10/09 PHP
简单的页面缓冲技术
2006/10/09 PHP
php5新改动之短标记启用方法
2008/09/11 PHP
PHP连接sql server 2005环境配置及问题解决
2014/08/08 PHP
QQ登录简单实现代码
2021/03/09 Javascript
jquery中实现标签切换效果的代码
2011/03/01 Javascript
javascript获取所有同类checkbox选项(实例代码)
2013/11/07 Javascript
jquery.form.js用法之清空form的方法
2014/03/07 Javascript
nodejs实现黑名单中间件设计
2014/06/17 NodeJs
jQuery实现鼠标划过添加和删除class的方法
2015/06/26 Javascript
jquery实现的3D旋转木马特效代码分享
2015/08/25 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
2016/07/18 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
2016/11/04 Javascript
在node中如何使用 ES6
2017/04/22 Javascript
微信小程序实现简单input正则表达式验证功能示例
2017/11/30 Javascript
3分钟了解vue数据劫持的原理实现
2019/05/01 Javascript
JS实现拼图游戏
2021/01/29 Javascript
python在Windows8下获取本机ip地址的方法
2015/03/14 Python
解决Python传递中文参数的问题
2015/08/04 Python
Python的Flask框架的简介和安装方法
2015/11/13 Python
Python3中简单的文件操作及两个简单小实例分享
2017/06/18 Python
Python yield与实现方法代码分析
2018/02/06 Python
Pandas 对Dataframe结构排序的实现方法
2018/04/10 Python
python应用文件读取与登录注册功能
2019/09/23 Python
基于Python实现大文件分割和命名脚本过程解析
2019/09/29 Python
pytorch:model.train和model.eval用法及区别详解
2020/02/20 Python
MATLAB数学建模之画图汇总
2020/07/16 Python
Python利用Pillow(PIL)库实现验证码图片的全过程
2020/10/04 Python
matplotlib 使用 plt.savefig() 输出图片去除旁边的空白区域
2021/01/05 Python
加拿大最大的五金、家居装修和园艺产品商店:RONA
2017/01/27 全球购物
世界最大的票务市场:viagogo
2017/02/16 全球购物
缅甸网上购物:Shop.com.mm
2017/12/05 全球购物
加拿大时装零售商:Influence U
2018/12/22 全球购物
业务员管理制度范本
2015/08/06 职场文书
面试分析分布式架构Redis热点key大Value解决方案
2022/03/13 Redis
springboot集成redis存对象乱码的问题及解决
2022/06/16 Java/Android