Date and include time to countdown using javascript - javascript

i am trying below code for countdown to on exact date and time. I mean, i wants to make a under contractions website countdown date (include exact time). but date are not count downing. js code just showed me wrong count and not downing second, min, hours, day. This js code has problem, but i don't understand, exactly where is the problem.
Here is code:
(function init() {
function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date("03/13/2018 9:30 AM"));
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function initializeClock(endtime){
var timeinterval = setInterval(function(){
var t = getTimeRemaining(endtime);
document.querySelector(".days > .value").innerText=t.days;
document.querySelector(".hours > .value").innerText=t.hours;
document.querySelector(".minutes > .value").innerText=t.minutes;
document.querySelector(".seconds > .value").innerText=t.seconds;
if(t.total<=0){
clearInterval(timeinterval);
}
},1000);
}
initializeClock(((new Date()).getFullYear()+1) + "/1/1")
})();

I made some modifications to your code.
I added a displayTime() function that handles the time display.
initializeClock() now calls displayTime() directly when it's called, without waiting one second.
getTimeRemaining() now calculates the right time, by taking the current date into account, and not a random date: var t = Date.parse(endtime) - Date.parse(new Date());
function displayTime(date){
var t = getTimeRemaining(date);
document.querySelector(".days > .value").innerText = t.days;
document.querySelector(".hours > .value").innerText = t.hours;
document.querySelector(".minutes > .value").innerText = t.minutes;
document.querySelector(".seconds > .value").innerText = t.seconds;
return t;
}
function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function initializeClock(endtime) {
displayTime(endtime);
var timeinterval = setInterval(function() {
t = displayTime(endtime);
if (t.total <= 0) {
clearInterval(timeinterval);
}
}, 1000);
}
initializeClock("2018/03/13 09:30")
<div class="days"><span class="value"></span> days</div>
<div class="hours"><span class="value"></span> hours</div>
<div class="minutes"><span class="value"></span> minutes</div>
<div class="seconds"><span class="value"></span> seconds</div>

I think you are making this overly complicated. If you just start with a date and then every second, subtract one second from that start date, you're done.
var out = document.getElementById("output");
var start = new Date();
setInterval(function(){
start = new Date(start.getTime() - 1000);
out.textContent =
start.getHours() + " Hours, " + start.getMinutes() + " Minutes, " + start.getSeconds() + " Seconds";
},1000);
<div>Counting down from current time</div>
<span id="output"></span>

Related

Need help having a countdown JS script countdown from EST and not the local computer time

I am writing a HTML embed that displays a countdown for wednesday at 20:30 EST. Everytime it hits that date and time it will set the date to the following wednesday and start counting down the date. The issue is that I am using the .getTime() function to grab the current time. That function will grab the local computer time and I need the script to compare to Eastern Standard Time instead of the local time so the countdown is the same regardless where in the world you are.
Code with .getTime()
<script>
var countDownDate = new Date("Jan 25, 2023 20:30:00").getTime();
var x = setInterval(countdown, 1000);
function countdown(){
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("days").innerHTML = days;
document.getElementById("hours").innerHTML = hours;
document.getElementById("mins").innerHTML = minutes;
document.getElementById("secs").innerHTML = seconds;
if (distance < 0) {
resetCountdown();
}
}
function resetCountdown(){
clearInterval(x);
var nextWednesday = new Date();
nextWednesday.setDate(nextWednesday.getDate() + (3 + 7 - nextWednesday.getDay()) % 7);
nextWednesday.setHours(20);
nextWednesday.setMinutes(30);
countDownDate = nextWednesday.getTime();
x = setInterval(countdown, 1000);
}
</script>
I tried to use .getUTCDate() and similar functions and wasn't having any luck.
function resetCountdown(){
clearInterval(x);
var nextWednesday = new Date();
nextWednesday.setUTCDate(nextWednesday.getUTCDate() + (3 + 7 - nextWednesday.getUTCDay()) % 7);
nextWednesday.setUTCHours(20);
nextWednesday.setUTCMinutes(30);
countDownDate = nextWednesday.getTime();
x = setInterval(countdown, 1000);
}

Countdown Timer in Vanilla Javascript without using a function

I have a project where I need to do a countdown timer, However no function can be used. I know that this can be done with a setInterval, however, most of the documentation I have found shows a function being used in conjunction. W3schools has a great example, however, it used a function. I know how I would do it with
I have already written some code, and was able to display the minutes and seconds, however, cannot get it to actually count down. is there a way to do this without a function?
const timeSpan = document.getElementById('timer');
// Get Time Now
var timeMinutes = 10;
var currentTime = Date.parse(new Date());
var deadline = new Date(currentTime + timeMinutes * 60 * 1000);
var distance = deadline - currentTime;
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
timeSpan.innerHTML = minutes + 's' + seconds;
This shows the minutes and seconds, but without the setInterval or setTimeOut it wont count down like a normal countdown timer. For the project it needs to count down from ten minutes and at the end alert the user that is is expired and that they will need to refresh the page.
You need to move some things out of the function as you are resetting the timer on every interval. You should avoid storing your times as Date objects as well since you only need the timestamps.
const timeSpan = document.getElementById('timer');
const mins = 10;
const now = new Date().getTime();
const deadline = mins * 60 * 1000 + now;
setInterval(() => {
var currentTime = new Date().getTime();
var distance = deadline - currentTime;
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
timeSpan.innerHTML = minutes + 's' + seconds;
}, 500)
<span id=timer></span>
<script>
var timer = (mins) => {
const timeSpan = document.getElementById('timer');
const now = new Date().getTime();
const deadline = mins * 60 * 1000 + now;
setInterval(() => {
var currentTime = new Date().getTime();
var distance = deadline - currentTime;
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
timeSpan.innerHTML = minutes + ' min. ' + seconds + ' s.';
if (minutes <=0 && seconds <=0) {
alert('Time is over');
return false;
}
}, 1000);
}
timer(10);
</script>
<span id="timer"></span>

