https://judytrombetta.com/scripts/countdown.js

1var Countdown = (function () {
2    'use strict';
3
4    function init(options) {
5        var targetDate = options.targetDate;
6        var clockEl = document.getElementById(options.clockId);
7        var dateTextEl = document.getElementById(options.dateTextId);
8
9        if (!clockEl) return;
10
11        var showDays = options.showDays !== false;
12        var showHours = options.showHours !== false;
13        var showMinutes = options.showMinutes !== false;
14        var showSeconds = options.showSeconds || false;
15
16        // If nothing selected, default to days, hours, minutes
17        if (!options.showDays && !options.showHours && !options.showMinutes && !options.showSeconds) {
18            showDays = true;
19            showHours = true;
20            showMinutes = true;
21        }
22
23        function update() {
24            var now = new Date();
25            var diff = targetDate - now;
26
27            if (diff <= 0) {
28                clockEl.innerHTML = '<span class="countdown-expired">Countdown complete!</span>';
29                if (dateTextEl) dateTextEl.style.display = 'none';
30                return;
31            }
32
33            var seconds = Math.floor(diff / 1000);
34            var minutes = Math.floor(seconds / 60);
35            var hours = Math.floor(minutes / 60);
36            var days = Math.floor(hours / 24);
37
38            seconds = seconds % 60;
39            minutes = minutes % 60;
40            hours = hours % 24;
41
42            var html = '';
43
44            if (showDays) {
45                html += createSection(days, days === 1 ? 'Day' : 'Days');
46            }
47            if (showHours) {
48                var displayHours = showDays ? hours : (days * 24 + hours);
49                html += createSection(displayHours, displayHours === 1 ? 'Hour' : 'Hours');
50            }
51            if (showMinutes) {
52                var displayMinutes = minutes;
53                if (!showHours && !showDays) {
54                    displayMinutes = Math.floor((targetDate - now) / 60000);
55                } else if (!showHours) {
56                    displayMinutes = hours * 60 + minutes;
57                }
58                html += createSection(displayMinutes, displayMinutes === 1 ? 'Minute' : 'Minutes');
59            }
60            if (showSeconds) {
61                html += createSection(seconds, seconds === 1 ? 'Second' : 'Seconds');
62            }
63
64            clockEl.innerHTML = html;
65        }
66
67        function createSection(value, label) {
68            var padded = value < 10 ? '0' + value : value;
69            return '<div class="countdown-section">' +
70                '<span class="countdown-amount">' + padded + '</span>' +
71                '<span class="countdown-period">' + label + '</span>' +
72                '</div>';
73        }
74
75        update();
76        setInterval(update, 1000);
77    }
78
79    return {
80        init: init
81    };
82})();