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 相关文章推荐
Uglifyjs(JS代码优化工具)入门 安装使用
Apr 13 Javascript
jquery ajax同步异步的执行最终解决方案
Apr 26 Javascript
jQuery中:has选择器用法实例
Dec 30 Javascript
JavaScript声明变量名的语法规则
Jul 10 Javascript
详解JavaScript对象和数组
Dec 03 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
Dec 08 Javascript
Js的Array数组对象详解
Feb 22 Javascript
puppeteer实现html截图的示例代码
Jan 10 Javascript
利用angular自动编译andriod APK的绕坑经历分享
Mar 08 Javascript
Vue实战教程之仿肯德基宅急送App
Jul 19 Javascript
node.js使用fs读取文件出错的解决方案
Oct 23 Javascript
原生js实现俄罗斯方块
Oct 20 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
PHP反射使用实例和PHP反射API的中文说明
2014/07/02 PHP
YII路径的用法总结
2014/07/09 PHP
php将12小时制转换成24小时制的方法
2015/03/31 PHP
php处理json格式数据经典案例总结
2016/05/19 PHP
Docker 如何布置PHP开发环境
2016/06/21 PHP
PHP版微信小店接口开发实例
2016/11/12 PHP
JavaScript使用技巧精萃[代码非常实用]
2008/11/21 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
2014/10/17 Javascript
javascript模拟命名空间
2015/04/17 Javascript
基于jQuery ligerUI实现分页样式
2016/09/18 Javascript
BootStrap注意事项小结(五)表单
2017/03/10 Javascript
解决layui 复选框等内置控件不显示的问题
2018/08/14 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
2019/05/29 Javascript
[30:51]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第一局
2016/03/04 DOTA
Python中操作MySQL入门实例
2015/02/08 Python
python每隔N秒运行指定函数的方法
2015/03/16 Python
详解Python中__str__和__repr__方法的区别
2015/04/17 Python
Python 26进制计算实现方法
2015/05/28 Python
Python遍历文件夹和读写文件的实现代码
2016/08/28 Python
Python实现感知机(PLA)算法
2017/12/20 Python
Python基础之函数的定义与使用示例
2019/03/23 Python
Python高级特性 切片 迭代解析
2019/08/23 Python
安装多个版本的TensorFlow的方法步骤
2020/04/21 Python
如何解决安装python3.6.1失败
2020/07/01 Python
CSS3实现苹果手机解锁的字体闪亮效果示例
2021/01/05 HTML / CSS
Html5新增标签与样式及让元素水平垂直居中
2019/07/11 HTML / CSS
四风存在的原因分析
2014/02/11 职场文书
《小熊住山洞》教学反思
2014/02/21 职场文书
小学国庆节活动方案策划书
2014/09/16 职场文书
幼儿园中班教师个人工作总结
2015/02/06 职场文书
暂停营业通知
2015/04/25 职场文书
学校教学工作总结2015
2015/05/19 职场文书
初中政治教学工作总结
2015/08/13 职场文书
导游词之西安大清真寺
2019/12/17 职场文书
python 爬取吉首大学网站成绩单
2021/06/02 Python
python神经网络 tf.name_scope 和 tf.variable_scope 的区别
2022/05/04 Python