https://okaywan.com/js/jquery.downCount.js

1"use strict";
2/**
3 * downCount: Simple Countdown clock with offset
4 * Author: Sonny T. <[email protected]>, sonnyt.com
5 */
6$(".alt-clock .clock-place").append("<div class='clock-container' > <header class='c-logo-top'> <img class='logo' src='./img/logo_only.png' alt='Logo image'> </header> <div class='c-metric c-layout'> <div class='c-dot-small'> <div class='rot30 c-rect-s c-rect'> <div class='c-mes'></div> </div> <div class='rot60 c-rect-s c-rect'> <div class='c-mes'></div> </div> <div class='rot120 c-rect-s c-rect'> <div class='c-mes'></div> </div> <div class='rot150 c-rect-s c-rect'> <div class='c-mes'></div> </div> <div class='rot210 c-rect-s c-rect'> <div class='c-mes'></div> </div> <div class='rot240 c-rect-s c-rect'> <div class='c-mes'></div> </div> <div class='rot300 c-rect-s c-rect'> <div class='c-mes'></div> </div> <div class='rot330 c-rect-s c-rect'> <div class='c-mes'></div> </div> </div> <div class='c-minsec-number'> <div class='c-top c-num'>00</div> <div class='c-right c-num'>15</div> <div class='c-bottom c-num'>30</div> <div class='c-left c-num'>45</div> </div> </div> <div class='c-minute-bg c-layout'> <div class='c-circle'></div> </div> <div class='c-minute c-layout '> <div class='c-circle'></div> <div class='c-dot'></div> </div> <div class='c-second-bg c-layout'> <div class='c-circle'></div> </div> <div class='c-second c-layout '> <div class='c-circle'></div> <div class='c-dot'></div> </div> <div class='c-layout c-separator'> <div class='c-fill'> </div> </div> <div class='c-hour c-layout'> <span class='number hours'>00</span> <span class='metric'>h</span> </div> <div class='c-day c-layout'> <span class='number days'>000</span> <span class='metric'>days</span> </div> </div>");
7
8if($(".alt-clock .clock-place").attr('data-logosrc') 
9   && $(".alt-clock .clock-place").attr('data-logosrc') != ""){
10	var imgUrlSrc = $(".alt-clock .clock-place").attr('data-logosrc');
11	$(".alt-clock .clock-place .logo").attr("src",imgUrlSrc) ;
12//	$(".alt-clock .clock-place .logo").attr("src") = $(".alt-clock .clock-place").attr('data-logosrc');
13}
14
15(function ($) {
16
17    $.fn.downCount = function (options, callback) {
18        var settings = $.extend({
19                date: null,
20                offset: null
21            }, options);
22
23        // Throw error if date is not set
24        if (!settings.date) {
25            $.error('Date is not defined.');
26        }
27
28        // Throw error if date is set incorectly
29        if (!Date.parse(settings.date)) {
30            $.error('Incorrect date format, it should look like this, 12/24/2030 12:00:00.');
31        }
32
33        // Save container
34        var container = this;
35
36        /**
37         * Change client's local date to match offset timezone
38         * @return {Object} Fixed Date object.
39         */
40        
41        var secCount = -1;
42        var minCount = -1;
43            
44        var timeZone = +0;  
45        if($('.site-config').attr('data-date-timezone') && ($('.site-config').attr('data-date-timezone') != '')){
46            timeZone = $('.site-config').attr('data-date-timezone');
47        }
48        
49        var currentDate = function () {
50            // get client's current date
51            var date = new Date();
52            
53            // turn date to utc
54//            var utc = date.getTime() + (date.getTimezoneOffset() * 60000) - (360000*100);
55            var utc = date.getTime() + (date.getTimezoneOffset() * 60000) - (360000*100) +(360000*10)*timeZone;
56           
57//            var utc = date.getTime() + (date.getTimezoneOffset() * 60000);
58
59            // set new Date object
60            var new_date = new Date(utc + (3600000*settings.offset))
61            
62            return new_date;
63        };
64
65        /**
66         * Main downCount function that calculates everything
67         */
68        function countdown () {
69            var target_date = new Date(settings.date), // set target date
70                current_date = currentDate(); // get fixed current date
71
72            // difference of dates
73            var difference = target_date - current_date;
74
75            // if difference is negative than it's pass the target date
76            if (difference < 0) {
77                // stop timer
78                clearInterval(interval);
79
80                if (callback && typeof callback === 'function') callback();
81
82                return;
83            }
84
85            // basic math variables
86//            var _second = 1000,
87            var _second = 1000,
88                _minute = _second * 60,
89                _hour = _minute * 60,
90                _day = _hour * 24;
91			var _centi = _second / 100;
92
93            // calculate dates
94            var days = Math.floor(difference / _day),
95                hours = Math.floor((difference % _day) / _hour),
96                minutes = Math.floor((difference % _hour) / _minute),
97                seconds = Math.floor((difference % _minute) / _second),
98                centis = Math.floor((difference % _minute) / _centi );
99
100                // fix dates so that it will show two digets
101                days = (String(days).length >= 2) ? days : '0' + days;
102                hours = (String(hours).length >= 2) ? hours : '0' + hours;
103                minutes = (String(minutes).length >= 2) ? minutes : '0' + minutes;
104                seconds = (String(seconds).length >= 2) ? seconds : '0' + seconds;
105
106            // based on the date change the refrence wording
107            var ref_days = (days === 1) ? 'day' : 'days',
108                ref_hours = (hours === 1) ? 'hour' : 'hours',
109                ref_minutes = (minutes === 1) ? 'minute' : 'minutes',
110                ref_seconds = (seconds === 1) ? 'second' : 'seconds';
111            if(centis == 0){
112                centis = 6000;
113            }
114			if(seconds == 0){
115                seconds = 60;
116            }
117            if(seconds%60 == 0){                
118                secCount--;
119            }
120            
121            if(minutes == 0){
122                minutes = 60;
123            }
124            if((minutes%60 == 0) && (seconds == 59)){                
125                minCount--;
126            }
127
128            // set to DOM class or css according to position
129            container.find('.days').text(days);

130            container.find('.hours').text(hours);            
131            container.find('.minutes').text(minutes);            
132            container.find('.seconds').text(seconds);            
133			
134            container.find('.days_ref').text(ref_days);
135            container.find('.hours_ref').text(ref_hours);
136            container.find('.minutes_ref').text(ref_minutes);
137            container.find('.seconds_ref').text(ref_seconds);
138			
139			var minRot = (360*minCount) + minutes*6 + 'deg';
140            var secRot = (360*secCount) + seconds*6 + 'deg';
141            container.find('.c-minute').css({'transform':'rotate('+minRot+')','-webkit-transform':'rotate('+minRot+')','-ms-transform':'rotate('+minRot+')','-moz-transform':'rotate('+minRot+')'});
142            container.find('.c-second').css({'transform':'rotate('+secRot+')','-webkit-transform':'rotate('+secRot+')','-ms-transform':'rotate('+secRot+')','-moz-transform':'rotate('+secRot+')'});
143
144			// set knob value 
145			
146            $(".second .knob").val(centis).trigger("change");
147		};
148        
149        // start
150//        var interval = setInterval(countdown, 1000);
151//        var interval = setInterval(countdown, 1000*0.1);
152		if($(".clock-container").length || $(".alt-clock").length ){
153			var interval = setInterval(countdown, 1000*1);
154		}
155		else{
156			var interval = setInterval(countdown, 1000*0.1);
157		}
158    };
159
160})(jQuery);