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

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

试试这个：你可以使用var number = prompt('What\'s your favority number?'); switch(number){ case (number < 10): console.log('Your number is to small.'); break; case (number < 100): console.log('At least you\'re in the double digits.'); break; case (number < 1000): console.log('Looks like you\'re in three digits.'); break; default: console.log('Looks like you\'re in the fouth digits.'); } 和jquery ui来实现colorpicker。

HTML：

spectrum.js

jQuery的：

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

<强> JSFiddle Demo

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

Answer 2

您只需要更改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属性来更改默认颜色