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 相关文章推荐
eclipse如何忽略js文件报错(附图)
Oct 30 Javascript
js中的内部属性与delete操作符介绍
Aug 10 Javascript
javascript封装简单实现方法
Aug 11 Javascript
JavaScript统计网站访问次数的实现代码
Nov 18 Javascript
深入理解JS中的substr和substring
Apr 26 Javascript
jQuery基于扩展简单实现倒计时功能的方法
May 14 Javascript
全面理解JavaScript中的继承(必看)
Jun 16 Javascript
javascript中的try catch异常捕获机制用法分析
Dec 14 Javascript
基于angular实现三级联动的生日插件
May 12 Javascript
JavaScript学习笔记之DOM基础操作实例小结
Jan 09 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
Jan 28 Javascript
浅谈vue的第一个commit分析
Jun 08 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
smtp邮件发送一例
2006/10/09 PHP
PHP简洁函数小结
2011/08/12 PHP
PHP 验证码不显示只有一个小红叉的解决方法
2013/09/30 PHP
Zend Framework教程之响应对象的封装Zend_Controller_Response实例详解
2016/03/07 PHP
PHP实现自动发送邮件功能代码(qq 邮箱)
2017/08/18 PHP
总结AJAX相关JS代码片段和浏览器模型
2007/08/15 Javascript
基于jquery的15款幻灯片插件
2011/04/10 Javascript
jQuery.each()用法分享
2012/07/31 Javascript
浅谈Javascript 执行顺序
2013/12/18 Javascript
浅析JS中document对象的一些重要属性
2014/03/06 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
2015/09/06 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
2015/12/18 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
2016/03/17 Javascript
bootstrap侧边栏圆点导航
2017/01/11 Javascript
如何理解Vue的.sync修饰符的使用
2017/08/17 Javascript
vue组件父子间通信之综合练习(聊天室)
2017/11/07 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
2018/01/13 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
2018/06/22 Javascript
JavaScript设计模式之享元模式实例详解
2019/01/17 Javascript
javascript实现抢购倒计时程序
2019/08/26 Javascript
vue开发中遇到的问题总结
2020/04/07 Javascript
Python实现单词翻译功能
2017/06/06 Python
Python访问MongoDB,并且转换成Dataframe的方法
2018/10/15 Python
搞清楚 Python traceback的具体使用方法
2019/05/13 Python
自学python用什么系统好
2020/06/23 Python
职称自我鉴定
2013/10/15 职场文书
商务英语专业毕业生求职信
2014/07/06 职场文书
班主任与学生安全责任书
2014/07/25 职场文书
2014年加油站工作总结
2014/12/04 职场文书
财务工作个人总结
2015/02/27 职场文书
致三级跳运动员加油稿
2015/07/21 职场文书
担保书范文
2019/07/09 职场文书
导游词之云南丽江古城
2019/09/17 职场文书
win11高清晰音频管理器在哪里?win11找不到高清晰音频管理器解决办法
2022/04/08 数码科技
Spring Boot 的创建和运行示例代码详解
2022/07/23 Java/Android
Vue深入理解插槽slot的使用
2022/08/05 Vue.js