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实现读取txt文档的脚本
Jul 20 Javascript
一行代码告别document.getElementById
Jun 01 Javascript
图片延迟加载的实现代码(模仿懒惰)
Mar 29 Javascript
jQuery提交多个表单的小例子
Jun 30 Javascript
js中通过父级进行查找定位元素
Jun 15 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
May 12 Javascript
原生JavaScript制作计算器
Oct 16 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
Mar 10 Javascript
javascript 开发之百度地图使用到的js函数整理
May 19 Javascript
简单实现js进度条加载效果
Mar 25 Javascript
jquery tmpl模板(实例讲解)
Sep 02 jQuery
Element-ui DatePicker显示周数的方法示例
Jul 19 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与C#分别格式化文件大小的代码
2011/05/14 PHP
JavaScript 版本自动生成文章摘要
2008/07/23 Javascript
js中的window.open返回object的错误的解决方法
2009/08/15 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
2012/01/13 Javascript
jquery方法+js一般方法+js面向对象方法实现拖拽效果
2012/08/30 Javascript
JavaScript实现关键字高亮功能
2014/11/12 Javascript
详解JavaScript中的blink()方法的使用
2015/06/08 Javascript
JavaScript重定向URL参数的两种方法小结
2016/10/19 Javascript
JS瀑布流实现方法实例分析
2016/12/19 Javascript
使用JavaScript触发过渡效果的方法
2017/01/19 Javascript
Vuex 进阶之模块化组织详解
2018/01/12 Javascript
node打造微信个人号机器人的方法示例
2018/04/26 Javascript
Angular项目如何升级至Angular6步骤全纪录
2018/09/03 Javascript
Vue-Router的使用方法
2018/09/05 Javascript
element vue Array数组和Map对象的添加与删除操作
2018/11/14 Javascript
浅谈JavaScript闭包
2019/04/09 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
2020/04/10 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
2020/03/03 Javascript
Python中的自省(反射)详解
2015/06/02 Python
Python常用知识点汇总
2016/05/08 Python
Python实现的简单dns查询功能示例
2017/05/24 Python
python 自动去除空行的实例
2018/07/24 Python
Python3爬虫教程之利用Python实现发送天气预报邮件
2018/12/16 Python
Python地图绘制实操详解
2019/03/04 Python
基于python实现可视化生成二维码工具
2020/07/08 Python
平面设计自荐信
2013/10/07 职场文书
计算机学生求职信范文
2014/01/30 职场文书
汽车服务工程专业自荐信
2014/09/02 职场文书
公司向个人借款协议书范本
2014/10/09 职场文书
市场部岗位职责
2015/02/12 职场文书
关爱留守儿童捐款倡议书
2015/04/27 职场文书
整脏治乱工作简报
2015/07/21 职场文书
大学入学感言
2015/08/01 职场文书
2016年五一国际劳动节活动总结
2016/04/06 职场文书
2016年暑期社会实践活动总结报告
2016/04/06 职场文书
TensorFlow的自动求导原理分析
2021/05/26 Python