Javascript JQuery countdown timer loop

Using the following JavaScript, how do I make it automatically restart the countdown adding 7 days when the deadline is reached?
(function($) {
"use strict";
function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds,
};
}
function initializeClock(id, endtime) {
var daysSpan = $('.days');
var hoursSpan = $('.hours');
var minutesSpan = $('.minutes');
var secondsSpan = $('.seconds');
function updateClock() {
var t = getTimeRemaining(endtime);
daysSpan.html(t.days);
hoursSpan.html(('0' + t.hours).slice(-2));
minutesSpan.html(('0' + t.minutes).slice(-2));
secondsSpan.html(('0' + t.seconds).slice(-2));
if (t.total <= 0) {
clearInterval(timeinterval);
}
}
updateClock();
var timeinterval = setInterval(updateClock, 1000);
}
var deadline = new Date("Aug 24, 2018");
initializeClock('clockdiv', deadline);
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="countdown">
<span class="days"></span> Days
<span class="hours"></span> Hours
<span class="minutes"></span> Minutes
<span class="seconds"></span> Seconds
</div>
why dont you just re-initialize the script with a new deadline?
if (t.total <= 0) {
clearInterval(timeinterval);
var newDeadline = deadline.setDate(deadline.getDate() + 7);
initializeClock('clockdiv', newDeadline);
}

NaN on Javascript countdown timer in Internet Explorer

I'm using the following JavaScript for a countdown timer and it has been working great in most browsers, I've just double checked Internet Explorer however and I am getting 'NaN' displayed in place of each number.
Can anyone help to explain where this goes wrong in IE not seeing the individual variables as a number?
// Set the date we're counting down to
var countDownDate = new Date("2018-05-25 12:00:00").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);
if (days.toString().length < 2) {
days = "0" + days;
}
if (hours.toString().length < 2) {
hours = "0" + hours;
}
if (minutes.toString().length < 2) {
minutes = "0" + minutes;
}
if (seconds.toString().length < 2) {
seconds = "0" + seconds;
}
// Display the result in the element with id="countdown"
document.getElementById("countdown").innerHTML = days + " : " + hours + " : " +
minutes + " : " + seconds;
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("countdown").innerHTML = "<a href='/register'>Countdown Expired</a>";
}
}, 1000);
<span id="countdown"></span>
MDN discourages the use of a string in the date constructor because not all browsers implement this the same way.
If you do want to use date strings, I would recommend using a third party library like momentjs to parse these strings to make sure this works in every browser.
Just normalise the date and time
function getNormalisedDatetime(dString) { // yyyy-mm-dd hh:mm:ss
var parts = dString.split(" ");
var dParts = parts[0].split("-");
var tParts = parts[1].split(":");
return new Date(dParts[0],dParts[1]-1,dParts[2],tParts[0],tParts[1],tParts[2]);
}
function pad(num) {
return ("0"+num).slice(-2);
}
// Set the date we're counting down to
var countDownDate = getNormalisedDatetime("2018-05-25 12:00:00").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 the element with id="countdown"
document.getElementById("countdown").innerHTML = "" + pad(days) + " : " + pad(hours) + " : " +
pad(minutes) + " : " + pad(seconds);
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("countdown").innerHTML = "<a href='/register'>Countdown Expired</a>";
}
}, 1000);
<span id="countdown"></span>

showing countdown timer difference on different systems

I am trying to make a Countdown Timer in javascript and I wrote a code like
var countdown = function(){
setInterval(function() {
var countDownDate = new Date(document.getElementById("end_date").getAttribute("data-date")).getTime();
// data-date ex. = "2017-11-28 21:54:00"; greater than current date (now)
// 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 the element with id="demo"
if(hours<10){
hours = "0"+hours;
}
if(minutes<10){
minutes = "0"+minutes;
}
if(seconds<10){
seconds = "0"+seconds;
}
var left = hours + ":"+ minutes + ":" + seconds;
console.log(left);
document.getElementById("time_left").innerHTML = left;
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("time_left").innerHTML = "EXPIRED";
}
}, 1000);
}
countdown();
Counter is working fine but why I am getting difference of time upto 25 secs on different systems. Some systems shows same countdown time but, some not.
you should use your sever time and java script take the system time so when u change your system time count down will change automatically. you can also provide me your code using js fiddle or anything else...

Categories