tw/pg3.html at master · groot14/tw · 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
44
45
46
47
48
49
50
<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		p{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
		}
	</style>
	<title></title>
</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>