Schimbare interactiva culoare text html

Kreator · Aprilie 9, 2022

Buna ziua,

Am facut o pagina care are trei slide-uri.

Va rog frumos sa-mi dati o idee cum se poate schimba culoarea unui text in html (rgb) in functie de valorile celor trei slide-uri.

Mai jos este ce am incercat pana acum:

    <!DOCTYPE HTML><html><head>
    <title>Ceas curcubeu</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <head>
    <form action="/get">
    <style>
    body {background-color:#ededfe;}

  h1 {
  text-align: center;
  color: #4CAF50;
}

  h2 {
  text-align: center;
  color: rgb(1, 100, 50);
}


.slidecontainer1 {
  width: 50%;
  position:relative;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

.slider1 {
  -webkit-appearance: none;
  width: 100%;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider1:hover {
  opacity: 1;
}

.slider1::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: red;
  cursor: pointer;
}

.slider1::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}


.slidecontainer2 {
  width: 50%;
  position:relative;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

.slider2 {
  -webkit-appearance: none;
  width: 100%;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider2:hover {
  opacity: 1;
}

.slider2::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: lime;
  cursor: pointer;
}

.slider2::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}


.slidecontainer3 {
  width: 50%;
  position:relative;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

.slider3 {
  -webkit-appearance: none;
  width: 100%;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider3:hover {
  opacity: 1;
}

.slider3::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: blue;
  cursor: pointer;
}

.slider3::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}
</style>
</head>
<body>

  <h1>Paleta culori</h1>



<div class="slidecontainer1">
  <input type="range" min="1" max="100" value="50" class="slider1" id="myRange1">
  <p>Value: <span id="demo1"></span></p>
</div>

<div class="slidecontainer2">
  <input type="range" min="1" max="100" value="50" class="slider2" id="myRange2">
  <p>Value: <span id="demo2"></span></p>
</div>

<div class="slidecontainer3">
  <input type="range" min="1" max="100" value="50" class="slider3" id="myRange3">
  <p>Value: <span id="demo3"></span></p>
</div>



<h2 id="demo" >14:08</h2>

<script>
var ora = document.getElementById("demo");

var slider1 = document.getElementById("myRange1");
var output1 = document.getElementById("demo1");
output1.innerHTML = slider1.value;


var slider2 = document.getElementById("myRange2");
var output2 = document.getElementById("demo2");
output2.innerHTML = slider2.value;

var slider3 = document.getElementById("myRange3");
var output3 = document.getElementById("demo3");
output3.innerHTML = slider3.value;

slider1.oninput = function() {
  output1.innerHTML = this.value;
  demo.style.color= 'rgb(255 , 0, 0)';
}

slider2.oninput = function() {
  output2.innerHTML = this.value;

}
slider3.oninput = function() {
  output3.innerHTML = this.value;
}



</script>

</body>
</html>

Problema este in linia :

demo.style.color= 'rgb(255 , 0, 0)';

unde trebuie inlocuit "255,0 , 0" cu valorile (slider1, slider2, slider3) si nu stiu sintaxa.

Va multumesc!

Editat Aprilie 9, 2022 de Kreator

Liviu M · Aprilie 9, 2022

Pana primesti raspuns de la cineva care chiar se pricepe, poti incerca sa inlocuiesti codul de dintre

output3.innerHTML = slider3.value;

...

</script>

</body>
</html>

cu

slider1.oninput = function() {
  output1.innerHTML = this.value;
  updateStyle();
}

slider2.oninput = function() {
  output2.innerHTML = this.value;
  updateStyle();
}
slider3.oninput = function() {
  output3.innerHTML = this.value;
  updateStyle();
}

updateStyle = function(){
  demo.style.color= 'rgb(' + output1.innerHTML + ' , ' + output2.innerHTML + ', ' + output3.innerHTML + ')';
}

LE Ca sa vezi efectele mai bine, mareste intervalele de la 1 .. 100 la 0 .. 255 (din cate stiu e, culorile sunt reprezentate pe 8 biti).

Editat Aprilie 9, 2022 de Liviu M

Kreator · Aprilie 9, 2022

Multumesc mult, @Liviu M!!!

Am inlocuit si merge exact cum mi-am dorit!

nico_2010 · Aprilie 10, 2022

Si totusi care este legatura cu Arduino?

Kreator · Aprilie 10, 2022

@nico_2010

Ma joc cu un display LED_RGB conectat la un NodeMCU (de fapt e un ceas) si vreau sa-i schimb culoarea si sa-i setez ora de pe telefon.

Aprilie 10, 2022

@Kreator, nu la tine am sa ma refer mai jos.
Banuiesc ca este ceva preluat de pe net.

Fie ca are sau nu legatura cu Arduino, condul postat mai sus este un exemplu de cum NU trebuie facuta programarea.
S-a ajuns in asa hal de prostitutie in materie de programare ...

Editat Aprilie 10, 2022 de Vizitator

Mircea · Aprilie 10, 2022

Cred ca orice coleg ar aprecia sa pui tu codul scris corect aici. Asa, critici putem indica in nestire. Evident, trebuie folosit si un limbaj civilizat.

Un lucru trebuie inteles, nu suntem toti programatori de meserie, nu toti gandim la fel. Suntem pe un forum de hobby. Revenind la mesajul principal: pune dta codul corect sau macar sugereaza ce nu e elegant in codul expus.

Aprilie 10, 2022

Poate nu ai inteles ideea interventiei mele.
Am spus CLAR ca nu fac referire la nici un coleg.
La fel de clar cred ca este ca nu am spus ca acest cod nu este corect in sensul ca nu "merge si asa".
Dar ,mai ales pentru ca suntem pe un site de hobby, eu cred ca este bine sa facem lucrurile sa fie ... frumoase.
Codul de mai sus este , pentru mine, o (mica) mostruozitate in primul rand pentru ca utilizeaza CSS (Cascading ...).
Pai daca "cascading" ... de ce trebuie sa tocim tastatura sa scriem aceleasi caractere de zeci de ori ?

Chiar cred ca merge ca provocare (desi este final de weekend):
Eu zic ca acest cod se poate reduce cu cel putin 50%.

Editat Aprilie 10, 2022 de Vizitator

nico_2010 · Aprilie 11, 2022

Scopul a fost atins, topicul este inchis.

Autentificare

Schimbare interactiva culoare text html

Postări Recomandate

Kreator

Link spre comentariu

Top autori în acest subiect

Zile populare

Top autori în acest subiect

Zile populare

Imagini postate

Liviu M

Link spre comentariu

Kreator

Link spre comentariu

nico_2010

Link spre comentariu

Kreator

Link spre comentariu

Vizitator

Link spre comentariu

Mircea

Link spre comentariu

Vizitator

Link spre comentariu

nico_2010

Link spre comentariu

Activitate

Informații Importante