jQuery counter to count up Result (Days HH:mm:ss) - javascript

I want a jQuery function similar to countTo or a pure javascript function to count to starting to (seconds or decimal time)... and output days HH:MM:SS
convert_seconds(2681623) => output "31D 00:53:43"
or decimal Hours
convert_decimalHours(25.555) => output "1D 01:33:18" (I think Its not correct but is something like that kkkkk)
I prefer seconds to be more accurate and easier to manipulate...
here is something that I Tried...
http://jsfiddle.net/5LWgN/105/
and must be a live counter 1 by 1 seconds counting
String.prototype.toHHMMSS = function () {
var sec_num = parseInt(this, 10); // don't forget the second parm
var hours = Math.floor(sec_num / 3600);
var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
var seconds = sec_num - (hours * 3600) - (minutes * 60);
if (hours < 10) {
hours = "0" + hours;
}
if (minutes < 10) {
minutes = "0" + minutes;
}
if (seconds < 10) {
seconds = "0" + seconds;
}
var time = hours + ':' + minutes + ':' + seconds;
return time;
}
var count = '2681623';
var counter = setInterval(timer, 1000);
function timer() {
console.log(count);
if (parseInt(count) <= 0) {
clearInterval(counter);
return;
}
var temp = count.toHHMMSS();
count = (parseInt(count) + 1).toString();
$('#timer').html(temp);
}

You have some errors in the conversion step, and someone has asked before, see here.
var hours = parseInt( totalSec / 3600 ) % 24;
var minutes = parseInt( totalSec / 60 ) % 60;
var seconds = totalSec % 60;
var result = (hours < 10 ? "0" + hours : hours) + "-" + (minutes < 10 ? "0" + minutes : minutes) + "-" + (seconds < 10 ? "0" + seconds : seconds);

Related

Javascript countdown timer should stop at 00:00

I am working on the countdown timer and I have found this code which pretty much what I need except I dont want to restart the timer when it reaches 00:00. I tried to make changes but wasn't successfull.
Here is the JsFiddle code
<div id="countdown">1:00</div>
var seconds;
var temp;
var GivenTime=document.getElementById('countdown').innerHTML
console.log(GivenTime)
function countdown() {
time = document.getElementById('countdown').innerHTML;
timeArray = time.split(':')
seconds = timeToSeconds(timeArray);
if (seconds == '') {
temp = document.getElementById('countdown');
temp.innerHTML = GivenTime;
time = document.getElementById('countdown').innerHTML;
timeArray = time.split(':')
seconds = timeToSeconds(timeArray);
}
seconds--;
temp = document.getElementById('countdown');
temp.innerHTML= secondsToTime(seconds);
timeoutMyOswego = setTimeout(countdown, 1000);
}
function timeToSeconds(timeArray) {
var minutes = (timeArray[0] * 1);
var seconds = (minutes * 60) + (timeArray[1] * 1);
return seconds;
}
function secondsToTime(secs) {
var hours = Math.floor(secs / (60 * 60));
hours = hours < 10 ? '0' + hours : hours;
var divisor_for_minutes = secs % (60 * 60);
var minutes = Math.floor(divisor_for_minutes / 60);
minutes = minutes < 10 ? '0' + minutes : minutes;
var divisor_for_seconds = divisor_for_minutes % 60;
var seconds = Math.ceil(divisor_for_seconds);
seconds = seconds < 10 ? '0' + seconds : seconds;
return minutes + ':' + seconds;
//hours + ':' +
}
countdown();
You could simply use clearTimeout function in your countdown when it reaches 00:00
Adding this if condition in your countdown is all you need.
if (secondsToTime(seconds) == '00:00') {
clearTimeout(timeoutMyOswego); //stop timer
}
Working Demo:
var seconds;
var temp;
var GivenTime = document.getElementById('countdown').innerHTML
function countdown() {
time = document.getElementById('countdown').innerHTML;
timeArray = time.split(':')
seconds = timeToSeconds(timeArray);
if (seconds == '') {
temp = document.getElementById('countdown');
temp.innerHTML = GivenTime;
time = document.getElementById('countdown').innerHTML;
timeArray = time.split(':')
seconds = timeToSeconds(timeArray);
}
seconds--;
temp = document.getElementById('countdown');
temp.innerHTML = secondsToTime(seconds);
var timeoutMyOswego = setTimeout(countdown, 1000);
if (secondsToTime(seconds) == '00:00') {
clearTimeout(timeoutMyOswego); //stop timer
console.log('Time"s UP')
}
}
function timeToSeconds(timeArray) {
var minutes = (timeArray[0] * 1);
var seconds = (minutes * 60) + (timeArray[1] * 1);
return seconds;
}
function secondsToTime(secs) {
var hours = Math.floor(secs / (60 * 60));
hours = hours < 10 ? '0' + hours : hours;
var divisor_for_minutes = secs % (60 * 60);
var minutes = Math.floor(divisor_for_minutes / 60);
minutes = minutes < 10 ? '0' + minutes : minutes;
var divisor_for_seconds = divisor_for_minutes % 60;
var seconds = Math.ceil(divisor_for_seconds);
seconds = seconds < 10 ? '0' + seconds : seconds;
return minutes + ':' + seconds;
//hours + ':' +
}
countdown();
<div id="countdown">00:10</div>
You can try replacing the code which is responsible for restarting the timer.
But doing only that will result in timer going to negative values.
So as #Always Helping suggested, you need to add the code to stop the timer.
var seconds, temp;
var GivenTime = document.getElementById('countdown').innerHTML;
function countdown() {
time = document.getElementById('countdown').innerHTML;
timeArray = time.split(':')
seconds = timeToSeconds(timeArray);
console.log(seconds);
// Do something when the timer is out
if (seconds === 0) {
clearTimeout(timeoutMyOswego);
return;
}
seconds--;
temp = document.getElementById('countdown');
temp.innerHTML = secondsToTime(seconds);
timeoutMyOswego = setTimeout(countdown, 1000);
};
countdown();
function timeToSeconds(timeArray) {
var minutes = (timeArray[0] * 1);
var seconds = (minutes * 60) + (timeArray[1] * 1);
return seconds;
}
function secondsToTime(secs) {
var hours = Math.floor(secs / (60 * 60));
hours = hours < 10 ? '0' + hours : hours;
var divisor_for_minutes = secs % (60 * 60);
var minutes = Math.floor(divisor_for_minutes / 60);
minutes = minutes < 10 ? '0' + minutes : minutes;
var divisor_for_seconds = divisor_for_minutes % 60;
var seconds = Math.ceil(divisor_for_seconds);
seconds = seconds < 10 ? '0' + seconds : seconds;
return minutes + ':' + seconds;
}
<div id="countdown">00:05</div>

