[JavaScript Learning Series] DHTML simple animation “line color change dynamically by setInterval()”

Very simple JavaScript codes.

Let’s change line colors dynamically by setInterval() element.

Contents

What you will make
Codes of line color change dynamically by setInterval()
Related articles

What you will make

Please see the small movie below to know what you will make.

Codes of line color change dynamically by setInterval()

The script is the following.

<!DOCTYPE html>
<body>
<h1>Simple JavaScript animation</h1>
<div id="urgent">
   <h2>Warning<h2>
    <div>
      <ul><li>Do not touch any metal parts of the equipments. If so users might get injured.<li>Read the operation manual before use.</ul>
    </div>
</div>
<script type="text/javascript">
  var e =document.getElementById("urgent");
  e.style.border = "solid black 10px";
  e.style.padding = "30px";
  var colors = ["white", "yellow", "orange", "red"]
  var nextColor=0;

  setInterval(function(){   
      e.style.borderColor=colors[nextColor++%colors.length]; }, 500);
</script>
</body>
</html>