timestamp countdown going in negative - javascript

I have a script that countdowns timestamp. It is working fine but the problem it keeps going less than 0 into negative. I want it to stop at zero.
// $nowtime is a date in future
var startLive = new Date("<?php echo $nowtime; ?>");
var timestamp = startLive - Date.now();
timestamp /= 1000; // from ms to seconds
function component(x, v) {
return Math.floor(x / v);
}
var $div = $('.time');
timer = setInterval(function() {
timestamp--;
var days = component(timestamp, 24 * 60 * 60),
hours = component(timestamp, 60 * 60) % 24,
minutes = component(timestamp, 60) % 60,
seconds = component(timestamp, 1) % 60;
$div.html(days + " days, " + hours + ":" + minutes + ":" + seconds);
}, 1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Output looks like 1 Days, 6:10:30
Problem is if it is less than zero it still goes in negative. something like -3 days, -3:-5:-5
How to stop at 0.
Thanks.

timer = setInterval(function() {
/* if timestamp <= 0 return means skip rest of function */
if(timestamp <= 0) {
clearInterval(timer);
return;
}
timestamp--;
var days = component(timestamp, 24 * 60 * 60),
hours = component(timestamp, 60 * 60) % 24,
minutes = component(timestamp, 60) % 60,
seconds = component(timestamp, 1) % 60;
$div.html(days + " days, " + hours + ":" + minutes + ":" + seconds);
}, 1000);

if(timestamp <= 0)
{
clearInterval(timer);
}

Related

Check if the time distance is between different times

I made a countdown using javascript and php from my functions the countdown works but now I want to have 3 options:
if the countdown is longer than 24 hours show te selector.next(".countdown").html(expiry); date
if the countdown is 6 hours or less show the timer selector.next(".countdown").html(days + "d " + hours + "h " + minutes + "m " + seconds + "s ");
else the countdown is less than 0 show that the endend selector.next(".countdown").html(<p>Closed</p>);
$(".expiry").each(function() {
var expiry = new Date($(this).text());
var selector = $(this)
var x = setInterval(function() {
var currentDateObj = new Date();
var numberOfMlSeconds = currentDateObj.getTime();
var addMlSeconds = 60 * 60 * 1000;
var now = new Date(numberOfMlSeconds - addMlSeconds);
var distance = expiry - 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);
if( distance >= 86400000 && distance < 21600000){
selector.next(".countdown").html(expiry);
}else if ( distance <= 21600000 && distance > 0){
selector.next(".countdown").html(days + "d " + hours + "h " + minutes + "m " + seconds + "s ");
}else{
selector.next(".countdown").html('<p>error</p>');
}
}, 1000);
});
Is the first line of your IF statement correct? Are you wanting to check if it's between those 2 numbers? If so, should the condition not be:
if(distance <= 86400000 && distance > 21600000)
I.E. If the distance is LESS THAN OR EQUAL TO 86400000 AND GREATER THAN 21600000
At the moment you're checking if distance is both GREATER THAN OR EQUAL TO 86400000 and LESS THAN 21600000 which will always produce false
EDIT
See full if statement block with condition for GREATER THAN 86400000
if (distance > 86400000) {
selector.next(".countdown").html('<p>A LOOOOOONG Way off expiring</p>');
}
else if (distance <= 864000000 && distance > 432000000) {
selector.next(".countdown").html(expiry);
}
else if (distance <= 432000000 && distance > 0) {
selector.next(".countdown").html(days + "d " + hours + "h " + minutes + "m " + seconds + "s ");
}
else if (distance < 0) {
selector.next(".countdown").html('<p>afgelopen</p>');
}
else {
selector.next(".countdown").html('<p>Error</p>');
}

How to make countdown function with hourly?

