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 Cookie 直接浏览网站分网址
Dec 08 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
Dec 28 Javascript
一个Action如何调用两个不同的方法
May 22 Javascript
学习使用jquery iScroll.js移动端滚动条插件
Mar 24 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
Dec 19 Javascript
JS仿JQuery选择器功能
Mar 08 Javascript
JS实现商品筛选功能
Aug 19 Javascript
angular+ionic返回上一页并刷新页面
Aug 08 Javascript
详解Axios 如何取消已发送的请求
Oct 20 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
Jan 04 Javascript
浅谈webpack构建工具配置和常用插件总结
May 11 Javascript
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
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
上海地方志办公室-上海电子仪表工业志
2021/03/04 无线电
使用PHP函数scandir排除特定目录
2014/06/12 PHP
JavaScript获取GridView中用户点击控件的行号,列号
2009/04/14 Javascript
jQuery ui 1.7更新小结
2009/08/15 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
2011/11/14 Javascript
js使用eval解析json(js中使用json)
2014/01/17 Javascript
直接在JS里创建JSON数据然后遍历使用
2014/07/25 Javascript
JS判断是否360安全浏览器极速内核的方法
2015/01/29 Javascript
使用AngularJS创建单页应用的编程指引
2015/06/19 Javascript
iPhone手机上搭建nodejs服务器步骤方法
2015/07/06 NodeJs
详解js私有作用域中创建特权方法
2016/01/25 Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
2016/07/22 Javascript
AngularJs ng-route路由详解及实例代码
2016/09/14 Javascript
jQuery 如何实现一个滑动按钮开关
2016/12/01 Javascript
简单实现JavaScript弹幕效果
2020/08/27 Javascript
nodeJS实现简单网页爬虫功能的实例(分享)
2017/06/08 NodeJs
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
2018/11/21 Javascript
BootstrapValidator验证用户名已存在(ajax)
2019/11/08 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
2020/11/17 Vue.js
[01:08:09]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第二局
2016/03/02 DOTA
python获取本机外网ip的方法
2015/04/15 Python
[原创]python爬虫(入门教程、视频教程)
2018/01/08 Python
Python模块WSGI使用详解
2018/02/02 Python
Python字典创建 遍历 添加等实用基础操作技巧
2018/09/13 Python
Python+OpenCV实现实时眼动追踪的示例代码
2019/11/11 Python
python 利用已有Ner模型进行数据清洗合并代码
2019/12/24 Python
Django filter动态过滤与排序实现过程解析
2020/11/26 Python
巴西最大的家具及装饰用品店:Mobly
2017/10/11 全球购物
XD健身器材:Kevlar球、Crossfit健身球
2019/03/26 全球购物
阿里巴巴英国:Alibaba英国
2019/12/11 全球购物
Athleta官网:购买女士瑜伽服、技术运动服和休闲运动服
2020/11/12 全球购物
EJB需直接实现它的业务接口或Home接口吗,请简述理由
2016/11/23 面试题
中学老师的自我评价
2013/11/07 职场文书
银行见习期自我鉴定
2014/01/29 职场文书
《匆匆》教学反思
2014/02/22 职场文书
Pyqt5将多个类组合在一个界面显示的完整示例
2021/09/04 Python