I am using http://flipclockjs.com/
This is my call script so far,
<script type="text/javascript">
var clock = $('.clock').FlipClock(3600 * 24 * 5, {
clockFace: 'DailyCounter',
countdown: true,
});
</script>
Please could someone tell me how i can count down from an exact date?
So for example the date is 21st July, 2014 in UK time, and everyone that visits that site will see how long there is remaining till that date based on the current date.
This is what I use
<div class="clock"></div>
<script type="text/javascript">
var date = new Date(2015, 6, 21);
var now = new Date();
var diff = (date.getTime()/1000) - (now.getTime()/1000);
var clock = $('.clock').FlipClock(diff,{
clockFace: 'DailyCounter',
countdown: true
});
</script>
Months is zero-based, so July, being the seventh month, uses 6.
#Matt, Great example, however I can see why "coolshrimp" posted a similar formula, both are half correct.
In my website, when i use jsfiddle, I want it to also show "Hours" "Minutes" and "Seconds", the following example worked perfectly for me:
<script type="text/javascript">
var date = new Date("February 01, 2016 02:15:00"); //Month Days, Year HH:MM:SS
var now = new Date();
var diff = (date.getTime()/1000) - (now.getTime()/1000);
var clock = $('.clock').FlipClock(diff,{
clockFace: 'DailyCounter',
countdown: true
});
</script>
Simple:
<div class="clock"></div>
<script type="text/javascript">
var clock = $('.clock').FlipClock(new Date("August 15, 2015 03:24:00"),{
clockFace: 'DailyCounter',
countdown: true
});
</script>
OR
<div class="clock"></div>
<script type="text/javascript">
var clock = $('.clock').FlipClock(new Date(2015,8,15),{
clockFace: 'DailyCounter',
countdown: true
});
</script>
You would have to do it someway like this:
$(document).ready(function(){
var date = new Date(2014, 7, 21, 0,0,0,0);
var today = new Date();
var dif = date.getTime() - today.getTime();
var timeLeft = Math.abs(dif/1000)/60;
var clock = $('.clock').FlipClock({
autoStart: false,
clockFace: 'DailyCounter',
countdown: true
});
clock.setTime(timeLeft);
clock.start();
});
The time function is a little bit off, so you'll have to play around with it to get it right.
Fiddle: http://jsfiddle.net/Uscg9/4/
I think using the api function of Date will be better (reference)
$(document).ready(function() {
// Today's date object.
var today = new Date();
today = today.getTime()/1000;
// Final date object.
var finalDate = new Date();
// Setting year for final date.
finalDate.setFullYear(2016);
// Setting month for final date.
// Month counting starts from 0 i.e. Jan = 0, therefore March = 2.
finalDate.setMonth(2);
// Setting Day for final date.
finalDate.setDate(17);
// Setting Hours for final date.
finalDate.setHours(12);
// Setting Minutes for final date.
finalDate.setMinutes(00);
// Setting Seconds for final date.
finalDate.setSeconds(00);
var finalDate = finalDate.getTime()/1000;
var diff = finalDate - today;
$('div#countdown-clock').FlipClock(diff, {
clockFace: 'HourlyCounter',
countdown: true
});
});
You need to calculate the diff yourself. See the example for counting down to new year:
https://github.com/objectivehtml/FlipClock/blob/master/examples/countdown-from-new-years.html
$(document).ready(function() {
// Grab the current date
var currentDate = new Date();
// Set some date in the past. In this case, it's always been since Jan 1
var pastDate = new Date(currentDate.getFullYear(), 0, 1);
// Calculate the difference in seconds between the future and current date
var diff = currentDate.getTime() / 1000 - pastDate.getTime() / 1000;
// Instantiate a coutdown FlipClock
clock = $('.clock').FlipClock(diff, {
clockFace: 'DailyCounter'
});
);
Related
Using a countdown plugin but I think I'm setting the date and time wrong.
Code:
var clock;
$(document).ready(function() {
// Grab the current date
var currentDate = new Date();
// Set some date in the future. In this case, it's always Jan 1
var futureDate = new Date(2016,10,27, 10,00,00);
// Calculate the difference in seconds between the future and current date
var diff = futureDate.getTime() / 1000 - currentDate.getTime() / 1000;
// Instantiate a coutdown FlipClock
clock = $('.clock').FlipClock(diff, {
clockFace: 'DailyCounter',
countdown: true
});
});
I'm attempting this:
var futureDate = new Date(2016,10,27, 10,00,00);
Which is 27th October 2016 at 10am
Coding up 52 days though so I must be doing something wrong
Which is 27th October 2016 at 10am
That's where you're going wrong. Months in JavaScript are 0-indexed (January is 0, December is 11), the 10th month is actually November.
var futureDate = new Date(2016,9,27,10,00,00);
How do I add Australia/Melbourne timezone to the code below so regardless of the users location it displays the correct time. I have risul:moment-timezone installed however everything I do just breaks the countdown. Any help is appreciated.
Template.countdownTimer.onRendered(function() {
var today = new Date();
var sunday = new Date(today.getFullYear(),today.getMonth(),today.getDate()+(7-today.getDay()), 23, 59, 59);
$('#countdown').countdown(sunday, function(event) {
$(this).html(event.strftime('%d days %H hours %M minutes %S seconds'));
});
});
Update
var today = moment();
var sunday = new Date(today.getFullYear(),today.getMonth(),today.getDate()+(7-today.getDay()), 23, 59, 59);
console.log(sunday);
var clock = $('.clock').FlipClock(today, {
clockFace: 'DailyCounter',
countdown: true
});
I solved it reading the momentjs documentation then as below:
let time = moment(date).parseZone("Australia/Melbourne");
return time.format('YYYY:MM:DD HH:mm:ss:SSS');
This is how you can do for any country/Area for doing this you just have to know timezone
var timeZone = {hr:5, min:30} // for india
var utcOffset = parseInt(timeZone.hr) * 60 + parseInt(timeZone.min);
todayDate = moment().utcOffset(utcOffset);
Please user .format methods for trturning the value.
This will return the current time of any timezone.
I am trying to create countdown to a specific date using flipclock without the timer resetting or people in different time-zones seeing different numbers. For example, I want to countdown to Feb 20, 12:00am MST.
My problem is that the clock resets when the browser is refreshed after it reaches 0, the time shows negative numbers. If people viewing this clock with the current configuration, it is counting down to Feb 20, 12am in their timezone.
I've started with the countdown to New Years compiled clock and set my date, but not sure how else to address the timezone and reset issues.
var clock;
$(document).ready(function() {
// Grab the current date
var currentDate = new Date();
// Set some date in the future. In this case, it's always Jan 1
var futureDate = new Date(currentDate.getFullYear() + 0, 1, 20, 0, 0);
// Calculate the difference in seconds between the future and current date
var diff = futureDate.getTime() / 1000 - currentDate.getTime() / 1000;
// Instantiate a coutdown FlipClock
clock = $('.clock').FlipClock(diff, {
clockFace: 'DailyCounter',
countdown: true,
showSeconds: false,
callbacks: {
stop: function() {
$('.message').html('The clock has stopped!');
}
}
});
});
var clock;
$(document).ready(function() {
// Grab the current date
var now = new Date();
var currentDate = new Date(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), now.getUTCHours(), now.getUTCMinutes(), now.getUTCSeconds());
currentDate.setHours(currentDate.getHours() - 7);
// Set some date in the future. In this case, it's always Jan 1
var futureDate = new Date(currentDate.getFullYear() + 0, 1, 20, 0, 0);
// Calculate the difference in seconds between the future and current date
var diff = futureDate.getTime() / 1000 - currentDate.getTime() / 1000;
// Limit time difference to zero
if (diff < 0) {
diff = 0;
}
// Instantiate a coutdown FlipClock
clock = $('.clock').FlipClock(diff, {
clockFace: 'DailyCounter',
countdown: true,
showSeconds: false,
callbacks: {
stop: function() {
$('.message').html('The clock has stopped!');
}
}
});
});
Part solving timezone issue (a bit ugly):
// Grab the current date
var now = new Date();
var currentDate = new Date(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), now.getUTCHours(), now.getUTCMinutes(), now.getUTCSeconds());
currentDate.setHours(currentDate.getHours() - 7);
Part limiting time difference to not less than zero:
// Limit time difference to zero
if (diff < 0) {
diff = 0;
}
Since the time you'd like to count down to is a specific time in a specific time zone, then the easiest way is to pre-convert that time to UTC, and count down to that instead.
On Feb 20th 2016, US Mountain Time is at UTC-7, therefore:
2016-02-20 00:00:00 MST == 2016-02-20 07:00:00 UTC
So,
var currentDate = new Date();
var futureDate = Date.UTC(currentDate.getUTCFullYear(), 1, 20, 7, 0, 0);
var diff = (futureDate - currentDate.getTime()) / 1000;
I'll let someone else answer WRT the specifics of FlipClock and your reset issue - though you might consider asking it in a separate question. (Try to ask only one question at a time in the future.)
I'm currently trying to develop a countdown timer page. Here is the countdown timer code:
var clock;
$(document).ready(function() {
// Grab the current date
var currentDate = new Date();
// Set some date in the future. In this case, it's always Jan 1
var futureDate = new Date("July 01, 2015 22:00:00");
// Calculate the difference in seconds between the future and current date
var diff = futureDate.getTime() / 1000 - currentDate.getTime() / 1000;
if(diff < 0){
// Instantiate a countdown FlipClock
clock = $('.clock').FlipClock(0, {
clockFace: 'DailyCounter',
countdown: true
});
$('.message').html('Lets Go!!');
$('.Go').removeAttr("disabled");
$( "div.first" ).replaceWith( "<i style='color:red'>Lets Go!</i>" );
}
else{
// Instantiate a countdown FlipClock
clock = $('.clock').FlipClock(diff, {
clockFace: 'DailyCounter',
countdown: true,
callbacks: {
stop: function() {
$('.message').html('Lets Go!!');
$('.Go').removeAttr("disabled");
$( "div.first" ).replaceWith( "<i style='color:red'>Lets Go!</i>" );
}
}
});
}
});
The problem is that the countdown time varies per timezone. For example, a user in Australia will have a three-hour-shorter countdown time than that of a user from Malaysia (GMT+8).
How can I standardize/set the initial countdown date's timezone to GMT+8 so that users in different timezones have the same countdown time?
Based on our discussion, this example code works to convert any timezone time into UTC+8 timezone time.
var d = new Date();
d.setTime(d.getTime() + d.getTimezoneOffset() * 60 * 1000 /* convert to UTC */ + (/* UTC+8 */ 8) * 60 * 60 * 1000);
console.log('UTC+8 Time:', d);
Here is a JSFiddle for reference.
Although the console output shows that the timezones of the date objects are not UTC+0800, their date values (year, month, date, etc...) have all been converted into UTC+0800 time.
It is just not possible to edit the actual timezone of date objects, but it is possible to edit their date values to reflect the new timezone, and that is what we are doing here.
GMT time is the same as UTC time.
Use JavaScript setUTCDate() Method
Example
Set the day of the month, according to UTC:
var d = new Date();
d.setUTCDate(15);
The result of d will be:
Wed Jul 15 2015 10:47:28 GMT+0400 (Russian Standard Time)
Honestly, I don't know what's wrong. I'm using Flipclock javascript lib, and I'm trying to make a countdown to 15th January, 2015, 18:00 PM UTC. I tried many different approaches, and the one I currently have is which returns less numbers.
My code:
var clock;
$(document).ready(function (){
var nDate = new Date(2015, 01, 15, 18);
var currentDate = new Date();
var diff = (nDate.getTime() / 1000) - (currentDate.getTime() / 1000);
clock = $('.n-clock').FlipClock(diff, {
clockFace: 'DailyCounter',
autoStart: true,
countdown: true
});
});
Am I doing maths wrong? If so, please, tell me what's wrong.
Months are numbered from zero, so the following
var nDate = new Date(2015, 01, 15, 18);
Is February 15th.
Once you fix this, the result is correct. In Chrome:
> var nDate = new Date(2015, 0, 15, 18);
> var currentDate = new Date();
> var diff = (nDate.getTime() / 1000) - (currentDate.getTime() / 1000);
> diff / 24. / 3600.
< 2.894391319445438
(I.e. just under three days away.)