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面向对象编程之如何实现方法重载
Jul 02 Javascript
jQuery取得设置清空select选择的文本与值
Jul 08 Javascript
浅谈JavaScript数据类型及转换
Feb 28 Javascript
ReactNative页面跳转实例代码
Sep 27 Javascript
详解vuejs之v-for列表渲染
Jun 22 Javascript
通过js控制时间,一秒一秒自己动的实例
Oct 25 Javascript
angularJs中$http获取后台数据的实例讲解
Aug 08 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
Sep 14 Javascript
Vue.Draggable拖拽功能的配置使用方法
Jul 29 Javascript
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
JS使用数组实现的队列功能示例
Mar 04 Javascript
JavaScript Array对象基本方法详解
Sep 03 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
农民C键的运用技巧
2020/03/04 星际争霸
PHP统计nginx访问日志中的搜索引擎抓取404链接页面路径
2014/06/30 PHP
destoon实现公司新闻详细页添加评论功能的方法
2014/07/15 PHP
Yii使用DeleteAll连表删除出现报错问题的解决方法
2016/07/14 PHP
PHP实现将多个文件中的内容合并为新文件的方法示例
2017/06/10 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
详解CSS样式中的 !important * _ 符号
2021/03/09 HTML / CSS
JQuery 获取和设置Select选项的代码
2010/02/07 Javascript
判断一个变量是数组Array类型的方法
2013/09/16 Javascript
JS 获取滚动条高度示例代码
2013/10/24 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
2015/01/18 Javascript
Boostrap入门准备之border box
2016/05/09 Javascript
Vue实例简单方法介绍
2017/01/20 Javascript
Nodejs 复制文件/文件夹的方法
2017/08/24 NodeJs
jQuery实现checkbox的简单操作
2017/11/18 jQuery
Vue+axios实现统一接口管理的方法
2018/07/23 Javascript
详解javascript replace高级用法
2019/02/17 Javascript
微信小程序实现授权登录
2019/05/15 Javascript
简述Vue中容易被忽视的知识点
2019/12/09 Javascript
JavaScript实现简单计算器功能
2019/12/19 Javascript
[39:52]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第一场
2018/04/04 DOTA
详解Python实现按任意键继续/退出的功能
2016/08/19 Python
Python 实现数据库更新脚本的生成方法
2017/07/09 Python
python判断所输入的任意一个正整数是否为素数的两种方法
2019/06/27 Python
将tf.batch_matmul替换成tf.matmul的实现
2020/06/18 Python
ECHT官方网站:男女健身服
2020/02/14 全球购物
什么是索引指示器
2012/08/20 面试题
行政办公室岗位职责
2014/03/18 职场文书
六五普法规划实施方案
2014/03/21 职场文书
小学生常见病防治方案
2014/06/06 职场文书
交通志愿者活动总结
2014/06/27 职场文书
我们的节日中秋活动方案
2014/08/19 职场文书
三年级上册科学教学计划
2015/01/21 职场文书
html+css合并表格边框的示例代码
2021/03/31 HTML / CSS
python异步的ASGI与Fast Api实现
2021/07/16 Python
Oracle以逗号分隔的字符串拆分为多行数据实例详解
2021/07/16 Oracle