heavylildude.github.io/testing.html at master · heavylildude/heavylildude.github.io · 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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html>
<head>
	<title>Chris Randomizer</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;

		}

		#boo {
			width: 100vw;
			height: 40vh;
			padding-top: 10vh;
			font-size: 200px;
			text-align: center;
		}

		#btn {
			width: 80px;
			height: 50px;
			padding-top: 30px;
			background-color: red;
			border-radius: 100px;
			margin: 0 auto;
			text-align: center;
			font-weight: bold;
			color:white;
			cursor: pointer;
			font-family: sans-serif;
		}
	</style>
</head>
<body>
	<div id="boo"></div>
	<div id="btn" onclick="boom()">CLICK</div>
	<script type="text/javascript">
		function getRndInteger() {
		  return Math.floor(Math.random() * (3 - 1 + 1) ) + 1;
		}

		function animateValue(obj, start, end, duration) {
		  let startTimestamp = null;
		  const step = (timestamp) => {
		    if (!startTimestamp) startTimestamp = timestamp;
		    const progress = Math.min((timestamp - startTimestamp) / duration, 1);
		    obj.innerHTML = Math.floor(progress * (end - start) + start);
		    if (progress < 1) {
		      window.requestAnimationFrame(step);
		    }
		  };
		  window.requestAnimationFrame(step);
		}

		function boom() {
			document.getElementById('btn').style.backgroundColor = 'grey';
			animateValue(document.getElementById('boo'), 20, getRndInteger(), 1000);
			setTimeout(function(){ document.getElementById('btn').style.backgroundColor = 'red'; }, 1000);

		}
	</script>
</body>
</html>