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 相关文章推荐
jquery原创弹出层折叠效果点击折叠弹出一个层
Mar 12 Javascript
jQuery实现瀑布流的取巧做法分享
Jan 12 Javascript
javascript中if和switch,==和===详解
Jul 30 Javascript
理解javascript中的严格模式
Feb 01 Javascript
jQuery实现图片向左向右切换效果的简单实例
May 18 Javascript
JS判断日期格式是否合法的简单实例
Jul 11 Javascript
JS控制静态页面传递参数并获取参数应用
Aug 10 Javascript
jquery实现页面加载效果
Feb 21 Javascript
强大的 Angular 表单验证功能详细介绍
May 23 Javascript
vue.js声明式渲染和条件与循环基础知识
Jul 31 Javascript
bootstrap下拉分页样式 带跳转页码
Dec 29 Javascript
element跨分页操作选择详解
Jun 29 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
如何使用php实现评委评分器
2015/07/31 PHP
用正则xmlHttp实现的偷(转)
2007/01/22 Javascript
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
2010/03/18 Javascript
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
2010/03/21 Javascript
JavaScript 消息框效果【实现代码】
2016/04/27 Javascript
JavaScript面试开发常用的知识点总结
2016/08/08 Javascript
jQuery如何防止Ajax重复提交
2016/10/14 Javascript
详解vue-cli + webpack 多页面实例应用
2017/04/25 Javascript
vue elementUI tree树形控件获取父节点ID的实例
2018/09/12 Javascript
详解Vue CLI3配置解析之css.extract
2018/09/14 Javascript
微信小程序实现同一页面取值的方法分析
2019/04/30 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
2019/05/15 Javascript
细说webpack6 Babel的使用详解
2019/09/26 Javascript
JavaScript仿京东秒杀倒计时
2020/03/17 Javascript
Vue实现附件上传功能
2020/05/28 Javascript
React实现轮播效果
2020/08/25 Javascript
Vue ​v-model相关知识总结
2021/01/28 Vue.js
[45:18]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第一场
2018/04/04 DOTA
python使用循环实现批量创建文件夹示例
2014/03/25 Python
一个Python最简单的接口自动化框架
2018/01/02 Python
从请求到响应过程中django都做了哪些处理
2018/08/01 Python
Python3.7将普通图片(png)转换为SVG图片格式(网站logo图标)动起来
2020/04/21 Python
常用的HTML5列表标签
2017/06/20 HTML / CSS
AmazeUI 单选框和多选框的实现示例
2020/08/18 HTML / CSS
加拿大领先的冒险和户外零售商:Atmosphere
2017/12/19 全球购物
C#如何判断当前用户是否输入某个域
2015/12/07 面试题
异步传递消息系统的作用
2016/05/01 面试题
个性与发展自我评价
2014/02/11 职场文书
家居装修公司创业计划书范文
2014/03/20 职场文书
忠诚奉献演讲稿
2014/09/12 职场文书
2014办公室副主任四风对照检查材料思想汇报
2014/09/20 职场文书
2015年财务人员个人工作总结
2015/07/27 职场文书
中考百日冲刺决心书
2015/09/22 职场文书
《田忌赛马》教学反思
2016/02/19 职场文书
幼儿园大班教学反思
2016/03/02 职场文书
2020年基层司法所建设情况调研报告
2019/11/30 职场文书