web-lab-programs/program3.html at master · bhargav2103/web-lab-programs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE HTML>
<html>
	<head>
		<style>
			p
			{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		</style>
	</head>
<body>
	<p id="demo"></p>
	<script>
		var var1 = setInterval(inTimer, 1000);
		var fs = 5;
		var ids = document.getElementById("demo");
		function inTimer()
		{
			ids.innerHTML = 'TEXT GROWING';
			ids.setAttribute('style', "font-size: " + fs + "px; color: red");
			fs += 5;
			if(fs >= 50 )
			{
				clearInterval(var1);
				var2 = setInterval(deTimer, 1000);
			}
		}
		function deTimer()
		{
			fs -= 5;
			ids.innerHTML = 'TEXT SHRINKING';
			ids.setAttribute('style', "font-size: " + fs + "px; color: blue");
			if(fs === 5 )
			{
				clearInterval(var2);
			}
		}
	</script>
</body>
</html>