时间戳

首页 > 解决方案 > 十六进制颜色在 javascript 中不能正常工作

javascript - 十六进制颜色在 javascript 中不能正常工作

问题描述

我正在制作一个颜色转换器，以便在单击按钮时更改背景颜色和颜色名称。当我使用常规颜色名称数组时

arr = ["red" , "yellow", "blue" , "green" , "pink" , "lightBLue"]

它有效，但是当我使用十六进制颜色时

let arr = ['#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6']

它不工作它只保持一种颜色#FF6633，

这是html文件：

<body id="body">
    <p id="demo"></p>
    <button id="btn">Click Me</button>
    <script src="index.js"></script>
</body>

这是js文件：

// let arr = ["red" , "yellow", "blue" , "green" , "pink" , "lightBLue"]

var arr = ['#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6',
    '#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
    '#80B300', '#809900', '#E6B3B3', '#6680B3', '#66991A',
    '#FF99E6', '#CCFF1A', '#FF1A66', '#E6331A', '#33FFCC',
    '#66994D', '#B366CC', '#4D8000', '#B33300', '#CC80CC',
    '#66664D', '#991AFF', '#E666FF', '#4DB3FF', '#1AB399',
    '#E666B3', '#33991A', '#CC9999', '#B3B31A', '#00E680',
    '#4D8066', '#809980', '#E6FF80', '#1AFF33', '#999933',
    '#FF3380', '#CCCC00', '#66E64D', '#4D80CC', '#9900B3',
    '#E64D66', '#4DB380', '#FF4D4D', '#99E6E6', '#6666FF'];

let colorName = document.getElementById("demo");
let btn = document.getElementById("btn");
btn.addEventListener("click", () => {
    changeColorName();
    changeBackGroundColor();
});
colorName.innerText = arr[0]

 function changeColorName(){
    let change = colorName.innerHTML;
     let index = arr.indexOf(change) +1;
     if(index == arr.length){
         index = 0
     }
      
     var result = arr[index];
     colorName.innerHTML = result;
     
 }

let changeBgColor = document.getElementById("body");
changeBgColor.style.backgroundColor = arr[0]

function changeBackGroundColor() {
    let change = changeBgColor.style.backgroundColor;
    let index = arr.indexOf(change) + 1;
    if (index == arr.length) {
        index = 0
    }

    var result = arr[index];
    changeBgColor.style.backgroundColor = result;

}

这是 js Fiddle https://jsfiddle.net/MuneebaDilawaze/ypnLowej/3/

标签： javascriptcolors

解决方案

HTMLElement.style.backgroundColor返回一个 RGB 颜色值。您必须在查找它的索引之前对其进行转换。这是一个解决方案。

var arr = ['#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6',
    '#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
    '#80B300', '#809900', '#E6B3B3', '#6680B3', '#66991A',
    '#FF99E6', '#CCFF1A', '#FF1A66', '#E6331A', '#33FFCC',
    '#66994D', '#B366CC', '#4D8000', '#B33300', '#CC80CC',
    '#66664D', '#991AFF', '#E666FF', '#4DB3FF', '#1AB399',
    '#E666B3', '#33991A', '#CC9999', '#B3B31A', '#00E680',
    '#4D8066', '#809980', '#E6FF80', '#1AFF33', '#999933',
    '#FF3380', '#CCCC00', '#66E64D', '#4D80CC', '#9900B3',
    '#E64D66', '#4DB380', '#FF4D4D', '#99E6E6', '#6666FF'];

let colorName = document.getElementById("demo");
let btn = document.getElementById("btn");
btn.addEventListener("click", () => {
    changeColorName();
    changeBackGroundColor();
});
colorName.innerText = arr[0]

 function changeColorName(){
    let change = colorName.innerHTML;
     let index = arr.indexOf(change) +1;
     if(index == arr.length){
         index = 0
     }
      
     var result = arr[index];
     colorName.innerHTML = result;
     
 }

let changeBgColor = document.getElementById("body");
changeBgColor.style.backgroundColor = arr[0]

function changeBackGroundColor() {
    let change = changeBgColor.style.backgroundColor;
    change = rgb2hex(change).toUpperCase();
    let index = arr.indexOf(change) + 1;
    if (index == arr.length) {
        index = 0
    }

    var result = arr[index];
    console.log(result);
    changeBgColor.style.backgroundColor = result;

}
const hexDigits = new Array
       ("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f");
function rgb2hex(rgb) {
 rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
 return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

function hex(x) {
  return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
 }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body id="body">
    <p id="demo"></p>
    <button id="btn">Click Me</button>
    <script src="index.js"></script>
</body>
</html>

推荐阅读