setInterval timer result not updating on innerHTML

I have a simple countdown code running on Javascript, and when I run this code,
setInterval(function() {
var currentTime = new Date();
var futureTime = new Date(countDownDate);
var s = futureTime.getTime() - currentTime.getTime();
(seconds = parseInt((s / 1000) % 60)),
(minutes = parseInt((s / (1000 * 60)) % 60)),
(hours = parseInt((s / (1000 * 60 * 60)) % 24));
hours = hours < 10 ? "0" + hours : hours;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
var documenttitle = hours + ":" + minutes + ":" + seconds;
console.log(documenttitle);
var remainingtime = documenttitle
document.getElementById("remaining").innerHTML = remainingtime;
}, 500);
the results from console.log works fine,
but innerHTML constantly glitches. Flashing two different numbers but not updating. How do I fix this?
I don't see any problems with your code, the code below it's the same as your code but with the variable countDownDate defined.
Maybe it's a problem with something else in your code.
var countDownDate = new Date();
countDownDate.setMinutes ( countDownDate.getMinutes() + 30 );
setInterval(function() {
var currentTime = new Date();
var futureTime = new Date(countDownDate);
var s = futureTime.getTime() - currentTime.getTime();
(seconds = parseInt((s / 1000) % 60)),
(minutes = parseInt((s / (1000 * 60)) % 60)),
(hours = parseInt((s / (1000 * 60 * 60)) % 24));
hours = hours < 10 ? "0" + hours : hours;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
var documenttitle = hours + ":" + minutes + ":" + seconds;
console.log(documenttitle);
var remainingtime = documenttitle
document.getElementById("remaining").innerHTML = remainingtime;
}, 500);
<div id="remaining">
0
</div>

Countdown Timer Problems

