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 相关文章推荐
js获取单元格自定义属性值的代码(IE/Firefox)
Apr 05 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
Sep 02 Javascript
JS实现超精简响应鼠标显示二级菜单代码
Sep 12 Javascript
微信小程序 window_x64环境搭建
Sep 30 Javascript
javascript构造函数以及原型对象的理解
Jan 13 Javascript
jQuery Pagination分页插件使用方法详解
Feb 28 Javascript
在使用JSON格式处理数据时应该注意的问题小结
May 20 Javascript
详解如何在项目中使用jest测试react native组件
Feb 09 Javascript
javascript与PHP动态往类中添加方法对比
Mar 21 Javascript
记录vue项目中遇到的一点小问题
May 14 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
Oct 15 Javascript
vue项目,代码提交至码云,iconfont的用法说明
Jul 30 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配置心得包含MYSQL5乱码解决
2006/11/20 PHP
PHP中数字检测is_numeric与ctype_digit的区别介绍
2012/10/04 PHP
php结合安卓客户端实现查询交互实例
2015/05/05 PHP
Javascript代码在页面加载时的执行顺序介绍
2013/05/03 Javascript
在每个匹配元素的外部插入新元素的方法
2013/12/20 Javascript
JavaScript二维数组实现的省市联动菜单
2014/05/08 Javascript
jQuery中:checked选择器用法实例
2015/01/04 Javascript
JavaScript列表框listbox全选和反选的实现方法
2015/03/18 Javascript
深入浅析knockout源码分析之订阅
2016/07/12 Javascript
购物车前端开发(jQuery和bootstrap3)
2016/08/27 Javascript
JavaScript 冒泡排序和选择排序的实现代码
2016/09/03 Javascript
chrome浏览器如何断点调试异步加载的JS
2016/09/05 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
2016/12/18 Javascript
VueJs 搭建Axios接口请求工具
2017/11/20 Javascript
详解Require.js与Sea.js的区别
2018/08/05 Javascript
node.js使用redis储存session的方法
2018/09/26 Javascript
JS实现的tab页切换效果完整示例
2018/12/18 Javascript
详解写好JS条件语句的5条守则
2019/02/28 Javascript
python基础教程之基本数据类型和变量声明介绍
2014/08/29 Python
简述Python中的进程、线程、协程
2016/03/18 Python
在Python3 numpy中mean和average的区别详解
2019/08/24 Python
python itsdangerous模块的具体使用方法
2020/02/17 Python
Python爬虫Scrapy框架CrawlSpider原理及使用案例
2020/11/20 Python
Kaufmann Mercantile官网:家居装饰、配件、户外及更多
2018/09/28 全球购物
可靠的数据流传输TCP
2016/03/15 面试题
linux面试题参考答案(11)
2012/05/01 面试题
护士实习自我鉴定
2013/10/22 职场文书
财务出纳员岗位职责
2013/11/26 职场文书
党的群众路线教育实践活动对照检查材料(四风)
2014/09/27 职场文书
领导干部作风整顿个人剖析材料
2014/10/11 职场文书
红色经典观后感
2015/06/18 职场文书
师德师风心得体会(2016精选篇)
2016/01/12 职场文书
2016学习医德医风心得体会
2016/01/25 职场文书
2016年“11.11”光棍节活动总结
2016/04/05 职场文书
nginx如何将http访问的网站改成https访问
2021/03/31 Servers
Apache Pulsar集群搭建部署详细过程
2022/02/12 Servers