如何實現顏色選擇器而不是靜態顏色

我正在開發一個繪畫網站。我有一個選擇顏色的腳本。到現在爲止工作狀況良好。如何實現顏色選擇器而不是靜態顏色

這裏是選擇我的顏色的代碼。

<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">

我的問題是：如何集成顏色選擇器我目前的代碼？任何幫助將非常感激。

來源

2016-04-18 Ali Zia

的value屬性關我的頭頂部更改默認的顏色（這不是一個完整的解決方案），你可以使用3個滑塊......紅色的綠色和藍色。然後有一個框顯示滑塊更新後的當前顏色 – Harvtronix

我有一個靜態顏色部分。我只是想讓它變成顏色選擇器。而不是靜態部分。 –

請訪問此鏈接http://www.eyecon.ro/colorpicker/#implement –

試試這個：你可以使用spectrum.js以及jQuery UI來實現colorpicker。

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

來源

2016-04-18 05:18:20

讓我看看它。 –

謝謝！有效。 –

高興地幫助你:) –

您只需要更改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">

您可以通過改變輸入

來源

2016-04-18 05:53:34

如何實現顏色選擇器而不是靜態顏色

回答

相關問題