Happy New Year with JavaScript
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>HAPPY NEW YEAR</title> | |
| <style> | |
| body { | |
| background-color: skyblue; | |
| } | |
| h1 { | |
| color: darkblue; | |
| margin-top: 250px; | |
| font-size: 50px; | |
| text-align: center; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1 id="messageLabel"></h1> | |
| <script> | |
| var message = "Happy New Year!!"; | |
| var msgCount = 0; | |
| var blinkCount = 0; | |
| var blinkFlg = 0; | |
| var timer1, timer2; | |
| var messageLabel = document.getElementById("messageLabel"); | |
| function textFunc() { | |
| messageLabel.innerHTML = message.substring(0, msgCount); | |
| if (msgCount == message.length) { | |
| // Stop timer | |
| clearInterval(timer1); | |
| // Start blinking animation! | |
| timer2 = setInterval("blinkFunc()", 200); | |
| } else { | |
| msgCount++; | |
| } | |
| } | |
| function blinkFunc() { | |
| // blink 5 times. | |
| if (blinkCount < 6) { | |
| if (blinkFlg == 0) { | |
| messageLabel.innerHTML = message; | |
| blinkFlg = 1; | |
| blinkCount++; | |
| } else { | |
| messageLabel.innerHTML = ""; | |
| blinkFlg = 0; | |
| } | |
| } else { | |
| // Stop timer | |
| clearInterval(timer2); | |
| } | |
| } | |
| timer1 = setInterval("textFunc()", 150); // every 150 milliseconds | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment