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 相关文章推荐
实现51Map地图接口(示例代码)
Nov 22 Javascript
javascript跨浏览器的属性判断方法
Mar 16 Javascript
window.location.href的用法(动态输出跳转)
Aug 09 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
Aug 23 Javascript
Bootstrap Chart组件使用教程
Apr 28 Javascript
Node.js刷新session过期时间的实现方法推荐
May 18 Javascript
纯javascript版日历控件
Nov 24 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
Feb 14 Javascript
jQuery实现的简单在线计算器功能
May 11 jQuery
微信小程序 es6-promise.js封装请求与处理异步进程
Jun 12 Javascript
Vue表情输入组件 微信face表情组件
Feb 11 Javascript
js回到页面指定位置的三种方式
Dec 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
oracle资料库函式库
2006/10/09 PHP
phpfans留言版用到的install.php
2007/01/04 PHP
ThinkPHP表单自动验证实例
2014/10/13 PHP
PHP APP微信提现接口代码
2018/09/30 PHP
PHP常量define和const的区别详解
2019/05/18 PHP
prototype class详解
2006/09/07 Javascript
Web版彷 Visual Studio 2003 颜色选择器
2007/01/09 Javascript
JavaScript 提升运行速度之循环篇 译文
2009/08/15 Javascript
使用jQuery模板来展现json数据的代码
2010/10/22 Javascript
jQuery设置指定网页元素宽度和高度的方法
2015/03/25 Javascript
浅谈jQuery中replace()方法
2015/05/13 Javascript
javascript之Boolean类型对象
2016/06/07 Javascript
详解Vue整合axios的实例代码
2017/06/21 Javascript
在小程序中使用Echart图表的示例代码
2018/08/02 Javascript
axios对请求各种异常情况处理的封装方法
2018/09/25 Javascript
jQuery实现ajax的嵌套请求案例分析
2019/02/16 jQuery
JavaScript中this用法学习笔记
2019/03/17 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
2019/10/26 Javascript
如何使用vue slot创建一个模态框的实例代码
2020/05/24 Javascript
浅谈JavaScript节流和防抖函数
2020/08/25 Javascript
python监控网站运行异常并发送邮件的方法
2015/03/13 Python
python+django快速实现文件上传
2016/10/24 Python
Python实现注册登录系统
2017/08/08 Python
Python中常见的异常总结
2018/02/20 Python
Selenium鼠标与键盘事件常用操作方法示例
2018/08/13 Python
python实现爬山算法的思路详解
2019/04/09 Python
python实现操作文件(文件夹)
2019/10/31 Python
python实现实时视频流播放代码实例
2020/01/11 Python
html5使用canvas压缩图片的示例代码
2018/09/11 HTML / CSS
法国家具及室内配件店:home24
2017/01/21 全球购物
文明学生标兵事迹
2014/01/21 职场文书
幼儿园六一亲子活动方案
2014/08/26 职场文书
离职报告范文
2014/11/04 职场文书
2014年法院工作总结
2014/11/24 职场文书
志愿者工作心得体会
2016/01/15 职场文书
2019年共青团工作条例最新版
2019/11/12 职场文书