So implementieren Sie einen Farbwähler anstelle von statischen Farben

Question

Ich entwickle eine Malwebseite. Ich habe ein Skript, um Farben auszuwählen. Es funktioniert bis jetzt gut.

Hier ist der Code zum Auswählen meiner Farben.

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

Die Farben werden als

gezeigt Dies ist der Code meiner Funktion ist hallo()

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

Aber ich möchte eine Farbauswahl implementieren. Ich habe auch das Skript für den Farbwähler.

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

Meine Frage ist, DASS: Wie kann ich Farbauswahl mit meinem aktuellen Code integrieren? Jede Hilfe würde sehr geschätzt werden.

Answer 1

Versuchen Sie Folgendes: Sie können zusammen mit jquery ui für die Implementierung von Colorpicker verwenden.

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

Answer 2

Sie müssen nur die Implementierung der Methode clickColor ändern, die die Methode ist, die aufgerufen wird, nachdem die Farbe von html5colorpicker geändert wurde.

So etwas:

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); 
} 

Das Skript geht davon aus, dass myColor und curColor bereits mit globalem Bereich definiert.

Denken Sie auch daran, dass die Linie zu ändern, um die neuen clickColor Definition entsprechen:

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

Sie können durch Änderung des value Attribut des Eingangs