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 相关文章推荐
FF IE兼容性的修改小结
Sep 02 Javascript
jQuery DOM操作小结与实例
Jan 07 Javascript
初识javascript 文档碎片
Jul 13 Javascript
JavaScript 一道字符串分解的题目
Aug 03 Javascript
ie6下png图片背景不透明的解决办法使用js实现
Jan 11 Javascript
Js-$.extend扩展方法使方法参数更灵活
Jan 15 Javascript
将两个div左右并列显示并实现点击标题切换内容
Oct 22 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
Dec 05 Javascript
JavaScript Date 知识浅析
Jan 29 Javascript
js中apply与call简单用法详解
Nov 06 Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
Aug 25 Javascript
vue3.0实现点击切换验证码(组件)及校验
Nov 18 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
星际中的相关伤害
2020/03/04 星际争霸
从MySQL数据库表中取出随机数据的代码
2007/09/05 PHP
php 数组的一个悲剧?
2011/05/11 PHP
Laravel4中的Validator验证扩展用法详解
2016/07/26 PHP
PHP页面跳转实现延时跳转的方法
2016/12/10 PHP
js 单引号 传递方法
2009/06/22 Javascript
javascript下对于事件、事件流、事件触发的顺序随便说说
2010/07/17 Javascript
js对象数组按属性快速排序
2011/01/31 Javascript
一个简单的弹性返回顶部JS代码实现介绍
2013/06/09 Javascript
jquery退出each循环的写法
2014/02/26 Javascript
JavaScript实现页面5秒后自动跳转的方法
2015/04/16 Javascript
深入分析jsonp协议原理
2015/09/26 Javascript
AngularJS入门教程之ng-checked 指令详解
2016/08/01 Javascript
Bootstrap标签页(Tab)插件使用方法
2017/03/21 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
2017/03/30 jQuery
Node.js Mongodb 密码特殊字符 @的解决方法
2017/04/11 Javascript
Vue.js中的图片引用路径的方式
2017/07/28 Javascript
vue-awesome-swiper滑块插件使用方法详解
2017/11/27 Javascript
Vue监听事件实现计数点击依次增加的方法
2018/09/26 Javascript
详解vue如何使用rules对表单字段进行校验
2018/10/17 Javascript
微信小程序实现签到功能
2018/10/31 Javascript
nvm、nrm、npm 安装和使用详解(小结)
2019/01/17 Javascript
ES6 let和const定义变量与常量的应用实例分析
2019/06/27 Javascript
vue实现简单跑马灯效果
2020/05/25 Javascript
vue中是怎样监听数组变化的
2020/10/24 Javascript
浅谈Vue使用Elementui修改默认的最快方法
2020/12/05 Vue.js
three.js显示中文字体与tween应用详析
2021/01/04 Javascript
在Pycharm中将pyinstaller加入External Tools的方法
2019/01/16 Python
django商品分类及商品数据建模实例详解
2020/01/03 Python
阿迪达斯香港官网:adidas香港
2019/11/09 全球购物
Vuori官网:运动服装的终级表现
2021/01/27 全球购物
暑期培训随笔感言
2014/03/10 职场文书
农民工讨薪标语
2014/06/26 职场文书
个人学习群众路线心得体会
2014/11/05 职场文书
创卫工作总结2015
2015/04/22 职场文书
Pytorch中的学习率衰减及其用法详解
2021/06/05 Python