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控制代码暂停的实现方法分享
Oct 11 Javascript
Jquery 切换不同图片示例代码
Dec 05 Javascript
jQuery中:image选择器用法实例
Jan 03 Javascript
JavaScript中常见的字符串操作函数及用法汇总
May 04 Javascript
使用impress.js制作幻灯片
Sep 09 Javascript
js实现九宫格的随机颜色跳转
Feb 19 Javascript
webpack打包非模块化js的方法
Oct 24 Javascript
vue下载excel的实现代码后台用post方法
May 10 Javascript
JS数组方法slice()用法实例分析
Jan 18 Javascript
简单了解前端渐进式框架VUE
Jul 20 Javascript
eslint+prettier统一代码风格的实现方法
Jul 22 Javascript
使用Mock.js生成前端测试数据
Dec 13 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
锁定年轻人的双倍活力 星巴克推出星倍醇即饮浓咖啡
2021/03/03 咖啡文化
PHP生成月历代码
2007/06/14 PHP
PHP 表单提交给自己
2008/07/24 PHP
国外比较好的几个的Php开源建站平台小结
2010/04/22 PHP
php下获取http状态的实现代码
2014/05/09 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
PHP number_format函数原理及实例解析
2020/07/14 PHP
javascript入门·对象属性方法大总结
2007/10/01 Javascript
什么是JavaScript
2009/08/13 Javascript
jquery isType() 类型判断代码
2011/02/14 Javascript
JQuery实现用户名无刷新验证的小例子
2013/03/22 Javascript
js AppendChild与insertBefore用法详细对比
2013/12/16 Javascript
Bootstrap树形组件jqTree的简单封装
2016/01/25 Javascript
Vue.js每天必学之方法与事件处理器
2016/09/06 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
2017/03/04 Javascript
JS实现的加减乘除四则运算计算器示例
2017/08/09 Javascript
Nodejs进阶之服务端字符编解码和乱码处理
2017/09/04 NodeJs
简化版的vue-router实现思路详解
2018/10/19 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
2019/08/01 Javascript
Vue管理系统前端之组件拆分封装详解
2020/08/23 Javascript
更改Python命令行交互提示符的方法
2015/01/14 Python
简单学习Python多进程Multiprocessing
2017/08/29 Python
python pygame实现2048游戏
2018/11/20 Python
django框架实现模板中获取request 的各种信息示例
2019/07/01 Python
Django使用unittest模块进行单元测试过程解析
2019/08/02 Python
Python实现PyPDF2处理PDF文件的方法示例
2019/09/25 Python
Pycharm 2020.1 版配置优化的详细教程
2020/08/07 Python
python开发入门——set的使用
2020/09/03 Python
利用Python将图片中扭曲矩形的复原
2020/09/07 Python
python中scipy.stats产生随机数实例讲解
2021/02/19 Python
写好求职应聘自荐信的三部曲
2013/09/21 职场文书
小学教师师德感言
2014/02/10 职场文书
财务总监管理岗位职责
2014/03/08 职场文书
信用卡工资证明范本
2014/10/17 职场文书
Python使用PyYAML库读写yaml文件的方法
2022/04/06 Python
《王者天下》第4季首话新剧照 4月9日正式开播
2022/04/07 日漫