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 相关文章推荐
用dom+xhtml+css制作的一个相册效果代码打包下载
Jan 24 Javascript
jQuery中获取Radio元素值的方法
Jul 02 Javascript
Javascript 浮点运算的问题分析与解决方法
Aug 27 Javascript
使用indexOf等在JavaScript的数组中进行元素查找和替换
Sep 18 Javascript
小米公司JavaScript面试题
Dec 29 Javascript
javascript实现抽奖程序的简单实例
Jun 07 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
Oct 26 Javascript
vue之将echart封装为组件
Jun 02 Javascript
ionic使用angularjs表单验证(模板验证)
Dec 12 Javascript
vue自定义指令实现方法详解
Feb 11 Javascript
vue实现户籍管理系统
May 29 Javascript
JavaScript canvas实现流星特效
May 20 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
1.PHP简介
2006/10/09 PHP
php 从数据库提取二进制图片的处理代码
2009/09/09 PHP
在wamp集成环境下升级php版本(实现方法)
2013/07/01 PHP
CI映射(加载)数据到view层的方法
2016/03/28 PHP
php慢查询日志和错误日志使用详解
2021/02/27 PHP
这段js代码得节约你多少时间
2011/12/20 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
2013/01/23 Javascript
javascript截取字符串(通过substring实现并支持中英文混合)
2013/06/24 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
2014/04/10 Javascript
jquery中EasyUI使用技巧小结
2015/02/10 Javascript
C++中的string类的用法小结
2015/08/07 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
2015/09/24 Javascript
举例讲解JavaScript substring()的使用方法
2015/11/09 Javascript
JavaScript 正则表达式中global模式的特性
2016/02/25 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
2016/05/31 Javascript
JavaScript函数的特性与应用实践深入详解
2018/12/30 Javascript
详解vue配置后台接口方式
2019/03/29 Javascript
uploadify插件实现多个图片上传并预览
2019/09/30 Javascript
element-ui tree结构实现增删改自定义功能代码
2020/08/31 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
2020/09/02 Javascript
编写自定义的Django模板加载器的简单示例
2015/07/21 Python
Python数据结构与算法之二叉树结构定义与遍历方法详解
2017/12/12 Python
Python温度转换实例分析
2018/01/17 Python
Python实现重建二叉树的三种方法详解
2018/06/23 Python
对Python3 解析html的几种操作方式小结
2019/02/16 Python
Python数据类型之列表和元组的方法实例详解
2019/07/08 Python
ORM Django 终端打印 SQL 语句实现解析
2019/08/09 Python
python防止随意修改类属性的实现方法
2019/08/21 Python
Python运行DLL文件的方法
2020/01/17 Python
港湾网络笔试题
2014/04/19 面试题
土木工程建筑专业毕业生求职信
2013/10/21 职场文书
职业技术学校毕业生推荐信
2013/12/03 职场文书
毕业生自荐信范文
2015/03/05 职场文书
python用tkinter开发的扫雷游戏
2021/06/01 Python
如何利用opencv判断两张图片是否相同详解
2021/07/07 Python
Nginx本地配置SSL访问的实例教程
2022/05/30 Servers