如何使用多種顏色進行拾色器

Question

我正在嘗試做這樣的事情：

一個顏色選擇器，您可以在其中選擇一些顏色，但只能從這40種顏色中進行選擇。 我不想為每種顏色使用事件監聽器。 我認為應該可以像<select>元素那樣進行操作，但是怎么做呢？

Answer 1

我建議您可以使用一些顏色選擇器庫，例如Spectrum
https://bgrins.github.io/spectrum/
此工具包括具有各種視圖和其他功能的顏色選擇器，並且是免費的。
這樣可以節省很多時間和工作

Answer 2

如果您確實希望將其作為“選擇”，則可以執行以下操作：

<select>
    <option style="background-color:red" value="red">Red</option>
    <option style="background-color:green" value="green">Green</option>
    <option style="background-color:#0000ff" value="#0000ff">Blue (as hex)</option>
</select>

那根本不需要Javascript。

Answer 3

我認為做您的特定解決方案會很麻煩。 為了解決您的問題，我將創建一個包含40個單元格的html表，然后為每個單元格定義一種顏色，編寫代碼以定義用戶選擇了哪個單元格，以后再用於您需要的用途。

如果是我，我將使用類似這樣的代碼： http : //widget.colorcodehex.com/color-picker.html中的代碼

<div style="font-family: Arial,Helvetica,sans-serif; border: solid 1px #cccccc; position: absolute; width: 240px; height: 326px; background: #ffffff; -moz-box-shadow: 0 0 6px rgba(0,0,0,.25); -webkit-box-shadow: 0 0 6px rgba(0,0,0,.25); box-shadow: 0 0 6px rgba(0,0,0,.25); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;">

<div style="background-color: #2d6ab4; position: absolute; top: 0px; left: 0px; width: 100%; height: 22px; text-align: center; padding-top: 2px; font-weight: bold; border-top-right-radius: 5px; border-top-left-radius: 5px;"><a style="text-decoration: none; color: #ffffff;" target="_blank" href="http://www.colorcodehex.com/">HTML Color Picker</a></div>

這樣做，您可以獲得相同的結果（或者，我認為更好，因為用戶可以定義他們想要的顏色），但是您不必坐下來做所有的表格顏色代碼和用戶交互代碼。

/秒