十六进制颜色在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","lightBLue"]

var arr = ['#FF6633','#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/

解决方法

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>

colors colors javascript

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

问题描述

解决方法

相关问答