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 相关文章推荐
js innerHTML 的一些问题的解决方法
Jun 22 Javascript
由document.body和document.documentElement想到的
Apr 13 Javascript
jquery DIV撑大让滚动条滚到最底部代码
Jun 06 Javascript
Javascript 按位与赋值运算符 (&amp;=)使用介绍
Feb 04 Javascript
jquery默认校验规则整理
Mar 24 Javascript
JavaScript中exec函数用法实例分析
Jun 08 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
Dec 27 Javascript
jQuery实现的简单拖动层示例
Feb 22 Javascript
vue源码nextTick使用及原理解析
Aug 13 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
Aug 17 Javascript
javascript 易错知识点实例小结
Apr 25 Javascript
Vue实现背景更换颜色操作
Jul 17 Javascript
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获取post中的json数据的实现方法
2011/06/08 PHP
解决php使用异步调用获取数据时出现(错误c00ce56e导致此项操作无法完成)
2013/07/03 PHP
php自定义的格式化时间示例代码
2013/12/05 PHP
php+mysqli使用面向对象方式更新数据库实例
2015/01/29 PHP
thinkPHP中验证码的简单使用方法
2015/12/26 PHP
大家须知简单的php性能优化注意点
2016/01/04 PHP
PHP中strcmp()和strcasecmp()函数字符串比较用法分析
2016/01/07 PHP
新闻内页-JS分页
2006/06/07 Javascript
Array, Array Constructor, for in loop, typeof, instanceOf
2011/09/13 Javascript
一个级联菜单代码学习及removeClass与addClass的应用
2013/01/24 Javascript
浅谈JavaScript数据类型
2015/03/03 Javascript
jQuery.trim() 函数及trim()用法详解
2015/10/26 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
2015/10/30 Javascript
深入浅析Node.js 事件循环
2015/12/20 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
2018/06/28 Javascript
基于vue通用表单解决方案的思考与分析
2019/03/16 Javascript
让python json encode datetime类型
2010/12/28 Python
Python实现计算最小编辑距离
2016/03/17 Python
Python只用40行代码编写的计算器实例
2017/05/10 Python
python3操作微信itchat实现发送图片
2018/02/24 Python
python 处理数字,把大于上限的数字置零实现方法
2019/01/28 Python
OpenCV 模板匹配
2019/07/10 Python
python多线程+代理池爬取天天基金网、股票数据过程解析
2019/08/13 Python
docker-py 用Python调用Docker接口的方法
2019/08/30 Python
Python API len函数操作过程解析
2020/03/05 Python
Django Admin后台添加数据库视图过程解析
2020/04/01 Python
基于python纯函数实现井字棋游戏
2020/05/27 Python
python interpolate插值实例
2020/07/06 Python
class类在python中获取金融数据的实例方法
2020/12/10 Python
Python爬虫定时计划任务的几种常见方法(推荐)
2021/01/15 Python
Web前端绘制0.5像素的几种方法
2017/08/11 HTML / CSS
StubHub智利:购买和出售您的门票
2016/11/23 全球购物
Bodum官网:咖啡和茶壶、玻璃器皿、厨房电器等
2018/08/01 全球购物
资金主管岗位职责范本
2014/03/04 职场文书
2019年二手房买卖合同范本
2019/10/14 职场文书
python可视化之颜色映射详解
2021/09/15 Python