2016-07-13 11 views
-3

Ich muss einen Knopf bauen, der das Farbspektrum onclick anzeigt, und durch Klicken auf einen Punkt innerhalb des Farbspektrums wird die Sonderfarbe ausgewählt und die Textfarbe ändert sich entsprechend zur ausgewählten Farbe.Wie man Spektralfarben Knopf/Farbwähler Knopf macht

Dies ist eine Art, was ich brauche

enter image description here

Vielen Dank im Voraus

P. S Spectrum Farbbereich als auch zu erreichen mit Tastatur benötigen.

+5

Wo ist dein Versuch? – Xufox

+0

Erstellen einer Farbe Apectrum-Taste, die der Text ändert sich entsprechend seiner Farbe – barak

+2

Ich bin mir nicht sicher, was Sie in Ihren Kommentaren beziehen. Sie scheinen Ihre Anfrage anders zu formulieren. Aber soweit wir keine _attempt_ sehen (d. H. _code of your_), sind die meisten von uns nicht daran interessiert, diese Frage zu beantworten. – Xufox

Antwort

3

Dies ist eine grundlegende Übersicht dessen, was Sie benötigen würden. Reduzieren Sie den Wert i und widthdivs (Sie müssen etwas Mathe), um glattere Farben zu erhalten. Hoffe das hilft :).

function getColor(){ 
 
    style = window.getComputedStyle(this), 
 
    bgColor = style.getPropertyValue('background-color'); 
 
    document.querySelector('h1').style.color = bgColor; 
 
} 
 
var cont = document.getElementById('cont'); 
 
for(i=0; i<350; i=i+14){ 
 
    var div=document.createElement('div'); 
 
    cont.appendChild(div); 
 
    div.style.background = 'hsl(' + i + ',100%, 50%)'; 
 
    div.addEventListener('click', getColor); 
 
}
@import url('https://necolas.github.io/normalize.css/latest/normalize.css'); 
 
#cont{ border:1px solid black; width:200px; height:30px; } 
 
#cont div{ 
 
    width:4%; height:100%; float:left; 
 
}
<div id="cont"> 
 
</div> 
 
<h1>text</h1>

+0

Vielleicht bin ich blind, aber ich sehe nicht wo oder Wie postet ein Farbwähler, der wie ein Spektrum aussieht. Der einfachste Weg, ein Spektrum zu realisieren, ist der, wie ich es vor vielen Jahren gemacht habe: Ich habe das hufeisenförmige CIE-Fernsehfarbendiagramm konsultiert und trotzdem viele Haltepunkte digitalisiert. Ich segelte dann linear von einem Haltepunkt zum nächsten. Das Ergebnis war ein einfaches Modell Ihres Standard-VIBGYOR (oder Roy G. Biv: es hängt davon ab, was freshman Physik-Text Sie verwendeten) Paradigma. –

+1

@BruceDavidWilner Wie im ursprünglichen Post gesagt, können einfache Anpassungen von 'i' und der' div' Breite ein * spektrumiger * Ergebnis ergeben: https://jsfiddle.net/Lo5eky9m/ –