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 相关文章推荐
jquery与js函数冲突的两种解决方法
Sep 09 Javascript
深入探密Javascript数组方法
Jan 08 Javascript
js+canvas绘制矩形的方法
Jan 28 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
Feb 17 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
Oct 28 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
Nov 09 Javascript
Servlet实现文件上传,可多文件上传示例
Dec 05 Javascript
JavaScript优化以及前段开发小技巧
Feb 02 Javascript
微信小程序组件之srcoll-view的详解
Oct 19 Javascript
vue登录注册及token验证实现代码
Dec 14 Javascript
JS实现iframe中子父页面跨域通讯的方法分析
Mar 10 Javascript
jQuery HTML css()方法与css类实例详解
May 20 jQuery
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
浅析51个PHP处理字符串的函数
2013/08/02 PHP
php绘图之生成饼状图的方法
2015/01/24 PHP
js跳转页面方法总结
2014/01/29 Javascript
初识Node.js
2014/09/03 Javascript
基于jQuery实现选取月份插件附源码下载
2015/12/28 Javascript
AngularJS基础 ng-switch 指令简单示例
2016/08/03 Javascript
浅谈jquery上下滑动的注意事项
2016/10/13 Javascript
jquery实现焦点轮播效果
2017/02/23 Javascript
javascript 中null和undefined区分和比较
2017/04/19 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
2017/05/11 Javascript
vue项目开发中setTimeout等定时器的管理问题
2018/09/13 Javascript
微信小程序http连接访问解决方案的示例
2018/11/05 Javascript
更优雅的微信小程序骨架屏实现详解
2019/08/07 Javascript
JavaScript监听一个DOM元素大小变化
2020/04/26 Javascript
JS实现炫酷雪花飘落效果
2020/08/19 Javascript
python使用openCV遍历文件夹里所有视频文件并保存成图片
2020/01/14 Python
python3中sorted函数里cmp参数改变详解
2020/03/12 Python
jupyter notebook 增加kernel教程
2020/04/10 Python
Jupyter notebook无法导入第三方模块的解决方式
2020/04/15 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
DJI大疆德国官方商城:大疆无人机
2018/09/01 全球购物
加拿大城市本地限时优惠:Buytopia.ca
2018/09/19 全球购物
英国天然抗衰老护肤品品牌:Nakin Skin Care
2019/04/16 全球购物
通信专业个人自我鉴定
2013/10/21 职场文书
小学端午节活动方案
2014/03/13 职场文书
财务部绩效考核方案
2014/05/04 职场文书
党员活动日总结
2014/05/05 职场文书
农村党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
2015年教学工作总结
2015/04/02 职场文书
2015年高三年级组工作总结
2015/07/21 职场文书
创业计划书之餐饮
2019/09/02 职场文书
2019年英语版感谢信(8篇)
2019/09/29 职场文书
Python爬虫数据的分类及json数据使用小结
2021/03/29 Python
Java面试题冲刺第十七天--基础篇3
2021/08/07 面试题
SQL Server表分区删除详情
2021/10/16 SQL Server
【DOTA2】总决赛血虐~ XTREME GAMING vs MAGMA - OGA DOTA PIT 2022 CN
2022/04/02 DOTA