.blue { color: blue; border: 2px solid green; } </style> <script language="JavaScript" type="text/javascript"> // Set global variables var totalCycles = 0; var currColor = 0; var classes, intervalID; // Build array of rule selector names function init() { classes = ["red", "green", "yellow", "blue"]; } // Advance the color by one function cycleColors() { // reset counter to 0 if it reaches 3; otherwise increment by 1 currColor = (currColor == 3) ? 0 : ++currColor; // set style color to new color from array document.getElementById("hot1").className = classes[currColor]; // invoke this function again until total = 27 so it ends on red if (totalCycles++ < 27) { intervalID = setTimeout("cycleColors()", 100); } else { clearTimeout(intervalID); } } </script> </head> <body onload="init(); cycleColors();"> <h1>Welcome to the <span class="red" id="hot1">Hot Zone</span> Web Site</h1> <hr> </body> </html>
Related Scripts with Example Source Code in same category :
