先认识一下颜色值的表达方式
#FFFFFF,由6位16进制数组成。
#FFFFFFFF,由8位16进制数组成,前6位表示颜色,后两位数表示透明度,数值越大,透明度越小。
rgb(255,255,255),由3位0-255之间的数字组成。
rgba(255,255,255,.5),最后一位0-1之间的小数,表示透明度,数值越大,透明度越小。
随机生成格式为#FFFFFF的颜色值
随机生成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 获取随机颜色的几种方式的更多相关文章

  1. javascript获取表单值的7种方式

    见代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF- ...

  2. 1+x学习日志——js获取随机颜色的几种实现方式

    因为学习时间比较紧,所以也没多少时间发博客了.后续会慢慢补齐的,下面是代码 /// function randomColor(){ var r = parseInt(Math.random() * 2 ...

  3. javascript获取随机颜色

    方案一: function getRandomColor(){ var str = "0123456789abcdef"; var t = "#"; for(j ...

  4. JavaScript获取DOM对象的几种方式

    1.getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用 2.getElementsByName() 方法可返回带有指定名称的对象的集合 3.getElementsByTa ...

  5. jQuery异步获取json数据的2种方式

    jQuery异步获取json数据有2种方式,一个是$.getJSON方法,一个是$.ajax方法.本篇体验使用这2种方式异步获取json数据,然后追加到页面. 在根目录下创建data.json文件: ...

  6. JS实现随机颜色的3种方法与颜色格式的转化

    JS实现随机颜色的3种方法与颜色格式的转化   随机颜色和颜色格式是我们在开发中经常要用到的一个小功能,网上相关的资料也很多,想着有必要总结一下自己的经验.所以这篇文章主要介绍了JS实现随机颜色的3种 ...

  7. php获取post参数的几种方式 RPC 规定接收取值方式 $GLOBALS['HTTP_RAW_POST_DATA'];

    http://www.cnblogs.com/zhepama/p/4022606.html PHP默认识别的数据类型是application/x-www.form-urlencoded标准的数据类型. ...

  8. strus2中获取表单数据 两种方式 属性驱动 和模型驱动

    strus2中获取表单数据 两种方式 属性驱动 和模型驱动 属性驱动 /** * 当前请求的action在栈顶,ss是栈顶的元素,所以可以利用setValue方法赋值 * 如果一个属性在对象栈,在页面 ...

  9. [转]javascript指定事件处理程序包括三种方式:

    javascript指定事件处理程序包括三种方式: (1):DOM0级事件处理程序 如: 代码如下: var btn=document.getElementById("mybtn" ...

随机推荐

  1. BrowserSync(保存代码后,自动刷新浏览器)

    摘要 Browsersync能让浏览器实时.快速响应您的文件更改(html.js.css.sass.less等)并自动刷新页面.更重要的是 Browsersync可以同时在PC.平板.手机等设备下进项 ...

  2. 死磕Lambda表达式(三):更简洁的Lambda

    我们都是阴沟里的虫子,但总还是得有人仰望星空.--<三体> 在之前的文章中介绍了Lambda表达式的基本语法和正确使用姿势,这次我来介绍一些Lambda更简洁的用法. 欢迎关注微信公众号: ...

  3. 原生Canvas循环滚动弹幕(现金红包活动带头像弹幕)

    效果 gif有些糊,可以 在线预览 实现关键点 requestAnimationFrame 循环帧: 绘制单条弹幕,画框子 -> 画头像 -> 写黑色的字 -> 写红色的字, mea ...

  4. 交换机三种模式Access、Hybrid和Trunk

    [端口介绍] 种链路类型:access.trunk.hybird 个VLAN,一般用于连接计算机端口: Trunk类型端口:可以允许多个VLAN通过,可以接收和发送多个VLAN 报文, 一般用于交换机 ...

  5. 二、create-react-app自定义配置

    这里主要讲解添加less  和  实现Antd按需加载 首选需要执行npm run eject 暴露所有内建的配置 ,这是后面所有配置的基础,这个必须优先执行! 一.实现Antd按需加载 按需加载插件 ...

  6. Flutter配置环境报错“PKIX path building failed: sun.security.provider.certpath.SunCertPathBuilderException: unable to find valid certification path to requested target”

    背景:最近看了很多Flutter漂亮的项目,想要尝试一下.所有环境都搭建好之后,按照文档一步一步配置(抄袭),但始终报如下图错误. PKIX path building failed: sun.sec ...

  7. 理解Golang组件protobuf

    什么是protobuf protocol buffers 是一种语言无关.平台无关.可扩展的序列化结构数据的方法,它可用于(数据)通信协议.数据存储等.是一种灵活,高效,自动化机制的结构数据序列化方法 ...

  8. UCF Local Programming Contest 2016 J题(二分+bfs)

    题目链接如下: https://nanti.jisuanke.com/t/43321 思路: 显然我们要采用二分的方法来寻找答案,给定一个高度如果能确定在这个高度时是否可以安全到达终点,那我们就可以很 ...

  9. HDFS数据加密空间--Encryption zone

    前言 之前写了许多关于数据迁移的文章,也衍生的介绍了很多HDFS中相关的工具和特性,比如DistCp,ViewFileSystem等等.但是今天本文所要讲的主题转移到了另外一个领域数据安全.数据安全一 ...

  10. 【Unity游戏开发】跟着马三一起魔改LitJson

    一.引子 在游戏开发中,我们少不了和数据打交道,数据的存储格式可谓是百花齐放,xml.json.csv.bin等等应有尽有.在这其中Json以其小巧轻便.可读性强.兼容性好等优点受到广大程序员的喜爱. ...