Páginas

▼
▼

domingo, 8 de septiembre de 2019

JavaScript setInterval clearInterval

En una entrada anterior ya hemos visto estos timers, y en otra hemos visto cómo cambiar alternativamente de color.
En esta ocasión vamos a ver un texto que alterna entre dos colores cada 1000 milisegundos y un botón que detiene esta alternancia.

Nuestro ejemplo en vivo:

HTML + JavaScript


 <!DOCTYPE html>  
 <html>  
 <head>  
  <meta charset="UTF-8" />  
  <title>Ejemplo de setInterval/clearInterval</title>  
  <script>   
   var procesoID;  
   function alternarColor() {   
    var oElem = document.getElementById("mi_mensaje");   
    oElem.style.color = oElem.style.color == "red" ? "blue" : "red";   
   }   
   function detenerCambioDeColor() {   
    clearInterval(procesoID);   
   }  
   procesoID = setInterval(alternarColor, 1000);  
  </script>  
 </head>  
 <body onload="alternarColor();">  
  <div id="mi_mensaje">  
   <p><i>A brief history of time.</i><br>Stephen Hawking</p>  
  </div>  
  <button onclick="detenerCambioDeColor();">Detener</button>  
 </body>  
 </html>

en

No hay comentarios:

Publicar un comentario