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.validate使用攻略 第一部
Jul 01 Javascript
使用js操作css实现js改变背景图片示例
Mar 10 Javascript
js使用递归解析xml
Dec 12 Javascript
简单分析javascript中的函数
Sep 10 Javascript
JS实现向iframe中表单传值的方法
Mar 24 Javascript
Angular4开发解决跨域问题详解
Aug 28 Javascript
webuploader实现上传图片到服务器功能
Aug 16 Javascript
vue服务端渲染添加缓存的方法
Sep 18 Javascript
小程序登录态管理的方法示例
Nov 13 Javascript
JS中call()和apply()的功能及用法实例分析
Jun 28 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
Jul 30 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
Jan 08 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
[EPIC] Larva vs Flash ZvT @ Crossing Field [2017-10-09]
2020/03/17 星际争霸
laravel容器延迟加载以及auth扩展详解
2015/03/02 PHP
PHP中include和require的区别实例分析
2017/05/07 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
php桥接模式应用案例分析
2019/10/23 PHP
PHP程序员简单的开展服务治理架构操作详解(三)
2020/05/14 PHP
Ajax一统天下之Dojo整合篇
2007/03/24 Javascript
JS window.opener返回父页面的应用
2009/10/24 Javascript
javascript cookie操作类的实现代码小结附使用方法
2010/06/02 Javascript
php对mongodb的扩展(初识如故)
2012/11/11 Javascript
深入理解javaScript中的事件驱动
2013/05/21 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
2014/04/08 Javascript
js使用split函数按照多个字符对字符串进行分割的方法
2015/03/20 Javascript
js获取滚动距离的方法
2015/05/30 Javascript
javascript中传统事件与现代事件
2015/06/23 Javascript
九种原生js动画效果
2015/11/11 Javascript
echarts饼图扇区添加点击事件的实例
2017/10/16 Javascript
浅谈React中的元素、组件、实例和节点
2018/02/27 Javascript
通过JS运行机制的角度说说作用域
2019/03/12 Javascript
微信头像地址失效踩坑记附带解决方案
2019/09/23 Javascript
微信小程序实现音频文件播放进度的实例代码
2020/03/02 Javascript
[00:36]DOTA2风云人物相约完美“圣”典 12月17日不见不散
2016/11/30 DOTA
Python调用命令行进度条的方法
2015/05/05 Python
python对象转字典的两种实现方式示例
2019/11/07 Python
python实现智能语音天气预报
2019/12/02 Python
Python 序列化和反序列化库 MarshMallow 的用法实例代码
2020/02/25 Python
python GUI库图形界面开发之PyQt5信号与槽事件处理机制详细介绍与实例解析
2020/03/08 Python
Python中pass的作用与使用教程
2020/11/13 Python
既然说Ruby中一切都是对象,那么Ruby中类也是对象吗
2013/01/26 面试题
酒店服务实习自我鉴定
2013/09/22 职场文书
运动会广播稿100字
2014/01/11 职场文书
解除劳动合同协议书范本
2014/04/14 职场文书
实习生评语
2014/04/26 职场文书
员工趣味活动方案
2014/08/27 职场文书
单位病假条范文
2015/08/17 职场文书
python如何读取.mtx文件
2021/04/22 Python