JavaScript随机生成颜色的方法


Posted in Javascript onOctober 15, 2016

废话不多说了直接给大家贴js代码了,具体代码如下所述:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="btn1">调用第一种</button>
<button id="bnt2">调用第二种</button>
<button id="btn3">调用第三种</button>
<script>
var btn1=document.getElementById('btn1');
btn1.onclick=function(){
document.body.style.background=bg1()
};
var btn2=document.getElementById('bnt2');
btn2.onclick=function(){
document.body.style.background=bg2();
};
var btn3=document.getElementById('btn3');
btn3.onclick=function(){
document.body.style.background=bg3();
};
function bg1(){
return '#'+Math.floor(Math.random()*256).toString(10);
}
function bg2(){
return '#'+Math.floor(Math.random()*0xffffff).toString(16);
}
function bg3(){
var r=Math.floor(Math.random()*256);
var g=Math.floor(Math.random()*256);
var b=Math.floor(Math.random()*256);
return "rgb("+r+','+g+','+b+")";//所有方法的拼接都可以用ES6新特性`其他字符串{$变量名}`替换
}
</script>
</body>
</html>

以上所述是小编给大家介绍的JavaScript随机生成颜色的方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的,在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 类定义的4种方法
Sep 12 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
Feb 12 Javascript
模拟jQuery ajax服务器端与客户端通信的代码
Mar 28 Javascript
AngularJS 日期格式化详解
Dec 23 Javascript
canvas绘制表盘时钟
Jan 23 Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
Jul 13 Javascript
JavaScript实现左侧菜单效果
Dec 14 Javascript
Angular2实现组件交互的方法分析
Dec 19 Javascript
AjaxUpLoad.js实现文件上传功能
Mar 02 Javascript
详解Vue.js v-for不支持IE9的解决方法
Dec 29 Javascript
浅谈KOA2 Restful方式路由初探
Mar 14 Javascript
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
js实现目录链接,内容跟着目录滚动显示的简单实例
Oct 15 #Javascript
js控制div层的叠加简单方法
Oct 15 #Javascript
js实现table添加行tr、删除行tr、清空行tr的简单实例
Oct 15 #Javascript
js控制li的隐藏和显示实例代码
Oct 15 #Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
Oct 15 #Javascript
JS常用函数和常用技巧小结
Oct 15 #Javascript
表单元素值获取方式js及java方式的简单实例
Oct 15 #Javascript
You might like
php set_time_limit(0) 设置程序执行时间的函数
2010/05/26 PHP
PHP页面间参数传递的四种方法详解
2013/06/09 PHP
PHP调用MsSQL Server 2012存储过程获取多结果集(包含output参数)的详解
2013/07/03 PHP
PHP获取windows登录用户名的方法
2014/06/24 PHP
php中使用array_filter()函数过滤空数组的实现代码
2014/08/19 PHP
THINKPHP2.0到3.0有哪些改进之处
2015/01/04 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
jquery与google map api结合使用 控件,监听器
2010/03/04 Javascript
Jquery 获取checkbox的checked问题
2011/11/16 Javascript
jquery的相对父元素和相对文档定位示例代码
2013/08/02 Javascript
JavaScript新窗口与子窗口传值详解
2014/02/11 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
2016/06/20 Javascript
利用纯js + transition动画实现移动端web轮播图详解
2017/09/10 Javascript
Vue实现PopupWindow组件详解
2018/04/28 Javascript
小程序实现留言板
2018/11/02 Javascript
微信小程序中使用echarts的实现方法
2019/04/24 Javascript
React学习之JSX与react事件实例分析
2020/01/06 Javascript
[02:43]DOTA2亚洲邀请赛场馆攻略——带你走进东方体育中心
2018/03/19 DOTA
[03:48]大碗DOTA
2019/07/25 DOTA
Python中列表、字典、元组、集合数据结构整理
2014/11/20 Python
Python创建系统目录的方法
2015/03/11 Python
在Django框架中伪造捕捉到的URLconf值的方法
2015/07/18 Python
Python函数中的函数(闭包)用法实例
2016/03/15 Python
快速了解Python开发中的cookie及简单代码示例
2018/01/17 Python
pandas的唯一值、值计数以及成员资格的示例
2018/07/25 Python
python发送告警邮件脚本
2018/09/17 Python
魔声耳机官方网站:Monster是世界第一品牌的高性能耳机
2016/10/26 全球购物
杭州龙健科技笔试题.net部分笔试题
2016/01/24 面试题
日语专业毕业生自荐书
2014/06/18 职场文书
我的中国梦演讲稿500字
2014/08/19 职场文书
民警个人对照检查剖析材料
2014/09/17 职场文书
安全保证书
2015/01/16 职场文书
师德师风个人总结
2015/02/06 职场文书
2015年党日活动总结范文
2015/03/25 职场文书
Python turtle实现贪吃蛇游戏
2021/06/18 Python
delete in子查询不走索引问题分析
2022/07/07 MySQL