js实现点击按钮后给Div图层设置随机背景颜色的方法


Posted in Javascript onMay 06, 2015

本文实例讲述了js实现点击按钮后给Div图层设置随机背景颜色的方法。分享给大家供大家参考。具体如下:

给myDiv设置随机背景颜色,用随机颜色代码赋值给DIV的背景颜色

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312"/>
<title>js设置随机颜色 </title> 
</head>
<body>
<script type="text/javascript">
 function getcl(){
 var arr = []//定义一个空的数组
 i =0;//为while循环定义i的初始值
 C = '0123456789ABCDEF';
 //定义颜色代码的字符串
 while(i++ < 6){//循环6次
 x=Math.random()*16;
 //取0-16之间的随机数给变量x
 b=parseInt(x);//取0-16之前的整数给变量b
 c=C.substr(b,1);
 //由第b(0-16之间的整数)位开始取一个字符
 arr.push(c);
 //通过6次循环得到的随机位置取得的字符组合在一起把值给到arr这个数组
 }
 var cl = "#"+ arr.join('');
 //去掉之前数组之间的逗号,前面再加一个井号,
 //这样颜色随机的颜色代码就生成了,并且把颜色代码赋值给变量cl
 return cl;//把cl的值返回给函数getcl()
 }
document.write(cl);
 //输出cl测试一下结果
 //下面开始给div的背景颜色赋值
 function setColor(){
 //新建一个设置颜色的函数setColor
 document.getElementById("myDiv").style.backgroundColor = getcl();
 //把上面得到的随机颜色代码赋值给DIV的背景颜色
 } 
</script>
<div id="myDiv" style="width:200px;height:200px;"></div>
<input type="button" value="给myDiv设置随机背景颜色" 
onclick="setColor()" />
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
Javascript实现的分页函数
Feb 07 Javascript
关于捕获用户何时点击window.onbeforeunload的取消事件
Mar 06 Javascript
用js获取电脑信息(是使用与IE浏览器)
Jan 15 Javascript
仿百度的关键词匹配搜索示例
Sep 25 Javascript
ExtJS4如何给同一个formpanel不同的url
May 02 Javascript
用javascript关闭本窗口不弹出询问框的方法
Sep 12 Javascript
理解jquery事件冒泡
Jan 03 Javascript
javascript检测移动设备横竖屏
May 21 Javascript
防止Node.js中错误导致进程阻塞的办法
Aug 11 Javascript
微信小程序实战之运维小项目
Jan 17 Javascript
Auto.js自动收取自己和好友蚂蚁森林能量脚本
Jun 28 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
Dec 10 Javascript
JS实现CheckBox复选框全选全不选功能
May 06 #Javascript
javascript使用avalon绑定实现checkbox全选
May 06 #Javascript
js实现滑动触屏事件监听的方法
May 05 #Javascript
JS根据生日算年龄的方法
May 05 #Javascript
js改变Iframe中Src的方法
May 05 #Javascript
js网页滚动条滚动事件实例分析
May 05 #Javascript
jquery判断单选按钮radio是否选中的方法
May 05 #Javascript
You might like
PHP如何将XML转成数组
2016/04/04 PHP
文字不间断滚动(上下左右)实例代码
2013/04/21 Javascript
js动态为代码着色显示行号
2013/05/29 Javascript
jQuery设置div一直在页面顶部显示的方法
2013/10/24 Javascript
JS保留两位小数 四舍五入函数的小例子
2013/11/20 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
2015/02/03 Javascript
AngularJS基础学习笔记之控制器
2015/05/10 Javascript
深入学习jQuery Validate表单验证(二)
2016/01/18 Javascript
jquery自动补齐功能插件flexselect用法示例
2016/08/06 Javascript
全面解析Bootstrap表单样式的使用
2016/09/09 Javascript
微信小程序 教程之WXSS
2016/10/18 Javascript
浅析javaScript中的浅拷贝和深拷贝
2017/02/15 Javascript
Vue2.0用户权限控制解决方案的示例
2018/02/10 Javascript
微信小程序支付前端源码
2018/08/29 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
2018/10/19 Javascript
jquery中attr、prop、data区别与用法分析
2019/09/25 jQuery
JS使用setInterval计时器实现挑战10秒
2020/11/08 Javascript
Python语言的12个基础知识点小结
2014/07/10 Python
Python中字典的浅拷贝与深拷贝用法实例分析
2018/01/02 Python
对python-3-print重定向输出的几种方法总结
2018/05/11 Python
浅谈Python小波分析库Pywavelets的一点使用心得
2019/07/09 Python
一行Python代码过滤标点符号等特殊字符
2019/08/12 Python
Python中的list与tuple集合区别解析
2019/10/12 Python
解决django-xadmin列表页filter关联对象搜索问题
2019/11/15 Python
python中安装django模块的方法
2020/03/12 Python
python小程序之4名牌手洗牌发牌问题解析
2020/05/15 Python
keras的ImageDataGenerator和flow()的用法说明
2020/07/03 Python
python+appium+yaml移动端自动化测试框架实现详解
2020/11/24 Python
印度最大的网上花店:Ferns N Petals(鲜花、礼品和蛋糕)
2017/10/16 全球购物
美国棒球装备和用品商店:Baseball Savings
2018/06/09 全球购物
Sperry澳大利亚官网:源自美国帆船鞋创始品牌
2019/07/29 全球购物
Java基础类库面试题
2013/09/04 面试题
策划主管的工作职责
2013/11/24 职场文书
饮料业务员岗位职责
2013/12/15 职场文书
优秀党支部事迹材料
2014/01/14 职场文书
个人租房协议书
2014/11/28 职场文书