I have been looking for a count down timer on google and can't seem to find one.
I was just wondering if anyone would be able to help.
I got given one but it displays the wrong times.
I want it to display days, hours, minutes and seconds left.
heres what I need the timer on
http://pastebin.com/fQjyRFXw
It already has the timer code there but it's all wrong, any help would be great, thank you
If it's helps here's a snippet of the Java code
var count = <?= $time['a_time'] ?>;
var counter = setInterval(timer, 1000); //1000 will* run it every 1 second
function timer() {
count = count - 1;
if(count == -1) {
clearInterval(counter);
return;
}
var seconds = count % 60;
var minutes = Math.floor(count / 60);
var hours = Math.floor(minutes / 60);
minutes %= 60;
hours %= 60;
document.getElementById("clock").innerHTML = hours + "hours " + minutes + "minutes and " + seconds + " seconds left";
}
Ok I see your problem. The a_time stored in database is an Unix timestamp, thus when you are counting down, you need to know how long is between now and a_time instead of only a_time.
Try this:
var count = <?= $time['a_time'] ?>;
var now = Math.floor(new Date().getTime() / 1000);
count = count - now;
var counter = setInterval(timer, 1000); //1000 will* run it every 1 second
function timer() {
count = count - 1;
if(count == -1) {
clearInterval(counter);
return;
}
var seconds = count % 60;
var minutes = Math.floor(count / 60);
var hours = Math.floor(minutes / 60);
var days = Math.floor(hours / 24);
minutes %= 60;
hours %= 24;
document.getElementById("clock").innerHTML = days + "days " + hours + "hours " + minutes + "minutes and " + seconds + " seconds left";
}
Why not use one of the man examples on codepen such as this beautiful one
http://codepen.io/anon/pen/VeLWdz ?
(function (e) {
e.fn.countdown = function (t, n) {
function i() {
eventDate = Date.parse(r.date) / 1e3;
currentDate = Math.floor(e.now() / 1e3);
if (eventDate <= currentDate) {
n.call(this);
clearInterval(interval)
}
seconds = eventDate - currentDate;
days = Math.floor(seconds / 86400);
seconds -= days * 60 * 60 * 24;
hours = Math.floor(seconds / 3600);
seconds -= hours * 60 * 60;
minutes = Math.floor(seconds / 60);
seconds -= minutes * 60;
days == 1 ? thisEl.find(".timeRefDays").text("day") : thisEl.find(".timeRefDays").text("days");
hours == 1 ? thisEl.find(".timeRefHours").text("hour") : thisEl.find(".timeRefHours").text("hours");
minutes == 1 ? thisEl.find(".timeRefMinutes").text("minute") : thisEl.find(".timeRefMinutes").text("minutes");
seconds == 1 ? thisEl.find(".timeRefSeconds").text("second") : thisEl.find(".timeRefSeconds").text("seconds");
if (r["format"] == "on") {
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
}
if (!isNaN(eventDate)) {
thisEl.find(".days").text(days);
thisEl.find(".hours").text(hours);
thisEl.find(".minutes").text(minutes);
thisEl.find(".seconds").text(seconds)
} else {
alert("Invalid date. Example: 30 Tuesday 2013 15:50:00");
clearInterval(interval)
}
}
var thisEl = e(this);
var r = {
date: null,
format: null
};
t && e.extend(r, t);
i();
interval = setInterval(i, 1e3)
}
})(jQuery);
$(document).ready(function () {
function e() {
var e = new Date;
e.setDate(e.getDate() + 60);
dd = e.getDate();
mm = e.getMonth() + 1;
y = e.getFullYear();
futureFormattedDate = mm + "/" + dd + "/" + y;
return futureFormattedDate
}
$("#countdown").countdown({
date: "1 April 2017 09:00:00", // Change this to your desired date to countdown to
format: "on"
});
});

Simple countdown timer mm:ss