I tried to make countdown function , It is work unless hour time ! But I want to make 2 hours countdown time , I can't figure more ?
<div id="time"></div>
<script type="text/javascript">
var hour = 2 ;
var min = 30;
var countdown = hour * min * 60 * 1000;
//var countdown = hour * 3600 * min * 60 * 1000; also not working
var timeload = setInterval(function () {
countdown -= 1000;
var hr = Math.floor(countdown/(60 * 60 * 1000));
var min = Math.floor(countdown / (60 * 1000));
var sec = Math.floor((countdown - (min * 60 * 1000)) / 1000);
if (countdown <= 0) {
alert("Timeout !");
clearInterval(timeload);
}
else {
$("#time").html("<font color='red'>Allowed Time </font>" + hr + " : " + min + " : " + sec);
}
}, 1000);
</script>
Actual Started Time
Allowed Time 0 : 59 : 59
Expected Start Time Allowed Time 2 : 29 : 59
you can try this solution, you have an error on calculation time (hr, min, sec) it should modulus to maximum each value and also you wrong when convert hour and min to millisecond
var hour = 2 ;
var min = 30;
var countdown = (hour * 60 * 60 * 1000) + (min * 60 * 1000);
var timeload = setInterval(function () {
countdown -= 1000;
var hr = Math.floor( (countdown / (60 * 60 * 1000)) % 24 );
var min = Math.floor( (countdown / (60 * 1000)) % 60 );
var sec = Math.floor( (countdown / 1000) % 60 );
if (countdown <= 0) {
alert("Timeout !");
clearInterval(timeload);
}
else {
$("#time").html("<font color='red'>Allowed Time </font>" + hr + " : " + min + " : " + sec);
}
}, 1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="time"></div>
I think your calculations may be wrong. You don't want to multiply the hours by the minutes, but rather add them up in some way.
// useful numbers for calculations into milliseconds
var _1sec = 60 * 1000, _1min = 60 * _1sec, _1hr = 60 * min;
// renamed `hour` to cHR (countdown hour) so I can keep things straight in my head
var total_ms = (cHr * _1hr) + (cMin * _1min);
The hours/minutes/seconds for display also needs reworking.
// Mod (%) takes the remainder after division. So countdown % _1hr takes whatever is left over that doesn't go into whole hours, etc.
hr = Math.floor(countdown / _1hr);
min = Math.floor((countdown % _1hr) / _1min);
sec = Math.floor((countdown % _1min) / _1sec);
an example using diff between start and finish
var hour = 2;
var min = 30;
var finish = new Date();
finish.setHours(finish.getHours() + hour);
finish.setHours(finish.getHours(), finish.getMinutes() + min)
var diff = finish.getTime() - new Date().getTime()
var timeload = setInterval(function() {
diff -= 1000
var s = Math.floor(diff / 1000);
var m = Math.floor(s / 60);
var h = Math.floor(m / 60);
h %= 24;
m %= 60;
s %= 60;
if (diff <= 0) {
alert("FINISH!!");
clearInterval(timeload);
} else {
$("#time").html("<font color='red'>Allowed Time </font>" + h + " : " + m + " : " + s);
}
}, 1000)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="time"></div>

javascript countdown from d:h:m:s

I'm new in javascript.
My PHP script returns a value in this format
d:h:m:s
Now I would like to have a countdown which is able to countdown each second from this.
I modified a countdown. This works once a time, after the countdown "ticks" each second it returns NaN all the time. Any idea what I do wrong?
$(document).ready(function() {
setInterval(function() {
$('.countdown').each(function() {
var time = $(this).data("time").split(':');
var timestamp = time[0] * 86400 + time[1] * 3600 + time[2] * 60 + time[3] * 1;
var days = Math.floor(timestamp / 86400);
console.log(time,timestamp);
var hours = Math.floor((timestamp - days * 86400) / 3600);
var minutes = Math.floor((timestamp - hours * 3600) / 60);
var seconds = timestamp - ((days * 86400) + (hours * 3600) + (minutes * 60))-1;
$(this).data("time",""+days+":"+hours+":"+minutes+":"+seconds);
if (hours < 10) {
hours = '0' + hours;
}
if (minutes < 10) {
minutes = '0' + minutes;
}
if (seconds < 10) {
seconds = '0' + seconds;
}
$(this).text(days + ':' + hours + ':' + minutes + ':' + seconds);
});
}, 1000);
})
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1 class="countdown">02:03:05:59</h1>
As far as I can see you have 2 problems here:
after the first execution you change the pattern of the text you display in the h1. First you have 02:03:05:59. Then you want to write 02 days 03:05:58 into the tag. Next time you parse it, you get the error because you split at : and that does not work anymore as you have days instead of : as the seperator for the first part.
When calculating the minutes, you should also substract the days and not just the hours.
When you wan to keep the dd:hh:mm:ss format, you could do it like this:
$(document).ready(function() {
setInterval(function() {
$('.countdown').each(function() {
var time = $(this).text().split(':');
var timestamp = time[0] * 86400 + time[1] * 3600 + time[2] * 60 + time[3] * 1;
timestamp -= timestamp > 0;
var days = Math.floor(timestamp / 86400);
console.log(days);
var hours = Math.floor((timestamp - days * 86400) / 3600);
var minutes = Math.floor((timestamp - days * 86400 - hours * 3600) / 60);
var seconds = timestamp - days * 86400 - hours * 3600 - minutes * 60;
if (days < 10) {
days = '0' + days;
}
if (hours < 10) {
hours = '0' + hours;
}
if (minutes < 10) {
minutes = '0' + minutes;
}
if (seconds < 10) {
seconds = '0' + seconds;
}
$(this).text(days + ':' + hours + ':' + minutes + ':' + seconds);
});
}, 1000);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1 class="countdown">02:03:05:59</h1>
Your snippet goes from dd:hh:mm:ss to dd days, hh hours. So second time around, your tag contains non-parsable text.
I have changed it to something more precise. Something even MORE precise would be to give a timestamp in milliseconds in the future instead of something with seconds since it will take several seconds to render the page. If you round on minutes from the server, it would likely be better.
var aDay = 24*60*60*1000, anHour = 60*60*1000, aMin = 60*1000, aSec = 1000;
$(document).ready(function() {
$('.countdown').each(function() {
var time = $(this).data("time").split(':');
var date = new Date();
date.setDate(date.getDate()+parseInt(time[0],10))
date.setHours(date.getHours()+parseInt(time[1],10),date.getMinutes()+parseInt(time[2],10),date.getSeconds()+parseInt(time[3],10),0)
$(this).data("when",date.getTime());
});
setInterval(function() {
$('.countdown').each(function() {
var diff = new Date(+$(this).data("when"))-new Date().getTime();
var seconds, minutes, hours, days, x = diff / 1000;
seconds = Math.floor(x%60); x=(x/60|0); minutes = x % 60; x= (x/60|0); hours = x % 24; x=(x/24|0); days = x;
$(this).text(
days + ' day' +(days==1?", ":"s, ") +
hours + ' hour' +(hours==1?", ":"s, ") +
minutes + ' minute'+(minutes==1?", ":"s, ") +
seconds + ' second'+(seconds==1?".":"s.")
);
});
}, 500);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1 class="countdown" data-time="02:03:05:59"></h1>

How can I convert milliseconds to "hhmmss" format using javascript?

I am using javascript Date object trying to convert millisecond to how many hour, minute and second it is.
I have the currentTime in milliseconds
var currentTime = new Date().getTime()
and I have futureTime in milliseconds
var futureTime = '1432342800000'
I wanted to get difference in millisecond
var timeDiff = futureTime - currentTime
the the timeDiff was
timeDiff = '2568370873'
I want to know how many hours, minutes, seconds it is.
Could anyone help?
const secDiff = timeDiff / 1000; //in s
const minDiff = timeDiff / 60 / 1000; //in minutes
const hDiff = timeDiff / 3600 / 1000; //in hours
updated
function msToHMS( ms ) {
// 1- Convert to seconds:
let seconds = ms / 1000;
// 2- Extract hours:
const hours = parseInt( seconds / 3600 ); // 3,600 seconds in 1 hour
seconds = seconds % 3600; // seconds remaining after extracting hours
// 3- Extract minutes:
const minutes = parseInt( seconds / 60 ); // 60 seconds in 1 minute
// 4- Keep only seconds not extracted to minutes:
seconds = seconds % 60;
alert( hours+":"+minutes+":"+seconds);
}
const timespan = 2568370873;
msToHMS( timespan );
Demo
If you are confident that the period will always be less than a day you could use this one-liner:
new Date(timeDiff).toISOString().slice(11,19) // HH:MM:SS
N.B. This will be wrong if timeDiff is greater than a day.
Convert ms to hh:mm:ss
function millisecondsToHuman(ms) {
const seconds = Math.floor((ms / 1000) % 60);
const minutes = Math.floor((ms / 1000 / 60) % 60);
const hours = Math.floor((ms / 1000 / 3600 ) % 24)
const humanized = [
pad(hours.toString(), 2),
pad(minutes.toString(), 2),
pad(seconds.toString(), 2),
].join(':');
return humanized;
}
=
function msToHMS( duration ) {
var milliseconds = parseInt((duration % 1000) / 100),
seconds = parseInt((duration / 1000) % 60),
minutes = parseInt((duration / (1000 * 60)) % 60),
hours = parseInt((duration / (1000 * 60 * 60)) % 24);
hours = (hours < 10) ? "0" + hours : hours;
minutes = (minutes < 10) ? "0" + minutes : minutes;
seconds = (seconds < 10) ? "0" + seconds : seconds;
return hours + ":" + minutes + ":" + seconds ;
}
Converts milliseconds to a string in the format hh:mm:ss. Here's my version:
function HHMMSSFromMilliseconds(ms) {
// 1- Convert to seconds:
var seconds = ms / 1000;
// 2- Extract hours:
var hours = parseInt(seconds / 3600); // 3600 seconds in 1 hour
seconds = parseInt(seconds % 3600); // extract the remaining seconds after extracting hours
// 3- Extract minutes:
var minutes = parseInt(seconds / 60); // 60 seconds in 1 minute
// 4- Keep only seconds not extracted to minutes:
seconds = parseInt(seconds % 60);
// 5 - Format so it shows a leading zero if needed
let hoursStr = ("00" + hours).slice(-2);
let minutesStr = ("00" + minutes).slice(-2);
let secondsStr = ("00" + seconds).slice(-2);
return hoursStr + ":" + minutesStr + ":" + secondsStr
}
let timespan = 23570 * 1000;
let formattedTime = HHMMSSFromMilliseconds(timespan);
console.log(formattedTime);
Convert millis to DD(days):HH:MM:SS
function formatTime(timeMS) {
const [MS_IN_SEC, SEC_IN_DAY, SEC_IN_HOUR, SEC_IN_MIN] = [1000, 86400, 3600, 60];
let seconds = Math.round(Math.abs(timeMS) / MS_IN_SEC);
const days = Math.floor(seconds / SEC_IN_DAY);
seconds = Math.floor(seconds % SEC_IN_DAY);
const hours = Math.floor(seconds / SEC_IN_HOUR);
seconds = Math.floor(seconds % SEC_IN_HOUR);
const minutes = Math.floor(seconds / SEC_IN_MIN);
seconds = Math.floor(seconds % SEC_IN_MIN);
const [dd, hh, mm, ss] = [days, hours, minutes, seconds]
.map(item => item < 10 ? '0' + item : item.toString());
return dd + ':' + hh + ':' + mm + ':' + ss;
}
The difference in time is in milliseconds:
Get time difference between two dates in seconds
to get the difference you have to use math.floor()
http://www.w3schools.com/jsref/jsref_floor.asp
var secDiff = Math.floor(timeDiff / 1000); //in s
var minDiff = Math.floor(timeDiff / 60 / 1000); //in minutes
var hDiff = Math.floor(timeDiff / 3600 / 1000); //in hours
var timediff = futureTime - currentTime
long seconds = (long) (timediff / 1000) % 60 ;
long minutes = (long) ((timediff / (1000*60)) % 60);
long hours = (long) ((timediff / (1000*60*60)) % 24);
if(hours>0)
time = hours+" hrs : "+minutes+" mins";
else if(minutes>0)
time = minutes+" mins";
else if(seconds>0)
time = seconds+" secs";
Here is a simple function
function simplifiedMilliseconds(milliseconds) {
const totalSeconds = parseInt(Math.floor(milliseconds / 1000));
const totalMinutes = parseInt(Math.floor(totalSeconds / 60));
const totalHours = parseInt(Math.floor(totalMinutes / 60));
const days = parseInt(Math.floor(totalHours / 24));
const seconds = parseInt(totalSeconds % 60);
const minutes = parseInt(totalMinutes % 60);
const hours = parseInt(totalHours % 24);
let time = '1s';
if (days > 0) {
time = `${days}d:${hours}h:${minutes}m:${seconds}s`;
} else if (hours > 0) {
time = `${hours}h:${minutes}m:${seconds}s`;
} else if (minutes > 0) {
time = `${minutes}m:${seconds}s`;
} else if (seconds > 0) {
time = `${seconds}s`;
}
return time;
}

How to turn seconds (of one day) into text?

I have made this formula to turn a time as string into seconds (as integer)
seperated = new Date().split(":");
seconds = seperated[0] * 60 * 60 + seperated[1] * 60 + seperated[2];
How can I do this the reverse way?
I'm not very good at mathematics :)
EDIT:
I tried this: (the function makeTime(...) works)
function makeTime(timestr) {
var seperated = timestr.split(":");
return seperated[0] * 60 * 60 + seperated[1] * 60 + seperated[2];
}
function timeStr(integ) {
var hours = integ / 3600;
var minutes = (integ % 3600) / 60;
var seconds = integ % 60;
return hours + ":" + minutes + ":" + seconds;
}
Assuming time is the number of seconds as an integer:
hours = Math.floor(time/3600)
minutes = Math.floor((time % 3600) / 60)
seconds = time % 60
timeString = hours + ':' + minutes + ':' + seconds
You can use datejs, and write a code some thing like follows
(new Date).clearTime()
.addSeconds(15457)
.toString('H:mm:ss');
EDIT:
Or
hours = totalSeconds / 3600;
totalSeconds %= 3600;
minutes = totalSeconds / 60;
seconds = totalSeconds % 60;

Categories

Resources