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 面向对象 function类
May 13 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
Jun 05 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
JavaScript 事件绑定及深入
Apr 13 Javascript
轻量级的原生js日历插件calendar.js使用指南
Apr 28 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
Oct 10 Javascript
Bootstrap的基本应用要点浅析
Dec 19 Javascript
防止重复发送 Ajax 请求
Feb 15 Javascript
Angular4学习笔记之新建项目的方法
Jul 18 Javascript
深入浅析Vue.js中 computed和methods不同机制
Mar 22 Javascript
vue过滤器用法实例分析
Mar 15 Javascript
three.js 如何制作魔方
Jul 31 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
人族 Terran 基本策略
2020/03/14 星际争霸
PHP带节点操作的无限分类实现方法详解
2016/11/09 PHP
PHP基于DOMDocument解析和生成xml的方法分析
2017/07/17 PHP
Laravel统计一段时间间隔的数据方法
2019/10/09 PHP
PHP检查文件是否存在,不存在自动创建及读取文件内容操作示例
2020/01/23 PHP
js的with语句使用方法
2007/09/21 Javascript
Javascript 篱式条件判断
2008/08/22 Javascript
JQuery学习笔录 简单的JQuery
2012/04/09 Javascript
javascript中注册和移除事件的4种方式
2013/03/20 Javascript
javascript判断非数字的简单例子
2013/07/18 Javascript
JS在IE下缺少标识符的错误
2014/07/23 Javascript
node.js中的fs.statSync方法使用说明
2014/12/16 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
2016/11/02 Javascript
基于javascript实现按圆形排列DIV元素(二)
2016/12/02 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
2016/12/31 Javascript
JS调用Android、Ios原生控件
2017/01/06 Javascript
JavaScript日期对象(Date)基本用法示例
2017/01/18 Javascript
Vue ElementUI之Form表单验证遇到的问题
2017/08/21 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
2018/08/24 Javascript
[03:01]2014DOTA2国际邀请赛 DC:我是核弹粉,为Burning和国土祝福
2014/07/13 DOTA
python求pi的方法
2014/10/08 Python
python实现SMTP邮件发送功能
2020/06/16 Python
Python django实现简单的邮件系统发送邮件功能
2017/07/14 Python
python实现txt文件格式转换为arff格式
2018/05/31 Python
10 行Python 代码实现 AI 目标检测技术【推荐】
2019/06/14 Python
把django中admin后台界面的英文修改为中文显示的方法
2019/07/26 Python
如何在Django项目中引入静态文件
2019/07/26 Python
医院实习介绍信
2014/01/12 职场文书
股权投资意向书
2014/04/01 职场文书
《充气雨衣》教学反思
2014/04/07 职场文书
2014年药品销售工作总结
2014/12/16 职场文书
幼儿园教师读书笔记
2015/06/29 职场文书
酒店开业主持词
2015/07/02 职场文书
普希金诗歌赏析(6首)
2019/08/22 职场文书
导游词之澳门妈祖庙
2019/12/19 职场文书
利用Apache Common将java对象池化的问题
2022/06/16 Servers