I need to restart my countdown timer every next friday, i cant seem to get it done. this is my code
this is my fiddle
https://jsfiddle.net/9L7f5s6u/
var countDownDate = new Date("Mar 10, 2017 17:00:00").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24)).toString();
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)).toString();
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)).toString();
var seconds = Math.floor((distance % (1000 * 60)) / 1000).toString();
document.getElementById("circle-days").innerHTML = days + "<div class='timer-font'>Días</div>";
document.getElementById("circle-hours").innerHTML = hours + "<div class='timer-font'>Hrs</div>";
document.getElementById("circle-minutes").innerHTML = minutes + "<div class='timer-font'>Min</div>";
document.getElementById("circle-seconds").innerHTML = seconds + "<div class='timer-font'>Seg</div>";
if (distance < 0) {
clearInterval(x);
document.getElementById("timer").innerHTML = "EXPIRED";
}
}, 1000);
<span style="margin-right: 10px;">
<span id="circle-days" class="circle-time"></span>
</span>
<span style="margin-right: 10px;">
<span id="circle-hours" class="circle-time"></span>
</span>
<span style="margin-right: 10px;">
<span id="circle-minutes" class="circle-time"></span>
</span>
<span id="circle-seconds" class="circle-time"></span>
<span id="timer"></span>
See https://jsfiddle.net/9L7f5s6u/2/ using a function that returns the next day of week (in this case 5/Friday and 17 as hour)
function getNextDayOfWeek(date, dayOfWeek, hour) {
var resultDate = new Date(date.getTime());
resultDate.setDate(date.getDate() + (7 + dayOfWeek - date.getDay()) % 7);
resultDate.setHours(hour,0,0,0);
return resultDate;
}
Code based from https://codereview.stackexchange.com/questions/33527/find-next-occurring-friday-or-any-dayofweek adding a start hour.
You could go over the top and use something like MomentJS and add a week to your countDownDate.
Or you can do something like
countDownDate = new Date(countDownDate.valueOf() + 604800000);
All this snippet does is gets the time in ms from 1/1/1970 and adds 1 week in ms to that time and creates a new date object one week ahead of the countDownDate.
This is all assuming that countDownDate is a Friday.
As for resetting the timer, I believe that the code shouldn't be too hard to continue from there
I'll do something like this https://jsfiddle.net/hdLz5rux/
countDownDate.setDate(countDownDate.getDate() + 7);
Related
This question already has answers here:
How to add 30 minutes to a JavaScript Date object?
(29 answers)
Closed 2 years ago.
I created a simple 1 Minute countdown, but it seems not to be working I don't know why.
IT GIVES EXPIRED as response instead of the timer showing.
// Set the date we're counting down to
var setoneminutetime = new Date();
setoneminutetime.setMinutes(1);
var countDownDate = new Date(setoneminutetime).getTime();
//set interval for the actual countdown
var x = setInterval(function() {
var now = new Date().getTime();
//end time minus the current time
var distance = countDownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
//show countdown in div demo
document.getElementById("demo").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
p {
text-align: center;
font-size: 60px;
margin-top: 0px;
}
<p id="demo"></p>
setMinutes set the minutes to 1 of the current hour. Right now, it's 5:19PM, with setMinutes(1), the hour is 5:01PM. You need to get the current time and add 1 minute to it.
// Set the date we're counting down to
var setoneminutetime = new Date();
setoneminutetime.setTime(Date.now() + 1 * 60 * 1000); // Add 1 minutes to current timestamp
var countDownDate = new Date(setoneminutetime).getTime();
//set interval for the actual countdown
var x = setInterval(function() {
var now = new Date().getTime();
//end time minus the current time
var distance = countDownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
//show countdown in div demo
document.getElementById("demo").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
p {
text-align: center;
font-size: 60px;
margin-top: 0px;
}
<p id="demo"></p>
As others have mentioned you've set the Date minute to :01 not added one minute. A simple solution would be to define countDownDate as now + 60*1000.
This is explicitly setting the "minute" value of the Date to 1:
setoneminutetime.setMinutes(1);
So this will only work if you load the page exactly at the 0 minute mark of any given hour. It looks like you intended to set it to the current minute plus 1:
setoneminutetime.setMinutes(setoneminutetime.getMinutes() + 1);
Note that this would also fail any time the current minute is 59. You should be able to get around this by creating a whole new date out of the total epoch miliseconds and adding 60,000 (miliseconds) to that:
var setoneminutetime = new Date(new Date().getTime() + 60000);
I want to create countdown timer
But i want to get date from wordpress custom fields..
And i want to show countdown timer in element with id COUNTDWON
<p style="visibility: hidden; font-size: 0px;" id="time"><?php the_field('end_date');?></p>
<p id="countdown""></p>
and i want to use this script (below)
and my question is: how i can take the date from element
i don't want to put date manually to the script each time..
is it any way to do it?
var countDownDate = new Date("Sep 5, 2018 15:37:25").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("countdown").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
if (distance < 0) {
clearInterval(x);
document.getElementById("countdown").innerHTML = "EXPIRED";
}
}, 1000);
After i tried this answer:
// Fetch here
var dateTime = document.getElementById("time").innerHTML;
// Use it here
var countDownDate = new Date(dateTime).getTime();
// .... rest of the code
It works only for first field, screenshot below:
screenshot
If the date given by PHP is in the same format then you can use document.getElementById()
// Fetch here
var dateTime = document.getElementById("time").innerHTML;
// Use it here
var countDownDate = new Date(dateTime).getTime();
// .... rest of the code
Otherwise you might need to format dateTime variable accordingly.
I'm creating a countdown timer for a user selected time. For that I have developed following function.
function countdownTimeStart(){
var countDownDate = new Date("Sep 5, 2018 15:37:25").getTime();
var x = setInterval(function() {
// Get to days date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="demo"
document.getElementById("demo1").innerHTML = hours + ": "
+ minutes + ": " + seconds + " ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo1").innerHTML = "EXPIRED";
}
}, 1000);
}
This works fine. But I want to get a user selected value from a text input instead of var countDownDate = new Date("Sep 5, 2018 15:37:25").getTime();
Such as
<input type = "text" id = "picker-dates" value="08:30:20">
So can anyone help me to get this input value to my javascript function.
First get the time value from the input using the getElementById and then split that value with colon : to get the hour, minutes and seconds. With these value you can use setHours in the current date to set the time specified in the input.
function countdownTimeStart(){
var time = document.getElementById("picker-dates").value;
time = time.split(':');
var date = new Date();
var countDownDate = date.setHours(time[0],time[1],time[2]);
var x = setInterval(function() {
// Get to days date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="demo"
document.getElementById("demo1").innerHTML = hours + ": "
+ minutes + ": " + seconds + " ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo1").innerHTML = "EXPIRED";
}
}, 1000);
}
countdownTimeStart();
<input type = "text" id = "picker-dates" value="14:30:20">
<div id='demo1'></div>
You can do like this, please have a look and if it doesn't work please let me know.
var selectedValue = document.getElementById("picker-dates").value;
use jquery: $('#picker-dates').val()
This code for a countdown timer is taken from W3Schools:
// Set the date we're counting down to
var d = new Date();
var n = d.getTimezoneOffset() * 60000;
var countDownDate = new Date("May 2, 2018 15:54:25").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = countDownDate - now - n;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
There was a big issue with it: any date I enter would not work for different timezones, as if it was +1 hour UTC it would expire, and it would be an hour long if it was -1.
So I added the d.getTimezoneOffset() * 60000; to get the milliseconds difference, and then took it off, so if there is any difference it should calculate it.
Will it always work if I put an UTC date in the future, or is there a possible difference I don't know about (for example a special country or daylight savings that could mess it up)?
Below is a result of a loop and I want to run timer to count up to the set time for each of the loop result.
<span id="time" data-time="{{ $user->created_at->addHours(config('app.timer')) }}" data-url="{{ url('/TimePay/'.$user->id)}}"></span>
<span id="time" data-time="{{ $user->created_at->addHours(config('app.timer')) }}" data-url="{{ url('/TimePay/'.$user->id)}}"></span>
<span id="time" data-time="{{ $user->created_at->addHours(config('app.timer')) }}" data-url="{{ url('/TimePay/'.$user->id)}}"></span>
The timer script:
$(document).ready(function(){
$('[data-time]').each(function() {
console.log($(this))
var $this = $(this),
finalTime = $(this).data('time'),
url = $(this).data('url')
// Set the date we're counting down to
var countDownDate = new Date(finalTime).getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result in an element with id="demo"
document.getElementById("time").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("time").innerHTML = "EXPIRED";
}
}, 1000);
})
})
So am using Laravel and jQuery to run the timer.
I want assistance with the code because it is not working.
The trick is to "save" you intervals in an array.
If you do not do it, it gets overwritten on each loop iteration.
Then, to refer to the right span element, you have to get the iteration index for later use in an .eq() method.
You can't use an id in a loop, since it has to be unique.
Have a look at comments within the code.
$(document).ready(function(){
// an arrary to store the intervals created.
var timerArray = [];
$('[data-time]').each(function(index) {
console.log($(this).data("time"));
var finalTime = $(this).data('time');
// Set the date we're counting down to
var countDownDate = new Date(finalTime).getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// this Index will be used to refer to the right span.
var thisIndex = index;
console.log("interval "+thisIndex);
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Leading zeros...
if(hours<10){hours="0"+hours}
if(minutes<10){minutes="0"+minutes}
if(seconds<10){seconds="0"+seconds}
// Display the result in an element with id="demo"
$('[data-time]').eq(thisIndex).html( days + "d " + hours + "h " + minutes + "m " + seconds + "s " );
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(timerArray[thisIndex]);
$('[data-time]').eq(thisIndex).html("EXPIRED");
}
}, 1000);
// Place this timer in an array... So it won't be overwritten.
timerArray.push(x);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span data-time="07/08/2017 12:30:00"></span><br>
<br>
<span data-time="07/10/2017 19:50:30"></span><br>
<br>
<span data-time="07/12/2017 5:24:24"></span><br>
<br>
Run the snippet in "full page" or look at this CodePen.