How to format HTML5 audio's currentTime property with Javascript - 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;
}

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>

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

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);

how to convert seconds to minutes using javascript...?

I am making a online quiz system and i want to convert my timer from seconds to minutes and seconds. Please help me to solve this problem here is my code
<div id="divCounter"></div>
<script type="text/javascript">
if(localStorage.getItem("counter")){
if(localStorage.getItem("counter") <= 0){
var value = 110;
}
else{
var value = localStorage.getItem("counter");
}
}
else{
var value = 10;
}
var counter = function (){
document.getElementById('divCounter').innerHTML = localStorage.getItem("counter");
if(value <= 0){
window.location="http://www.google.com"
}else{
value = parseInt(value)-1;
localStorage.setItem("counter", value);
}
};
var interval = setInterval(function (){counter(value);}, 1000);
Try something like this:
function convert(value) {
return Math.floor(value / 60) + ":" + (value % 60 ? value % 60 : '00')
}
DEMO
value/60 + ":" + value%60, formats to (m)m:ss figure out the right padding
I would suggest you simply use this function (taken from here) which transforms a number of seconds into an string representing the hours, minutes and seconds in format HH:MM:SS:
function secondsToTimeString(seconds) {
var minutes = 0, hours = 0;
if (seconds / 60 > 0) {
minutes = parseInt(seconds / 60, 10);
seconds = seconds % 60;
}
if (minutes / 60 > 0) {
hours = parseInt(minutes / 60, 10);
minutes = minutes % 60;
}
return ('0' + hours).slice(-2) + ':' + ('0' + minutes).slice(-2) + ':' + ('0' + seconds).slice(-2);
}

Javascript: Math.floor not working as expected

function TimeConvert(num) {
for (i = 0; i < num; i+= 60) {
if (num % 60 < 60) {
var hours = Math.floor(i / 60);
if (hours == 0) {
var minutes = num % 60;
} else {
minutes = num % (60 * hours);
}
}
}
return hours + ":" + minutes;
}
When I call TimeConvert(60), it returns 0:0 instead of 1:0... why? Do I have to add a conditional to check whether num % 60 == 0 in such cases?
Why would you need to iterate ?
function TimeConvert(num) {
var hours = Math.floor( num / 60 );
var minutes = num % 60;
//minutes = minutes < 10 ? '0'+minutes:minutes
return hours + ":" + minutes;
}
FIDDLE
The problem is with i < num it should be i <= num instead.
Your for is only executed once with i=0, because on the very next step i gets +60 and i < num becomes false.
And, anyway, the whole function should just be:
function TimeConvert(num) {
var hours = Math.floor(num / 60);
var minutes = num % 60;
return hours + ":" + minutes;
}

Categories