如何实现颜色选择器而不是静态颜色

Question

我正在开发一个绘画网站。我有一个选择颜色的脚本。到目前为止，它工作正常。

这是选择我的颜色的代码。

<div class="colorpick">
  <div class="pick" style="background-color:rgb(150, 0, 0);" onclick="hello(this.style.backgroundColor);"></div>
  <div class="pick" style="background-color:rgb(0, 0, 152);" onclick="hello(this.style.backgroundColor);"></div>
  <div class="pick" style="background-color:rgb(0, 151, 0);" onclick="hello(this.style.backgroundColor);"></div>
  <div class="pick" style="background-color:rgb(255, 0, 5);" onclick="hello(this.style.backgroundColor);"></div>
  <div class="pick" style="background-color:rgb(255, 255, 0);" onclick="hello(this.style.backgroundColor);"></div>
  <div class="pick" style="background-color:rgb(0, 255, 255);" onclick="hello(this.style.backgroundColor);"></div>
  <div class="pick" style="background-color:rgb(255, 0, 255);" onclick="hello(this.style.backgroundColor);"></div>
  <div class="pick" style="background-color:rgb(255, 150, 0);" onclick="hello(this.style.backgroundColor);"></div>
  <div class="pick" style="background-color:rgb(255, 0, 150);" onclick="hello(this.style.backgroundColor);"></div>
  <div class="pick" style="background-color:rgb(0, 255, 150);" onclick="hello(this.style.backgroundColor);"></div>
  <div class="pick" style="background-color:rgb(150, 0, 255);" onclick="hello(this.style.backgroundColor);"></div>
  <div class="pick" style="background-color:rgb(0, 150, 255);" onclick="hello(this.style.backgroundColor);"></div>
</div>

颜色显示为

这是我的函数 hello()

的代码

<script>
  function hello(e){
    var rgb = e.replace(/^(rgb|rgba)\(/,'').replace(/\)$/,'').replace(/\s/g,'').split(',');
    myColor.r = parseInt(rgb[0]);
    myColor.g = parseInt(rgb[1]);
    myColor.b = parseInt(rgb[2]);
    curColor = myColor;
    console.log(curColor);
  }
</script>

但我想实现一个颜色选择器。我也有颜色选择器的脚本。

<input type="color" value="#ffffff" onchange="clickColor(0, -1, -1, 5)" id="html5colorpicker">

我的问题是：如何将颜色选择器与我当前的代码集成？任何帮助将不胜感激。

Answer 1

您只需要更改clickColor 方法的实现，该方法是在从 html5colorpicker 更改颜色后调用的方法。

类似的东西：

function clickColor(){
    var hexColorString = document.getElementById('html5colorpicker').value;
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hexColorString);
    if(result){
        myColor.r = parseInt(result[1], 16);
        myColor.g = parseInt(result[2], 16);
        myColor.b = parseInt(result[3], 16);
    }  
    curColor = myColor;
    console.log(curColor);
}

脚本假定myColor 和curColor 已经定义为全局范围。

还记得更改该行以匹配新的 clickColor 定义：

<input type="color" value="#ff0000" onchange="clickColor()" id="html5colorpicker">

你可以通过改变输入的value属性来改变默认颜色

Answer 2

试试这个：你可以使用 spectrum.js 和 jquery ui 来实现颜色选择器。

HTML：

<h2>Basic Usage</h2>
<input type='text' class="basic"/>

jQuery:

$(".basic").spectrum({
    color: "#f00",
    change: function(color) {
        $("#basic-log").text("change called: " + color.toHexString());
    }
});

JSFiddle Demo

http://bgrins.github.io/spectrum/spectrum.js
http://bgrins.github.io/spectrum/spectrum.css