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 和 CSS 实现脚注(Footnote)效果
Sep 09 Javascript
jquery移动listbox的值原理及代码
May 03 Javascript
javaScript中slice函数用法实例分析
Jun 08 Javascript
jquery移动端TAB触屏切换实现效果
Dec 22 Javascript
JavaScript 中 avalon绑定属性总结
Oct 19 Javascript
Bootstrap3 内联单选和多选框
Dec 29 Javascript
关于前后端json数据的发送与接收详解
Jul 30 Javascript
浅谈在koa2中实现页面渲染的全局数据
Oct 09 Javascript
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
Jan 23 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
Apr 14 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
[EPIC] Larva vs Flash ZvT @ Crossing Field [2017-10-09]
2020/03/17 星际争霸
深思 PHP 数组遍历的差异(array_diff 的实现)
2008/03/23 PHP
基于PHP+Ajax实现表单验证的详解
2013/06/25 PHP
php新浪微博登录接口用法实例
2014/12/23 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
js FLASH幻灯片字符串中有连接符&的处理方法
2012/03/01 Javascript
判断客户浏览器是否支持cookie的示例代码
2013/12/23 Javascript
JS检测输入字符是否包含非法字符的示例代码
2014/02/11 Javascript
JavaScript中的原始值和复杂值
2016/01/07 Javascript
基于angularjs实现图片放大镜效果
2016/08/31 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
2017/03/31 Javascript
Angular2学习教程之ng中变更检测问题详解
2017/05/28 Javascript
bootstrap fileinput实现文件上传功能
2017/08/23 Javascript
基于vue.js无缝滚动效果
2018/01/25 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
2019/09/06 Javascript
angular异步验证防抖踩坑实录
2019/12/01 Javascript
eslint+prettier统一代码风格的实现方法
2020/07/22 Javascript
js实现查询商品案例
2020/07/22 Javascript
Python列表的切片实例讲解
2019/08/20 Python
Python3.6+selenium2.53.6自动化测试_读取excel文件的方法
2019/09/06 Python
Django视图扩展类知识点详解
2019/10/25 Python
Windows上安装tensorflow  详细教程(图文详解)
2020/02/04 Python
阿联酋手表和配饰购物网站:Rivolishop
2019/11/25 全球购物
澳大利亚在线性感内衣商店:Fantasy Lingerie
2021/02/07 全球购物
促销活动总结
2014/04/28 职场文书
广播体操口号
2014/06/18 职场文书
工会工作先进事迹
2014/08/18 职场文书
关于青春的演讲稿800字
2014/08/22 职场文书
怎样写辞职信
2015/02/27 职场文书
2015年小学数学教师工作总结
2015/05/20 职场文书
2016教师廉洁教育心得体会
2016/01/13 职场文书
2016年教师学习廉政准则心得体会
2016/01/20 职场文书
检讨书怎么写?
2019/06/21 职场文书
导游词之西递宏村
2019/12/10 职场文书
Redis的字符串是如何实现的
2021/10/24 Redis
JS创建或填充任意长度数组的小技巧汇总
2021/10/24 Javascript