Post
Ask Question

Blinking Element in Javascript

Blinking Element in Javascript

 
We can apply the blinking feature in any element with the feature of javascript. In this example, we take a paragraph(p1). To apply the feature of blinking we set the timer in javascript, which calls the function again and again after a particular time period.
  1. timer=setTimeout("blinkmypara()",200);  
  1. <html>  
  2.   
  3.    <head>  
  4.       <script type="text/javascript">  
  5.       function blinkmypara() {  
  6.          if (!document.getElementById('p1').style.color) {  
  7.             document.getElementById('p1').style.color = "red";  
  8.          }  
  9.          if (document.getElementById('p1').style.color == "red") {  
  10.             document.getElementById('p1').style.color = "green";  
  11.          } else {  
  12.             document.getElementById('p1').style.color = "red";  
  13.          }  
  14.          if (document.getElementById('p1').style.color == "green") {  
  15.             document.getElementById('p1').style.color = "blue";  
  16.          } else {  
  17.             document.getElementById('p1').style.color = "red";  
  18.          }  
  19.          timer = setTimeout("blinkmypara()", 200);  
  20.       }  
  21.   
  22.       function stoptimer() {  
  23.          clearTimeout(timer);  
  24.       }  
  25.       </script>  
  26.    </head>  
  27.   
  28.    <body onload="blinkmypara()" onunload="stoptimer()">  
  29.       <p id="p1">Mahak</p>  
  30.    </body>  
  31.   
  32. </html>