生成随机颜色

简介: 生成随机颜色

生成一个随机的颜色:

const randomColor = Math.floor(Math.random()*16777215).toString(16);

下面是一个完整的用例:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      height: 100vh;
      margin: 0;
      padding: 1rem;
      display: grid;
      place-items: center;
      font-family: system-ui;
    }

    h1 {
      background: white;
      padding: 1rem 2rem;
      text-align: center;
    }

    span {
      display: block;
      padding: 1rem;
      font-size: 1rem;
      font-weight: normal;
      font-family: monospace;
    }
  </style>
</head>

<body>
  <h1>
    <button id="genNew">生成随机的一个颜色</button>
    <span id="color"></span>
  </h1>
  <script>

    const setBg = () => {
      const randomColor = Math.floor(Math.random() * 16777215).toString(16);
      document.body.style.backgroundColor = "#" + randomColor;
      color.innerHTML = "#" + randomColor;
    }

    genNew.addEventListener("click", setBg);
    setBg();

  </script>
</body>

</html>

此代码默认会产生暗淡的灰色,棕色和绿色。给人的感觉就是视觉上不美观,那么如何生成一些好看的颜色呢?那就需要使用 JS 库:randomColor.js。

默认情况下,randomColor 会生成吸引人的颜色。更具体地说,randomColor 产生具有相当高饱和度的明亮颜色。这使得randomColor特别有用在设计 UI 上。

下面是 randomColor 的输出的54次随机的颜色。

在这里插入图片描述

您还可以将参数对象传递给 randomColor。这使您可以指定色调,亮度和要生成的颜色数量。
在这里插入图片描述

相关文章
|
前端开发 JavaScript 数据可视化
Echarts 折线图完全配置指南 - 手把手教你设置 Echarts 折线图详细教程
Echarts 折线图是图表中最常用的显示形式之一。使用 Echarts 做出基本的折线图很简单,但要是想把多组数据放在一张图表中,展示的漂亮又直观就不容易了。本文将带领大家从最基本的折线图,一步步完善,最终做出可读性很高的可视化图表。 根据本教程在卡拉云中搭建的折线图 Demo,你可以立即注册卡拉云,跟随本教程学习 跟随本教程你将学到 1.折线外观属性 折线增加弧线平滑过渡 折线图变为散状圆点 实线改为虚线 折线指定颜色 增加数据显示 表格外观属...
1788 0
|
存储 机器学习/深度学习 分布式计算
HDFS Federation简介
背景 熟悉大数据的人应该都知道,HDFS 是一个分布式文件系统,它是基于谷歌的 GFS 思路实现的开源系统,它的设计目的就是提供一个高度容错性和高吞吐量的海量数据存储解决方案。在经典的 HDFS 架构中有2个 NameNode 和多个 DataNode 的,如下: 从上面可以看出 HDFS 的架构其实大致可以分为两层: Namespace:由目录,文件和数据块组成,支持常见的文件系统操作,例如创建,删除,修改和列出文件和目录。
|
存储 缓存 负载均衡
(*长期更新)软考网络工程师学习笔记——Section 17 交换技术原理
(*长期更新)软考网络工程师学习笔记——Section 17 交换技术原理
(*长期更新)软考网络工程师学习笔记——Section 17 交换技术原理
|
数据采集 运维 Prometheus
|
SQL 存储 安全
mysql使用脚本定时进行数据热备份
mysql使用脚本定时进行数据热备份
682 0
mysql使用脚本定时进行数据热备份
|
存储 SQL 编解码
Hadoop3.0时代,怎么能不懂EC纠删码技术?个推为你解读
本文分享EC技术原理及个推的EC实践,带大家一起玩转Hadoop3.0!
1094 0
Hadoop3.0时代,怎么能不懂EC纠删码技术?个推为你解读
清除input输入框的历史记录
清除input输入框的历史记录
1616 0
清除input输入框的历史记录
|
存储 弹性计算 数据中心
快讯丨洛神云网关XGW斩获中国通信学会领先创新科技成果大奖
6月18日,在第五届未来网络发展大会上,阿里云洛神高性能云网关XGW斩获由中国通信学会颁发的2021未来网络领先创新科技成果奖。
快讯丨洛神云网关XGW斩获中国通信学会领先创新科技成果大奖
|
存储 程序员 开发工具
一文讲透 Git 底层数据结构和原理
本文将系统分享 Git 底层知识:对象生命周期变化,底层数据结构,数据包文件结构,数据包文件索引,以及详细分析对象查询流程和算法。(文末福利:程序员需要哪些软技能?)
3017 0
一文讲透 Git 底层数据结构和原理
|
数据采集 SQL 存储
基于DataFlux进行养猪场实时数据模拟生成和分析实践
摘要:DataFlux是驻云科技的实时大数据分析平台。经过对养猪场的数据分析需求,使用DataMock数据模拟器模拟生成原始数据并上传至DataFlux,快速实现了对养猪场数据的分析全流程。 注:本次业务分析、模拟数据分析生成和实践主要为培训和演示用途,旨在快速了解DataMock和DataFlux进行实时数据分析的功能和流程。
1532 0
基于DataFlux进行养猪场实时数据模拟生成和分析实践