Jump to content
ELFORUM - Forumul electronistilor

Schimbare interactiva culoare text html

Kreator

By Kreator
in Arduino

Recommended Posts

Kreator Experienced

Kreator

Posted
Posted (edited)

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!

Edited by Kreator
Link to comment
  • Replies 8
  • Created
  • Last Reply

Top Posters In This Topic

  • Kreator

    3

  • nico_2010

    2

  • Liviu M

    1

  • Mircea

    1

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

Liviu M Grand Master

Liviu M

Posted
Posted (edited)

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

Edited by Liviu M
Link to comment
Guest

Guest

Posted
Posted (edited)

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

 

Edited by Guest
Link to comment
Mircea Grand Master

Mircea

Posted
Posted

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.

Link to comment
Guest

Guest

Posted
Posted (edited)

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


 

Edited by Guest
Link to comment
Guest
This topic is now closed to further replies.
Go to topic listing


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.Terms of Use si Guidelines