miscellany/timer.php at main · njsoly/miscellany · 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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE HTML>
<html>
<head>

	<title id=counterTitle>counter </title>
	<script src="scripts.js" type="text/javascript"></script>
	<meta charset="utf-8" />
	<meta http-equiv='Pragma' content='no-cache' />
	<link rel="stylesheet" type="text/css" href="boxy_dark.css" />


	<style>
	.topDiv {
		max-width: 99vw;
		max-height: 99vh;
		border: 1px dashed rgba(0,0,0,0.24);
		background-color: rgba(0,200,255,0.5);
	}
	#timerDiv {
		min-height: 10vh;
		font-size: 2.5em;
		text-align: center;
		padding-top: 2.24vh;
		background-color: #835;
		font-family: monospace;
	}
	button {
		font-size: 2em;
		padding: .3em;
	}
	fieldset {
		background-color: rgba(0,48,20,0.4);
	}
	html {
		background-color: #292933;
		color: rgb(222,224,240);
	}
	</style>
</head>
<body>
	<main>

		<div class="topDiv">
			<div id="timerDiv" title="the timer.">
			</div>
			<div class=btns>
				<fieldset title="timer control buttons">
					<button onclick="toggleTimer();" id=timerToggle>
					stop
					</button>
					<button onclick="resetTimer();">
					reset
					</button>
				</fieldset>
			</div>

		</div>
	</main>

	<script id=timerDivJsScript>
		timerCounter = 0;
		timerRunning = false;
		var x;
		incrementTimer = function (){
			document.getElementById("timerDiv").innerText = timerCounter + "s";
			timerCounter++;

		};
		resetTimer = function(){
			timerCounter = -1;
			incrementTimer();
			incrementTimer();
		};
		function startTimer(){
			(x = setInterval(
				function(){
					incrementTimer();
				}, 1000
			));
			// this making too many timers
			timerRunning = true;
			toggleButton.innerText = "stop";
		};

		// this does not work.
		function stopTimer(){
			try{
				clearInterval(x);
			} catch(err){
				console.error("didn't stop timer.");
			}
			timerRunning = false;
			toggleButton.innerText = "start";
		};
		function toggleTimer(){
			toggleButton = document.getElementById("timerToggle");
			if(timerRunning == true){
				stopTimer();
			}
			else {
				startTimer();
			}
			return timerRunning;
		};

	</script>
	<script>
	startTimer();
	</script>
</body>
</html>