CountUp/index.html at main · Tim-Seidell/CountUp · 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
<HTML>
    <head>

    </head>
    <body>
        <div style = "text-align: center;">
            <div style = "padding-bottom: 20%;"></div>

            <p class = "text" style = "font-size: 35">It has been...</p>
            <p class = "text center"><span id="datetime"></span></p>

            <button class = "btn text" style = "margin-top: 50px;" id="resetButton">Reset</button>
        </div>

        <style>
            .text{
                font-size: 50px;
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            }

            .center {
                margin: auto;

                text-align: center;
            }

            .btn {
                width: 150px;
                height: 40px;
                font-size: 20px;
                border: none;
                background-color: #3B7BED;
                border-radius: 8px;
                color: white;
            }
        </style>

        <script type="text/javascript">
            document.getElementById("resetButton").onclick = function () {
                var today = new Date();
                var dd = String(today.getDate()).padStart(2, '0');
                var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
                var yyyy = today.getFullYear();
                var hr = String(today.getHours()).padStart(2, 0);
                var mn = String(today.getMinutes()).padStart(2, 0);
                var sc = String(today.getSeconds()).padStart(2, 0);

                rightNow = mm + dd + yyyy + hr + mn + sc;

                const re = /(.*\?)/;
                const match = window.location.href.match(re);

                location.href = match[1] + rightNow;
            };

            function msToTime(totalTime) {
                // get total seconds between the times
                var delta = Math.abs(totalTime) / 1000;

                var days = Math.floor(delta / 86400);
                delta -= days * 86400;

                var hours = Math.floor(delta / 3600) % 24;
                delta -= hours * 3600;

                var minutes = Math.floor(delta / 60) % 60;
                delta -= minutes * 60;

                var seconds = Math.floor(delta % 60);

                dayString = (days === 1 ? days + " day, " : days + " days, ");
                hourString = (hours === 1 ? hours + " hour, " : hours + " hours, ");
                minuteString = (minutes === 1 ? minutes + " minute, " : minutes + " minutes, ");
                secondString = (seconds === 1 ? seconds + " second" : seconds + " seconds");

                return dayString + hourString + minuteString + secondString;
            }

            function updateTime() {
                const startDate = returnDateString(window.location.href);
                const start = new Date(startDate);
                const end = new Date();
                var miliseconds = Math.abs(end - start);

                document.getElementById("datetime").innerHTML = msToTime(miliseconds);
                setTimeout(updateTime, 1000);
            }

            function returnDateString(url) {
                var re = /.*\?(\d\d)(\d\d)(\d\d\d\d)(\d\d)(\d\d)(\d\d)/;
                const match = url.match(re);
                return match[3] + "/" + match[1] + "/" + match[2] + " " + match[4] + ":" + match[5] + ":" + match[6];
            }

            updateTime();
        </script>
    </body>
</HTML>