js实现点击按钮后给Div图层设置随机背景颜色的方法
更新时间：2015年05月06日 09:08:12 投稿：shichen2014
这篇文章主要介绍了js实现点击按钮后给Div图层设置随机背景颜色的方法,实例分析了javascript操作页面div元素属性及随机数的相关技巧,需要的朋友可以参考下
本文实例讲述了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中的exec与match方法。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
JavaScript实现的常见排序算法有:冒泡排序,选择排序,插入排序,谢尔排序,快速排序(递归),快速排序(堆栈),归并排序,堆排序。今天我们来详细分析下快速排序算法2014-09-09
通常在我们的HTML页面表单中有大量的数据验证工作， 免不了要写很多验证表单的js代码，这是一项非常繁琐枯燥的工作。很多程序员也会经常遗漏这项工作。所以写了这一 段JavaScript代码提供给大家使用。使用起来很简单，大家拿回去自由扩展吧2015-04-04
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
最近在研究用bootstrap搭建网站，Bootstrap能自适应pc端和手机端，并且移动设备优先，适合现如今移动营销，大家用的设备基本是触屏的了，能用滑动交互在小屏幕上体验会更好，那么如何实现呢？下面小编给大家介绍下bootstrap 手势滑动轮播图的实现方法2016-10-10
这篇文章主要介绍了JavaScript自定义函数的相关资料，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下2020-07-07
这篇文章主要为大家详细介绍了微信小程序保存图片到相册权限设置，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-04-04
这篇文章主要介绍了Javascript中数组方法汇总(推荐),需要的朋友可以参考下2015-04-04
这篇文章主要介绍了JavaScript链式调用,结合实例形式分析了javascript链式调用的相关原理、实现方法及操作注意事项,需要的朋友可以参考下2018-12-12
本文主要介绍了JavaScript实现表格表单的随机选择和简单的随机点名，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
onload事件当一个页面或是一张图片加载完成时被触发，在body上不仅可以用onload，而且还支持多个HTML标签.用法如下2013-09-09
最新评论