Skip to content

Instantly share code, notes, and snippets.

@codingwithsara

codingwithsara/index.html Secret

Created November 9, 2018 05:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save codingwithsara/d98e6dd10c9df1b5918df5f5df6a447c to your computer and use it in GitHub Desktop.
Save codingwithsara/d98e6dd10c9df1b5918df5f5df6a447c to your computer and use it in GitHub Desktop.
Download ZIP
Happy New Year with JavaScript
Raw
index.html
<!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