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 相关文章推荐
Prototype RegExp对象 学习
Jul 19 Javascript
js 上下左右键控制焦点(示例代码)
Dec 14 Javascript
node.js Web应用框架Express入门指南
May 28 Javascript
jQuery中[attribute=value]选择器用法实例
Dec 31 Javascript
JavaScript面向对象之私有静态变量实例分析
Jan 14 Javascript
ES6通过babel转码使用webpack使用import关键字
Dec 13 Javascript
js实现淡入淡出轮播切换功能
Jan 13 Javascript
JavaScript中关于class的调用方法
Nov 28 Javascript
Vue点击切换颜色的方法
Sep 13 Javascript
JavaScript 九种跨域方式实现原理
Feb 11 Javascript
js基础之事件捕获与冒泡原理
Oct 09 Javascript
json解析大全 双引号、键值对不在一起的情况
Dec 06 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
解析将多维数组转换为支持curl提交的一维数组格式
2013/07/08 PHP
php遍历文件夹和文件列表示例分享
2014/03/11 PHP
php+redis实现多台服务器内网存储session并读取示例
2017/01/12 PHP
PHP使用PDO、mysqli扩展实现与数据库交互操作详解
2019/07/20 PHP
有关PHP 中 config.m4 的探索
2020/08/26 PHP
javascript 全等号运算符使用说明
2010/05/31 Javascript
javascript中的缓动效果实现程序
2012/12/29 Javascript
在js中判断checkboxlist(.net控件客户端id)是否有选中
2013/04/11 Javascript
JavaScript中join()方法的使用简介
2015/06/09 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
2016/09/21 Javascript
JS获取本地地址及天气的方法实例小结
2019/05/10 Javascript
ES6中异步对象Promise用法详解
2019/07/31 Javascript
js实现提交前对列表数据的增删改查
2020/01/16 Javascript
element-ui 弹窗组件封装的步骤
2021/01/22 Javascript
[01:35]辉夜杯战队访谈宣传片—iG.V
2015/12/25 DOTA
[07:01]DOTA2-DPC中国联赛正赛 Aster vs Magma 3月5日 赛后选手采访
2021/03/11 DOTA
Python strip lstrip rstrip使用方法
2008/09/06 Python
python九九乘法表的实例
2017/09/26 Python
详解Python3中的迭代器和生成器及其区别
2018/10/09 Python
python使用writerows写csv文件产生多余空行的处理方法
2019/08/01 Python
python 模拟银行转账功能过程详解
2019/08/06 Python
在Python中使用filter去除列表中值为假及空字符串的例子
2019/11/18 Python
python实现在多维数组中挑选符合条件的全部元素
2019/11/26 Python
解决python 读取 log日志的编码问题
2019/12/24 Python
python3 kubernetes api的使用示例
2021/01/12 Python
Python中使用Selenium环境安装的方法步骤
2021/02/22 Python
美国最大的船只买卖在线市场:Boat Trader
2018/08/04 全球购物
北承题目(C++)
2012/05/16 面试题
市场部专员岗位职责
2013/11/30 职场文书
老同学聚会感言
2014/02/23 职场文书
管理人员岗位职责
2015/02/14 职场文书
暑期工社会实践报告
2015/07/13 职场文书
一年级下册数学教学反思
2016/02/16 职场文书
祝福语集锦:给百岁老人祝寿贺词
2019/11/19 职场文书
Angular CLI发布路径的配置项浅析
2021/03/29 Javascript
Spring Boot项目传参校验的最佳实践指南
2022/04/05 Java/Android