Javascript 获取随机颜色的几种方式
#FFFFFFFF,由8位16进制数组成,前6位表示颜色,后两位数表示透明度,数值越大,透明度越小。
rgb(255,255,255),由3位0-255之间的数字组成。
rgba(255,255,255,.5),最后一位0-1之间的小数,表示透明度,数值越大,透明度越小。
随机生成6位0-15之间的数字,再用toString(16)将数字转成16进制。
//随机生成6位16进制数的颜色值 #FFFFFF
function randomColor() {
var color = "#";
//for循环中,如果后面仅有一条语句,{}可省略不写
//随机生成6位0-15之间的数字,再用toString(16)将数字转成16进制
for (var i = 0; i < 6; i++) color+=parseInt(Math.random() * 16).toString(16);
return color;
}
12345678
随机生成带透明度的16进制的颜色值
跟第一种方法类似,随机生成8位0-15之间的数字,再用toString(16)将数字转成16进制。
//#ff0000ff 后两位是透明度,数值越大,颜色越深
function randomColor() {
var color = "#";
//for循环中,如果后面仅有一条语句,{}可省略不写
//同上面方法
for (var i = 0; i < 8; i++) color+=parseInt(Math.random() * 16).toString(16);
return color;
}
12345678
获取生成RGB格式的随机颜色值
随机生成3位0-255之间的数字,字符串进行拼接。
//获取随机颜色 rgb(255,255,255)
function randomColor(){
var color="rgb(";
for(var i=0;i<3;i++) color+=parseInt(Math.random()*256)+",";
//去除最后一个逗号
// color=color.slice(0,-1)
color=color.substring(0,color.length-1)+")";
return color;
}
123456789
获取生成RGBA格式的随机颜色值
随机生成3位0-255之间的数字,如果有传入透明度的值,将按照用户传入的值来渲染。如果没有传入透明度的值,则随机生成透明度。
需要注意的是Math.random()只能生成0-1之间的小数,不包含0跟1,Math.random()*10,是1-10之间的整数,除以10再四舍五入,就有可能得到0或者1。
function randomColor(alpha){
//判断有没有传入透明值,没有传入的话,随机生成0-1之间的小数
//Math.random()只能生成0-1之间的小数,不包含0跟1,Math.random()*10,是1-10之间的整数,除以10再四舍五入,就有可能得到0或者1.
alpha = alpha==undefined? (Math.random()*10/10).toFixed(1) : alpha;
//将参数转化成数值
alpha=Number(alpha);
//如果传入的参数是非数值,则让透明度为1
if(isNaN(alpha)) alpha=1;
//颜色拼接
var color = "rgba(";
for(var i=0;i<3;i++){
color+=parseInt(Math.random()*256)+",";
}
color+= alpha+")";
return color;
}
Javascript 获取随机颜色的几种方式的更多相关文章
- javascript获取表单值的7种方式
见代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF- ...
- 1+x学习日志——js获取随机颜色的几种实现方式
因为学习时间比较紧,所以也没多少时间发博客了.后续会慢慢补齐的,下面是代码 /// function randomColor(){ var r = parseInt(Math.random() * 2 ...
- javascript获取随机颜色
方案一: function getRandomColor(){ var str = "0123456789abcdef"; var t = "#"; for(j ...
- JavaScript获取DOM对象的几种方式
1.getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用 2.getElementsByName() 方法可返回带有指定名称的对象的集合 3.getElementsByTa ...
- jQuery异步获取json数据的2种方式
jQuery异步获取json数据有2种方式,一个是$.getJSON方法,一个是$.ajax方法.本篇体验使用这2种方式异步获取json数据,然后追加到页面. 在根目录下创建data.json文件: ...
- JS实现随机颜色的3种方法与颜色格式的转化
JS实现随机颜色的3种方法与颜色格式的转化 随机颜色和颜色格式是我们在开发中经常要用到的一个小功能,网上相关的资料也很多,想着有必要总结一下自己的经验.所以这篇文章主要介绍了JS实现随机颜色的3种 ...
- php获取post参数的几种方式 RPC 规定接收取值方式 $GLOBALS['HTTP_RAW_POST_DATA'];
http://www.cnblogs.com/zhepama/p/4022606.html PHP默认识别的数据类型是application/x-www.form-urlencoded标准的数据类型. ...
- strus2中获取表单数据 两种方式 属性驱动 和模型驱动
strus2中获取表单数据 两种方式 属性驱动 和模型驱动 属性驱动 /** * 当前请求的action在栈顶,ss是栈顶的元素,所以可以利用setValue方法赋值 * 如果一个属性在对象栈,在页面 ...
- [转]javascript指定事件处理程序包括三种方式:
javascript指定事件处理程序包括三种方式: (1):DOM0级事件处理程序 如: 代码如下: var btn=document.getElementById("mybtn" ...
随机推荐
- numpy——>数组拼接np.concatenate
语法:np.concatenate((a1, a2, ...), axis=0) 1.默认是 axis = 0,也就是说对0轴(行方向)的数组对象,进行其垂直方向(axis=1)的拼接(即数据整行整行 ...
- TCP断开连接(四次挥手)
四次挥手 ACK建立连接之后都为1. 1.A发送释放连接报文段,FIN=1. 2.B收到并回复确认,TCP进入半关闭状态,即此时B能向A发送,但是A无法向B发送数据. 3.当B传输完所有数据之后,发送 ...
- 《深入理解 Java 虚拟机》读书笔记:早期(编译期)优化
正文 Java 语言的 3 类编译器: 前端编译器:把 java 文件 转变成 class 文件.例如:Sun 的 Javac. JIT 编译器(即时编译器):后端运行期编译器,把字节码转变成机器码. ...
- 如何用 Blazor 实现 Ant Design 组件库
本文主要分享我创建 Ant Design of Blazor 项目的心路历程,已经文末有一个 Blazor 线上分享预告. Blazor WebAssembly 来了! Blazor 这个新推出的前端 ...
- Functional mechanism: regression analysis under differential privacy_阅读报告
Functional mechanism: regression analysis under differential privacy 论文学习报告 组员:裴建新 赖妍菱 周子玉 2020 ...
- 阿里云服务器Ubuntu系统搭建LNMP环境
目录 一.Nginx 安装 二.MySQL安装 三.PHP安装 四.配置Nginx 五.环境测试 六.服务器常用路径 一.Nginx 安装 更新软件源 sudo apt-get update 安装 N ...
- Building Applications with Force.com and VisualForce (DEV401) (二二):Visualforce Componets (Tags) Library Part II
Dev401-023:Visualforce Pages: Visualforce Componets (Tags) Library Part II Apex:pageBlockTable1.A ...
- HDU 3303 Harmony Forever 前缀和+树状数组||线段树
Problem Description We believe that every inhabitant of this universe eventually will find a way to ...
- Nature重磅:华裔科学家成功解码脑电波,AI直接从大脑中合成语音
[导读]Nature发表华裔作者论文:通过解码大脑活动提升语音的清晰度,使用深度学习方法直接从大脑信号中产生口语句子,达到150个单词,接近正常人水平. 大脑活动能够解码成语音了. 说话似乎是一项毫不 ...
- 深度学习论文TOP10,2019一季度研究进展大盘点
9012年已经悄悄过去了1/3. 过去的100多天里,在深度学习领域,每天都有大量的新论文产生.所以深度学习研究在2019年开了怎样一个头呢? Open Data Science对第一季度的深度学习研 ...