How To Become A Programmer Without A Degree & Experience

Happy New Year with JavaScript

Happy New Year with JavaScript

Happy New Year with JavaScript

 

 

Introduction & Demo

Happy New Year, Everyone!!

Have a wonderful new year and let’s enjoy coding this year, too!

As a new year’s gift, I created a little animation message with JavaScript 🙂

Demo: link

 
 

Sample Code

<!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>