forked from madcitygg/xsplit-countdown
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcountdown.html
107 lines (70 loc) · 2.6 KB
/
countdown.html
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
<!doctype html>
<html class="">
<head>
<title>Mad City stream timer</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width">
<!-- SET COUNTDOWN DURATION HERE -->
<!-- SET COUNTDOWN DURATION HERE -->
<!-- SET COUNTDOWN DURATION HERE -->
<!-- SET COUNTDOWN DURATION HERE -->
<!-- SET COUNTDOWN DURATION HERE -->
<script type="text/javascript">
var countdownMinutes = 5;
</script>
<!-- SET TEXT STYLES HERE -->
<!-- SET TEXT STYLES HERE -->
<!-- SET TEXT STYLES HERE -->
<!-- SET TEXT STYLES HERE -->
<!-- SET TEXT STYLES HERE -->
<style type="text/css">
.timer {
color: #fff;
font-size: 50px;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
text-shadow: 0 0 1px rgba(0, 0, 0, .95);
}
</style>
</head>
<!-- NOTHING BELOW HERE NEEDS TO BE EDITED -->
<!-- NOTHING BELOW HERE NEEDS TO BE EDITED -->
<!-- NOTHING BELOW HERE NEEDS TO BE EDITED -->
<!-- NOTHING BELOW HERE NEEDS TO BE EDITED -->
<!-- NOTHING BELOW HERE NEEDS TO BE EDITED -->
<!-- NOTHING BELOW HERE NEEDS TO BE EDITED -->
<!-- NOTHING BELOW HERE NEEDS TO BE EDITED -->
<!-- NOTHING BELOW HERE NEEDS TO BE EDITED -->
<!-- NOTHING BELOW HERE NEEDS TO BE EDITED -->
<!-- NOTHING BELOW HERE NEEDS TO BE EDITED -->
<body>
<h1 class="timer" id="js-stream-timer">00:00</h1>
<!-- MAIN JS -->
<script type="text/javascript">
// credit to robbmj on stackoverflow
// this is almost directly copied from him
function start(duration, textElement) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
textElement.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
window.onload = function () {
var totalMinutes = 60 * countdownMinutes;
var textElement = document.querySelector('#js-stream-timer');
textElement.textContent = countdownMinutes < 10 ? '0' + countdownMinutes + ':00' : '' + countdownMinutes + ':00'
start(totalMinutes, textElement);
};
</script>
<style type="text/css">
html, body { width: 300px; background: none transparent; overflow: hidden; }
* { margin: 0; padding: 0; line-height: 1; }
</style>
</body>
</html>