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实现的页内搜索代码
May 23 Javascript
Javascript Tab 导航插件 (23个)
Jun 11 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
May 11 Javascript
原生JavaScript编写俄罗斯方块
Mar 30 Javascript
JavaScript如何自定义trim方法
Jul 28 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
Dec 26 Javascript
JS实现的手机端精简幻灯片效果
Sep 05 Javascript
javascript实现的左右无缝滚动效果
Sep 19 Javascript
基于jquery实现弹幕效果
Sep 29 Javascript
微信小程序之仿微信漂流瓶实例
Dec 09 Javascript
微信小程序 详解页面跳转与返回并回传数据
Feb 13 Javascript
vuex的数据渲染与修改浅析
Nov 26 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
Windows PHP5和Apache的安装与配置
2009/06/08 PHP
一个完整的php文件上传类实例讲解
2015/10/27 PHP
thinkPHP3.2简单实现文件上传的方法
2016/05/16 PHP
PHP实现的CURL非阻塞调用类
2018/07/26 PHP
零基础php编程好学吗
2019/10/11 PHP
使用CSS3实现字体颜色渐变的实现
2021/03/09 HTML / CSS
基于jquery的点击链接插入链接内容的代码
2012/07/31 Javascript
Javascript 赋值机制详解
2014/11/23 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
2015/09/06 Javascript
javascript url几种编码方式详解
2016/06/06 Javascript
收藏AngularJS中最重要的核心功能
2017/07/09 Javascript
jQuery ajax读取本地json文件的实例
2017/10/31 jQuery
vue组件化中slot的基本使用方法
2019/05/01 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
2019/11/06 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
2020/04/11 Javascript
openlayers4.6.5实现距离量测和面积量测
2020/09/25 Javascript
[49:20]2014 DOTA2国际邀请赛中国区预选赛5.21 CIS VS TongFu
2014/05/22 DOTA
深入讲解Java编程中类的生命周期
2016/02/05 Python
Python日期的加减等操作的示例
2017/08/15 Python
Python3.4实现从HTTP代理网站批量获取代理并筛选的方法示例
2017/09/26 Python
使用python和pygame绘制繁花曲线的方法
2018/02/24 Python
Python生成器generator用法示例
2018/08/10 Python
在python里使用await关键字来等另外一个协程的实例
2020/05/04 Python
Pycharm安装并配置jupyter notebook的实现
2020/05/18 Python
python help函数实例用法
2020/12/06 Python
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
2013/01/30 HTML / CSS
moosejaw旗下的户外商品促销网站:Mountain Steals
2017/02/27 全球购物
锐步美国官方网站:Reebok美国
2018/01/10 全球购物
Maxpeedingrods美国:高性能汽车零件
2020/02/14 全球购物
大专生自荐信
2013/10/04 职场文书
服装设计专业自荐信
2014/06/17 职场文书
2015小学教师年度工作总结
2015/05/12 职场文书
房贷收入证明范本
2015/06/12 职场文书
2019初中学生入团申请书
2019/06/27 职场文书
selenium.webdriver中add_argument方法常用参数表
2021/04/08 Python
详解Python牛顿插值法
2021/05/11 Python