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做拖动布局的思路
May 31 Javascript
jquery 插件 任意位置浮动固定层
Dec 25 Javascript
js读取本地excel文档数据的代码
Nov 11 Javascript
jQuery EasyUI API 中文文档 - Parser 解析器
Sep 29 Javascript
JavaScript判断变量是对象还是数组的方法
Aug 28 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
Aug 27 Javascript
JS实现浏览上传文件的代码
Aug 23 Javascript
webpack构建react多页面应用详解
Sep 15 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
Dec 15 Javascript
微信小程序如何获取用户信息
Jan 26 Javascript
React+TypeScript+webpack4多入口配置详解
Aug 08 Javascript
微信小程序背景音乐开发详解
Dec 12 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
如何跨站抓取别的站点的页面的补充
2006/10/09 PHP
PHP 反射机制实现动态代理的代码
2008/10/22 PHP
Zend framework处理一个http请求的流程分析
2010/02/08 PHP
php中用date函数获取当前时间有误的解决办法
2013/08/02 PHP
推荐一款PHP+jQuery制作的列表分页的功能模块
2014/10/14 PHP
php usort 使用用户自定义的比较函数对二维数组中的值进行排序
2017/05/02 PHP
csdn 博客中实现运行代码功能实现
2009/08/29 Javascript
js 强制弹出窗口代码研究-又一款代码
2010/03/20 Javascript
javascript 正则表达式相关应介绍
2012/11/27 Javascript
JavaScript通过元素的ID和name设置样式
2014/07/08 Javascript
JavaScript声明变量名的语法规则
2015/07/10 Javascript
JS日期加减,日期运算代码
2015/11/05 Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
2015/12/01 Javascript
给before和after伪元素设置js效果的方法
2015/12/04 Javascript
js实现音乐播放控制条
2017/09/09 Javascript
解析Vue 2.5的Diff算法
2017/11/28 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
2017/12/22 Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
2019/03/28 Javascript
Python基于pillow判断图片完整性的方法
2016/09/18 Python
Python常见格式化字符串方法小结【百分号与format方法】
2016/09/18 Python
python获取文件路径、文件名、后缀名的实例
2018/04/23 Python
在Python中,不用while和for循环遍历列表的实例
2019/02/20 Python
感知器基础原理及python实现过程详解
2019/09/30 Python
Python Tkinter模块 GUI 可视化实例
2019/11/20 Python
python 实现将小图片放到另一个较大的白色或黑色背景图片中
2019/12/12 Python
python实现音乐播放和下载小程序功能
2020/04/26 Python
浅析两列自适应布局的3种思路
2016/05/03 HTML / CSS
基于CSS3实现图片模糊过滤效果
2015/11/19 HTML / CSS
static全局变量与普通的全局变量有什么区别?static局部变量和普通局部变量有什么区别?static函数与普通函数有什么区别?
2015/02/22 面试题
Python面试题集
2012/03/08 面试题
毕业生自荐书模版
2014/01/04 职场文书
总经理秘书岗位职责
2014/03/17 职场文书
个人整改措施书面材料
2014/10/24 职场文书
2015年世界环境日演讲稿
2015/03/18 职场文书
回门宴新娘答谢词
2015/09/29 职场文书
MySQL分区表管理命令汇总
2022/03/21 MySQL