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 相关文章推荐
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
Jun 05 Javascript
AngularJS入门教程之Hello World!
Dec 06 Javascript
javascript面向对象之定义成员方法实例分析
Jan 13 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
Aug 06 Javascript
AngularJS轻松实现双击排序的功能
Aug 30 Javascript
Node.JS中事件轮询(Event Loop)的解析
Feb 25 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
Jul 28 Javascript
Angularjs中ng-repeat的简单实例
Aug 25 Javascript
10 种最常见的 Javascript 错误(频率最高)
Feb 08 Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
May 02 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
Feb 27 Javascript
js实现图片3D轮播效果
Sep 21 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中实现进程间通讯
2006/10/09 PHP
php操作excel文件 基于phpexcel
2010/07/02 PHP
php 文件上传实例代码
2012/04/19 PHP
PHP+MYSQL会员系统的开发实例教程
2014/08/23 PHP
PHP用反撇号执行外部命令
2015/04/14 PHP
php+ajax实现无刷新的新闻留言系统
2020/12/21 PHP
php遍历替换目录下文件指定内容的方法
2016/11/10 PHP
PHP设计模式之装饰器模式定义与用法详解
2018/04/02 PHP
不得不分享的JavaScript常用方法函数集(下)
2015/12/25 Javascript
AngularJS基础 ng-switch 指令简单示例
2016/08/03 Javascript
网络传输协议(http协议)
2016/11/18 Javascript
node.JS md5加密中文与php结果不一致的解决方法
2017/05/05 Javascript
Angular.js实现动态加载组件详解
2017/05/28 Javascript
jQuery第一次运行页面默认触发点击事件的实例
2018/01/10 jQuery
JavaScript实现区块链
2018/03/14 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
2019/02/26 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
2019/05/10 Javascript
javascript canvas实现简易时钟例子
2020/09/05 Javascript
使用Python中PDB模块中的命令来调试Python代码的教程
2015/03/30 Python
常见python正则用法的简单实例
2016/06/21 Python
python实现数据库跨服务器迁移
2018/04/12 Python
详解pandas安装若干异常及解决方案总结
2019/01/10 Python
pandas factorize实现将字符串特征转化为数字特征
2019/12/19 Python
Python3.7下安装pyqt5的方法步骤(图文)
2020/05/12 Python
运动服饰每月订阅盒:Ellie
2018/04/29 全球购物
美国单身专业人士在线约会网站:EliteSingles
2019/03/19 全球购物
Osklen官方在线商店:巴西服装品牌
2019/04/25 全球购物
人力资源管理毕业生自荐信
2013/11/21 职场文书
大学毕业后的十年规划
2014/01/07 职场文书
运动会广播稿400字
2014/01/25 职场文书
机械设计及其自动化求职推荐信
2014/02/17 职场文书
环保公益广告语
2014/03/13 职场文书
社区活动总结范文
2015/05/07 职场文书
西安事变观后感
2015/06/12 职场文书
2016年第二十五次全国助残日活动总结
2016/04/01 职场文书
Python FuzzyWuzzy实现模糊匹配
2022/04/28 Python