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 相关文章推荐
禁止IE用右键的JS代码
Dec 30 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
Jan 19 Javascript
input输入框内容实时监测(附代码)
Aug 15 Javascript
Angular弹出模态框的两种方式
Oct 19 Javascript
在vue中封装可复用的组件方法
Mar 01 Javascript
浅谈mvvm-simple双向绑定简单实现
Apr 18 Javascript
Vue 中axios配置实例详解
Jul 27 Javascript
js实现动态增加文件域表单功能
Oct 22 Javascript
关于js陀螺仪的理解分析
Apr 11 Javascript
微信小程序云函数使用mysql数据库过程详解
Aug 07 Javascript
微信小程序服务器日期格式化问题
Jan 07 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
May 29 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面向对象的方法重载两种版本比较
2008/09/08 PHP
php实现修改新闻时删除图片的方法
2015/05/12 PHP
解决php表单重复提交实现方法
2015/09/29 PHP
详解thinkphp实现excel数据的导入导出(附完整案例)
2016/12/29 PHP
thinkPHP简单导入和使用阿里云OSSsdk的方法
2017/03/15 PHP
laravel 解决paginate查询多个字段报错的问题
2019/10/22 PHP
(JS实现)MapBar中坐标的加密和解密的脚本
2007/05/16 Javascript
JS DOM 操作实现代码
2010/08/01 Javascript
Prototype源码浅析 String部分(二)
2012/01/16 Javascript
Javascript基础 函数“重载” 详细介绍
2013/10/25 Javascript
调用jQuery滑出效果时闪烁的解决方法
2014/03/27 Javascript
jquery实现公告翻滚效果
2015/02/27 Javascript
jquery预加载图片的方法
2015/05/27 Javascript
Dojo获取下拉框的文本和值实例代码
2016/05/27 Javascript
bootstrap中的 form表单属性role=&quot;form&quot;的作用详解
2017/01/20 Javascript
详解使用nodeJs安装Vue-cli
2017/05/17 NodeJs
微信小程序图片宽100%显示并且不变形
2017/06/21 Javascript
浅谈vue中慎用style的scoped属性
2017/11/28 Javascript
vue-cli脚手架-bulid下的配置文件
2018/03/27 Javascript
Vue实现简易翻页效果源码分享
2018/11/08 Javascript
[01:27]2014DOTA2展望TI 剑指西雅图IG战队专访
2014/06/30 DOTA
[01:52]深扒TI7聊天轮盘语音出处7
2017/05/11 DOTA
Django使用uwsgi部署时的配置以及django日志文件的处理方法
2019/08/30 Python
pytorch 实现打印模型的参数值
2019/12/30 Python
python_matplotlib改变横坐标和纵坐标上的刻度(ticks)方式
2020/05/16 Python
在python下实现word2vec词向量训练与加载实例
2020/06/09 Python
Airbnb爱彼迎官网:成为爱彼迎房东,赚取收入
2019/03/14 全球购物
Pamela Love官网:纽约设计师Pamela Love的精美、时尚和穿孔珠宝
2020/10/19 全球购物
经贸日语专业个人求职信
2013/12/13 职场文书
大学生开西餐厅创业计划书
2014/02/01 职场文书
承诺书格式范文
2014/06/03 职场文书
初三英语教学计划
2015/01/23 职场文书
学生会主席任命书
2015/09/21 职场文书
AI:如何训练机器学习的模型
2021/04/16 Python
Python常用配置文件ini、json、yaml读写总结
2021/07/09 Python
Java tomcat手动配置servlet详解
2021/11/27 Java/Android