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框架myJSFrame附API使用帮助
Jun 28 Javascript
JavaScript 面向对象编程(1) 基础
May 18 Javascript
node.js中的http.createClient方法使用说明
Dec 15 Javascript
基于Vue如何封装分页组件
Dec 16 Javascript
Vue中fragment.js使用方法详解
Mar 09 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
Mar 11 Javascript
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
如何通过非数字与字符的方式实现PHP WebShell详解
Jul 02 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
Feb 21 Javascript
echarts实现晶体球面投影的实例教程
Oct 10 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
Nov 09 Javascript
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
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
PHP4之COOKIE支持详解
2006/10/09 PHP
golang与PHP输出excel示例
2016/07/22 PHP
JavaScript跨域方法汇总
2014/10/16 Javascript
JavaScript中的类数组对象介绍
2014/12/30 Javascript
jQuery中:enabled选择器用法实例
2015/01/04 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
2016/03/07 Javascript
IScroll5 中文API参数说明和调用方法
2016/05/21 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
2017/01/04 Javascript
JavaScript实现的搜索及高亮显示功能示例
2017/08/14 Javascript
vue通过路由实现页面刷新的方法
2018/01/25 Javascript
微信小程序wepy框架笔记小结
2018/08/08 Javascript
React中使用UEditor百度富文本的方法
2018/08/22 Javascript
微信小程序实现预览图片功能
2020/10/22 Javascript
使用jQuery动态设置单选框的选中效果
2018/12/06 jQuery
layer.js open 隐藏滚动条的例子
2019/09/05 Javascript
js实现蒙版效果
2020/01/11 Javascript
JS+CSS实现过渡特效
2021/01/02 Javascript
python中关于时间和日期函数的常用计算总结(time和datatime)
2013/03/08 Python
PyQt5每天必学之QSplitter实现窗口分隔
2018/04/19 Python
解决已经安装requests,却依然提示No module named requests问题
2018/05/18 Python
python3实现基于用户的协同过滤
2018/05/31 Python
tensorflow更改变量的值实例
2018/07/30 Python
Python3爬虫之自动查询天气并实现语音播报
2019/02/21 Python
在linux系统下安装python librtmp包的实现方法
2019/07/22 Python
Python包,__init__.py功能与用法分析
2020/01/07 Python
python在CMD界面读取excel所有数据的示例
2020/09/28 Python
canvas简易绘图的实现(海绵宝宝篇)
2018/07/04 HTML / CSS
美国最大的香水连锁店官网:Perfumania
2016/08/15 全球购物
英国最全面的橄榄球联盟门票网站:Live Rugby Tickets
2018/10/06 全球购物
银行金融服务方案
2014/06/11 职场文书
党支部对照检查材料
2014/08/25 职场文书
瘦西湖导游词
2015/02/03 职场文书
关于倡议书的范文
2015/04/29 职场文书
java实现对Hadoop的操作
2021/07/01 Java/Android
【海涛DOTA】D-cup邀请赛NV.cn vs DT.Love
2022/04/01 DOTA
Redis高并发缓存架构性能优化
2022/05/15 Redis