-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
103 lines (90 loc) · 3.27 KB
/
index.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
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<script>
/*
* Basic Count Up from Date and Time
* Author: @mrwigster / https://guwii.com/bytes/count-date-time-javascript/
*/
window.onload = function () {
// Month Day, Year Hour:Minute:Second, id-of-element-container
countUpFromTime("Jan 31, 2021 12:00:00", 'countup1'); // ****** Change this line!
};
function countUpFromTime(countFrom, id) {
countFrom = new Date(countFrom).getTime();
var now = new Date(),
countFrom = new Date(countFrom),
timeDifference = (now - countFrom);
var secondsInADay = 60 * 60 * 1000 * 24,
secondsInAHour = 60 * 60 * 1000;
days = Math.floor(timeDifference / (secondsInADay) * 1);
hours = Math.floor((timeDifference % (secondsInADay)) / (secondsInAHour) * 1);
mins = Math.floor(((timeDifference % (secondsInADay)) % (secondsInAHour)) / (60 * 1000) * 1);
secs = Math.floor((((timeDifference % (secondsInADay)) % (secondsInAHour)) % (60 * 1000)) / 1000 * 1);
var idEl = document.getElementById(id);
idEl.getElementsByClassName('days')[0].innerHTML = days;
idEl.getElementsByClassName('hours')[0].innerHTML = hours;
idEl.getElementsByClassName('minutes')[0].innerHTML = mins;
idEl.getElementsByClassName('seconds')[0].innerHTML = secs;
clearTimeout(countUpFromTime.interval);
countUpFromTime.interval = setTimeout(function () { countUpFromTime(countFrom, id); }, 1000);
}
</script>
<style>
.countup {
text-align: center;
margin-bottom: 20px;
display: flex;
flex: 1 1 auto;
flex-direction: row;
}
.item {
padding: 5px 0;
}
.countup .timeel {
display: inline-block;
padding: 10px;
background: #151515;
margin: 0;
color: white;
min-width: 2.6rem;
margin-left: 13px;
border-radius: 10px 0 0 10px;
}
.countup span[class*="timeRef"] {
border-radius: 0 10px 10px 0;
margin-left: 0;
background: #e8c152;
color: black;
}
@media only screen and (max-width: 600px) {
.countup {
flex-direction: column;
}
}
</style>
</head>
<body>
<p style="text-align: center;">
Time since Анжелика knew and didn't tell us
</p>
<div class="countup" id="countup1">
<div class="item">
<span class="timeel days">00</span>
<span class="timeel timeRefDays">days</span>
</div>
<div class="item">
<span class="timeel hours">00</span>
<span class="timeel timeRefHours">hours</span>
</div>
<div class="item">
<span class="timeel minutes">00</span>
<span class="timeel timeRefMinutes">minutes</span>
</div>
<div class="item">
<span class="timeel seconds">00</span>
<span class="timeel timeRefSeconds">seconds</span>
</div>
</div>
</body>
</html>