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 清空form表单中某种元素的值
Dec 26 Javascript
基于MooTools的很有创意的滚动条时钟动画
Nov 14 Javascript
JQuery中form验证出错信息的查看方法
Oct 08 Javascript
node.js中的path.isAbsolute方法使用说明
Dec 08 Javascript
jQuery中DOM树操作之复制元素的方法
Jan 23 Javascript
浅谈jQuery双事件多重加载的问题
Oct 05 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
Nov 25 Javascript
Vue2学习笔记之请求数据交互vue-resource
Feb 23 Javascript
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
微信小程序文章详情页面实现代码
Sep 10 Javascript
layui 数据表格复选框实现单选功能的例子
Sep 19 Javascript
javascript实现移动端轮播图
Dec 09 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
javascript 小型动画组件与实现代码
2010/06/02 PHP
PHP array 的加法操作代码
2010/07/24 PHP
php强制文件下载而非在浏览器打开的自定义函数分享
2014/05/08 PHP
Yii快速入门经典教程
2015/12/28 PHP
laravel框架模板之公共模板、继承、包含实现方法分析
2019/08/30 PHP
Web层改进II-用xmlhttp 无声息提交复杂表单
2007/01/22 Javascript
jQuery 使用手册(四)
2009/09/23 Javascript
dwz 如何去掉ajaxloading具体代码
2013/05/22 Javascript
jQuery中[attribute=value]选择器用法实例
2014/12/31 Javascript
JavaScript中实现map功能代码分享
2015/06/11 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
2015/11/24 Javascript
学习vue.js条件渲染
2016/12/03 Javascript
js 判断数据类型的几种方法
2017/01/13 Javascript
在vue中多次调用同一个定义全局变量的实例
2018/09/25 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
2019/06/12 Javascript
[00:58]2016年国际邀请赛勇士令状宣传片
2016/06/01 DOTA
使用Python的Supervisor进行进程监控以及自动启动
2014/05/29 Python
复习Python中的字符串知识点
2015/04/14 Python
对numpy中的数组条件筛选功能详解
2018/07/02 Python
详解Numpy中的数组拼接、合并操作(concatenate, append, stack, hstack, vstack, r_, c_等)
2019/05/27 Python
python模拟预测一下新型冠状病毒肺炎的数据
2020/02/01 Python
pytorch随机采样操作SubsetRandomSampler()
2020/07/07 Python
python实现KNN近邻算法
2020/12/30 Python
CSS3实现文字波浪线效果示例代码
2016/11/20 HTML / CSS
美国最古老的精致书写工具制造商:A.T. Cross(高仕)
2018/01/30 全球购物
应届生服装设计自我评价
2013/09/20 职场文书
行政经理的岗位职责
2013/11/23 职场文书
经济信息系毕业生自荐信
2014/06/02 职场文书
工地标语大全
2014/06/18 职场文书
竞选大队干部演讲稿
2014/09/11 职场文书
前台接待岗位职责
2015/02/03 职场文书
法务专员岗位职责
2015/02/14 职场文书
班主任自我评价范文
2015/03/11 职场文书
病假证明模板
2015/06/19 职场文书
服务行业标语口号
2015/12/26 职场文书
解决vue $http的get和post请求跨域问题
2021/06/07 Vue.js