如何使用多种颜色进行拾色器

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>

这样做，您可以获得相同的结果（或者，我认为更好，因为用户可以定义他们想要的颜色），但是您不必坐下来做所有的表格颜色代码和用户交互代码。

/秒