Printable Version of Topic

Posted by: Meto2k Nov 12 2020, 07:13 PM

Hi all,

I am building my own website ( very beginner so allready sorry ) but I encountered a problem with a ready to use time counter.

the code is as follow

<div class="date_countdown">
<div id="timer">
<div id="days" class="date"></div>
<div id="hours" class="date"></div>
<div id="minutes" class="date"></div>
<div id="seconds" class="date"></div>
</div>

it shows
DAYS
-413
HOURS
11
MINUTES
43
SECONDS
51

and it is still counting down... My question here is how can I edit the time? whatever I try didnt work

Posted by: pandy Nov 12 2020, 07:18 PM

There's some JavaScript also maybe? In what way do you want to edit the time?

Posted by: Meto2k Nov 12 2020, 07:26 PM

https://ibb.co/bWRJ85t

I uploaded a screenshot how it looks like

Posted by: Meto2k Nov 12 2020, 07:30 PM

https://ibb.co/bWRJ85t

I added a image so you can see it better.

Well I would like to have a countdown for a product. But I can't find the source of the date settings.

Posted by: pandy Nov 12 2020, 07:37 PM

Yeah. But we need to see the actual script you use. And we need to know what you want to change.

Posted by: Meto2k Nov 12 2020, 07:40 PM

(function ($) {

$.fn.downCount = function (options, callback) {
var settings = $.extend({
date: null,
offset: null
}, options);

// Throw error if date is not set
if (!settings.date) {
$.error('Date is not defined.');
}

// Throw error if date is set incorectly
if (!Date.parse(settings.date)) {
$.error('Incorrect date format, it should look like this, 12/24/2012 12:00:00.');
}

// Save container
var container = this;

/**
* Change client's local date to match offset timezone
* @return {Object} Fixed Date object.
*/
var currentDate = function () {
// get client's current date
var date = new Date();

// turn date to utc
var utc = date.getTime() + (date.getTimezoneOffset() * 60000);

// set new Date object
var new_date = new Date(utc + (3600000*settings.offset))

return new_date;
};

/**
* Main downCount function that calculates everything
*/
function countdown () {
var target_date = new Date(settings.date), // set target date
current_date = currentDate(); // get fixed current date

// difference of dates
var difference = target_date - current_date;

// if difference is negative than it's pass the target date
if (difference < 0) {
// stop timer
clearInterval(interval);

if (callback && typeof callback === 'function') callback();

return;
}

// basic math variables
var _second = 1000,
_minute = _second * 60,
_hour = _minute * 60,
_day = _hour * 24;

// calculate dates
var days = Math.floor(difference / _day),
hours = Math.floor((difference % _day) / _hour),
minutes = Math.floor((difference % _hour) / _minute),
seconds = Math.floor((difference % _minute) / _second);

// fix dates so that it will show two digets
days = (String(days).length >= 2) ? days : '0' + days;
hours = (String(hours).length >= 2) ? hours : '0' + hours;
minutes = (String(minutes).length >= 2) ? minutes : '0' + minutes;
seconds = (String(seconds).length >= 2) ? seconds : '0' + seconds;

// based on the date change the refrence wording
var ref_days = (days === 1) ? 'day' : 'days',
ref_hours = (hours === 1) ? 'hour' : 'hours',
ref_minutes = (minutes === 1) ? 'minute' : 'minutes',
ref_seconds = (seconds === 1) ? 'second' : 'seconds';

// set to DOM
container.find('.days').text(days);
container.find('.hours').text(hours);
container.find('.minutes').text(minutes);
container.find('.seconds').text(seconds);

container.find('.days_ref').text(ref_days);
container.find('.hours_ref').text(ref_hours);
container.find('.minutes_ref').text(ref_minutes);
container.find('.seconds_ref').text(ref_seconds);
};

// start
var interval = setInterval(countdown, 1000);
};

})(jQuery);

Posted by: Christian J Nov 12 2020, 08:19 PM

Do you have a link to the site that provided the script? There should be some documentation.

Posted by: Meto2k Nov 12 2020, 08:26 PM

https://github.com/sonnyt/downCount/blob/master/jquery.downCount.js

Posted by: Christian J Nov 12 2020, 08:47 PM

According to https://github.com/sonnyt/downCount it seems you need to change the null values here:

to (for example) this:



EDIT: or am I looking at the same script? Not familiar with Github's layout.

Posted by: Meto2k Nov 13 2020, 09:00 AM

=D thank you for the fast replies ! but the counter is not changing... still the same countdown as in the picture. I tried all available options but I think there may be a malfuntion somewhere.

Posted by: Christian J Nov 13 2020, 11:42 AM

The picture looks like if the target date expired 413 days ago. Have you set a target date, and is it correct?

In any case there should be plenty of other countdown timers on the web that you could use instead.