生成隨機(jī)顏色
生成一個(gè)隨機(jī)的顏色：
const randomColor = Math.floor(Math.random()*16777215).toString(16);下面是一個(gè)完整的用例：
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle><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">生成隨機(jī)的一個(gè)顏色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>
此代碼默認(rèn)會產(chǎn)生暗淡的灰色，棕色和綠色。給人的感覺就是視覺上不美觀，那么如何生成一些好看的顏色呢？那就需要使用 JS 庫：randomColor.js。
npm?install?randomcolorvar randomColor = require('randomcolor'); // import the scriptvar color = randomColor(); // a hex code for an attractive color
默認(rèn)情況下，randomColor 會生成吸引人的顏色。更具體地說，randomColor 產(chǎn)生具有相當(dāng)高飽和度的明亮顏色。這使得 randomColor 特別有用在設(shè)計(jì) UI 上。
下面是 randomColor 的輸出的54次隨機(jī)的顏色。
您還可以將參數(shù)對象傳遞給 randomColor。這使您可以指定色調(diào)，亮度和要生成的顏色數(shù)量。
評論
圖片
表情