I want to create a simple countdown timer.
I found something and its working for hours minute and seconds, I want only minutes:seconds...
how can I make the same timer for mm:ss format?
var seconds;
var temp;
function countdown() {
time = document.getElementById('countdown').innerHTML;
timeArray = time.split(':')
seconds = timeToSeconds(timeArray);
if (seconds == '') {
temp = document.getElementById('countdown');
temp.innerHTML = "00:00:00";
return;
}
seconds--;
temp = document.getElementById('countdown');
temp.innerHTML = secondsToTime(seconds);
timeoutMyOswego = setTimeout(countdown, 1000);
}
function timeToSeconds(timeArray) {
var minutes = (timeArray[0] * 60) + (timeArray[1] * 1);
var seconds = (minutes * 60) + (timeArray[2] * 1);
return seconds;
}
function secondsToTime(secs) {
var hours = Math.floor(secs / (60 * 60));
hours = hours < 10 ? '0' + hours : hours;
var divisor_for_minutes = secs % (60 * 60);
var minutes = Math.floor(divisor_for_minutes / 60);
minutes = minutes < 10 ? '0' + minutes : minutes;
var divisor_for_seconds = divisor_for_minutes % 60;
var seconds = Math.ceil(divisor_for_seconds);
seconds = seconds < 10 ? '0' + seconds : seconds;
return hours + ':' + minutes + ':' + seconds;
}
countdown();
here is the html
<div id="countdown">01:02:15</div>
var seconds;
var temp;
console.clear();
function countdown() {
time = document.getElementById('countdown').innerHTML;
timeArray = time.split(':')
seconds = timeToSeconds(timeArray);
if (seconds == '') {
temp = document.getElementById('countdown');
temp.innerHTML = "00:00";
return;
}
seconds--;
temp = document.getElementById('countdown');
temp.innerHTML= secondsToTime(seconds);
timeoutMyOswego = setTimeout(countdown, 1000);
}
function timeToSeconds(timeArray) {
var minutes = (timeArray[0] * 1);
var seconds = (minutes * 60) + (timeArray[1] * 1);
return seconds;
}
function secondsToTime(secs) {
var hours = Math.floor(secs / (60 * 60));
hours = hours < 10 ? '0' + hours : hours;
var divisor_for_minutes = secs % (60 * 60);
var minutes = Math.floor(divisor_for_minutes / 60);
minutes = minutes < 10 ? '0' + minutes : minutes;
var divisor_for_seconds = divisor_for_minutes % 60;
var seconds = Math.ceil(divisor_for_seconds);
seconds = seconds < 10 ? '0' + seconds : seconds;
return minutes + ':' + seconds;
}
countdown();
https://jsfiddle.net/santoshj/jex1f8uv/
var countDownController = function(seconds){
var countdownTimer = setInterval(startTimer, 1000);
function startTimer(){
var days = Math.floor(seconds/24/60/60);
var hoursLeft = Math.floor((seconds) - (days*86400));
var hours = Math.floor(hoursLeft/3600);
var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
var minutes = Math.floor(minutesLeft/60);
var remainingSeconds = seconds % 60;
if(minutes<10){
minutes = "0"+ minutes;
}
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
// You can use which state you need!
console.log(days+":"+minutes+":"+hours+":"+remainingSeconds)
if (seconds == 0) {
clearInterval(countdownTimer);
//state for end timing
alert('time is up');
} else {
seconds--;
}
}
};
var timeToCountDown = 1232321;
countDownController(timeToCountDown);

How to format HTML5 audio's currentTime property with Javascript

I am trying to format the HTML5 currentTime property using the following equation:
var s = parseInt(audio.currentTime % 60);
var m = parseInt((audio.currentTime / 60) % 60);
duration.innerHTML = m + ':' + s ;
which works, only I want the seconds 1-9 to be displayed as :01 - :09 instead of :1 and :9 as they currently do. How would I write this code?
That may help you, I used that:
function formatTime(seconds) {
minutes = Math.floor(seconds / 60);
minutes = (minutes >= 10) ? minutes : "0" + minutes;
seconds = Math.floor(seconds % 60);
seconds = (seconds >= 10) ? seconds : "0" + seconds;
return minutes + ":" + seconds;
}
if (m < 10) m = '0' + m;
if (s < 10) s = '0' + s;
You just have to add a single 0 if s is less than 10. After
var m = parseInt((audio.currentTime / 60) % 60);
put
if (s < 10) {
s = '0' + s;
}
The code is pretty straightforward.
var currentTime = audio.currentTime | 0;
var minutes = "0" + Math.floor(currentTime / 60);
var seconds = "0" + (currentTime - minutes * 60);
var cur = minutes.substr(-2) + ":" + seconds.substr(-2);
On TypeScript:
formatTime(seconds: number): string {
let minutes: any = Math.floor(seconds / 60);
let secs: any = Math.floor(seconds % 60);
if (minutes < 10) {
minutes = '0' + minutes;
}
if (secs < 10) {
secs = '0' + secs;
}
return minutes + ':' + secs;
}

Categories