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中的this绑定介绍
Sep 22 Javascript
模拟select的代码
Oct 19 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
Aug 12 Javascript
如何学习Javascript入门指导
Nov 01 Javascript
jQuery瀑布流插件Wookmark使用实例
Apr 02 Javascript
百度判断手机终端并自动跳转js代码及使用实例
Jun 11 Javascript
JavaScript多并发问题如何处理
Oct 28 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
Apr 06 Javascript
Angular4 中常用的指令入门总结
Jun 12 Javascript
利用Vue2.x开发实现JSON树的方法
Jan 04 Javascript
Bootstrap-table自定义可编辑每页显示记录数
Sep 07 Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
Oct 12 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
初品cakephp 入门基础
2012/02/16 PHP
PHP 中关于ord($str)&amp;gt;0x80的详细说明
2012/09/23 PHP
基于php下载文件的详解
2013/06/02 PHP
PHP自动重命名文件实现方法
2014/11/04 PHP
才发现的超链接js导致网页中GIF动画停止的解决方法
2007/11/02 Javascript
jquery ui dialog里调用datepicker的问题
2009/08/06 Javascript
jQuery源码分析-01总体架构分析
2011/11/14 Javascript
用js调用迅雷下载代码的二种方法
2013/04/15 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
2016/05/27 Javascript
jquery mobile界面数据刷新的实现方法
2016/05/28 Javascript
JavaScript SHA1加密算法实现详细代码
2016/10/06 Javascript
JavaScript实现Java中Map容器的方法
2016/10/09 Javascript
jquery replace方法去空格
2017/05/08 jQuery
JS触摸与手势事件详解
2017/05/09 Javascript
jquery 获取索引值在一定范围的列表方法
2018/01/25 jQuery
angular将html代码输出为内容的实例
2018/09/30 Javascript
VUE基于NUXT的SSR 服务端渲染
2018/11/30 Javascript
TypeScript开发Node.js程序的方法
2019/04/30 Javascript
JavaScript实现动态留言板
2020/03/16 Javascript
独特的python循环语句
2016/11/20 Python
python email smtplib模块发送邮件代码实例
2018/04/26 Python
Python全局变量与局部变量区别及用法分析
2018/09/03 Python
python实现在图片上画特定大小角度矩形框
2018/10/24 Python
python 调用有道api接口的方法
2019/01/03 Python
python集合常见运算案例解析
2019/10/17 Python
Python字节单位转换实例
2019/12/05 Python
Pytorch自己加载单通道图片用作数据集训练的实例
2020/01/18 Python
基于SQLAlchemy实现操作MySQL并执行原生sql语句
2020/06/10 Python
PyCharm设置注释字体颜色以及是否倾斜的操作
2020/09/16 Python
小橄榄树:Le Petit Olivier
2018/04/23 全球购物
幼儿园教师工作感言
2014/02/15 职场文书
学习2014年全国两会心得体会
2014/03/12 职场文书
工作作风整顿个人剖析材料
2014/10/11 职场文书
2015暑期社会实践调查报告
2015/07/14 职场文书
为什么在foreach循环中JAVA集合不能添加或删除元素
2021/06/11 Java/Android
CSS的calc函数用法小结
2022/06/25 HTML / CSS