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 相关文章推荐
DIY jquery plugin - tabs标签切换实现代码
Dec 11 Javascript
jquery ajax post提交数据乱码
Nov 05 Javascript
JQuery包裹DOM节点的方法
Jun 11 Javascript
JavaScript 冒泡排序和选择排序的实现代码
Sep 03 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
Oct 19 Javascript
vue中遇到的坑之变化检测问题(数组相关)
Oct 13 Javascript
BACKBONE.JS 简单入门范例
Oct 17 Javascript
React Native日期时间选择组件的示例代码
Apr 27 Javascript
JS实现判断图片是否加载完成的方法分析
Jul 31 Javascript
深入探讨JavaScript的最基本部分之执行上下文
Feb 12 Javascript
小程序如何写动态标签的实现方法
Feb 05 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
Jun 25 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守护另一个php进程的例子
2015/02/13 PHP
php实现头像上传预览功能
2017/04/27 PHP
javascript的函数、创建对象、封装、属性和方法、继承
2011/03/10 Javascript
JavaScript插件化开发教程 (一)
2015/01/27 Javascript
Jquery全选与反选点击执行一次的解决方案
2015/08/14 Javascript
JavaScript中三种异步上传文件方式
2016/03/06 Javascript
在JavaScript中对HTML进行反转义详解
2016/05/18 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
2016/07/22 Javascript
浅谈Cookie的生命周期问题
2016/08/02 Javascript
jquery实现tab键进行选择后enter键触发click行为
2017/03/29 jQuery
JavaScript与Java正则表达式写法的区别介绍
2017/08/15 Javascript
使用clipboard.js实现复制功能的示例代码
2017/10/16 Javascript
Angular4绑定html内容出现警告的处理方法
2017/11/03 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
2018/01/09 Javascript
angular动态表单制作
2018/02/23 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
2018/05/03 jQuery
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
2018/08/10 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
2020/04/07 Javascript
python函数返回多个值的示例方法
2013/12/04 Python
python中readline判断文件读取结束的方法
2014/11/08 Python
python中numpy的矩阵、多维数组的用法
2018/02/05 Python
python 将json数据提取转化为txt的方法
2018/10/26 Python
softmax及python实现过程解析
2019/09/30 Python
python 日志 logging模块详细解析
2020/03/31 Python
Python实现查找数据库最接近的数据
2020/06/08 Python
马克华菲官方商城:Mark Fairwhale
2016/09/04 全球购物
俄罗斯美容和健康网上商店:Созвездие Красоты
2019/07/23 全球购物
.NET常见笔试题集
2012/12/01 面试题
最新奶茶店创业计划书
2014/01/25 职场文书
教师学习培训邀请函
2014/02/04 职场文书
建筑施工安全生产责任书
2014/07/22 职场文书
学生夜不归宿检讨书
2014/09/23 职场文书
房产公证书
2015/01/23 职场文书
初中教师德育工作总结2015
2015/05/12 职场文书
电影建国大业观后感
2015/06/01 职场文书
创业计划书之奶茶店开店方案范本!
2019/08/06 职场文书