Hi I have created a function which converts the hours, minutes and frames per second which is ->
function toHHMMSS(seconds) {
var sec_num = parseInt(seconds);
var hours = Math.floor(sec_num / 3600);
var parshours = parseInt(hours);
var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
var parsmin = parseInt(minutes);
var seconds = sec_num - (hours * 3600) - (minutes * 60);
var parssec = parseInt(seconds);
if (parshours < 10) { parshours = "0" + parshours; }
if (parsmin < 10) { parsmin = "0" + parsmin; }
if (parssec < 10) { parssec = "0" + parssec; }
// calculation for frames
var vidframes = document.getElementById('video');
timeFloat = parseInt(vidframes.currentTime * 25).toPrecision(4) / 60;
if (timeFloat > 25) {
timeFloat = 0;
}
frametestout = timeFloatOut - timeFloat;
frames = frametestout * frameRate;
var time = parshours + ':' + parsmin + ':' + parssec + ':' + timeFloat;
return time;
}
var timeFloat;
var timeFloatOut;
function getCurTime(e) {
var vid = document.getElementById('video');
timeFloat = parseInt(vid.currentTime);
var timeintime = document.getElementById('timein').innerHTML = toHHMMSS(timeFloat);
}
function getOutTime(e) {
var vid = document.getElementById('video');
timeFloatOut = parseInt(vid.currentTime);
var timeouttime = document.getElementById('timeOut').innerHTML = toHHMMSS(timeFloatOut);
var framecount = document.getElementById('frameCount').innerHTML = frames;
}
$("#btnTime").kendoButton({
click: getCurTime
});
$("#btnTimeOut").kendoButton({
click: getOutTime
});
}
The issue is I need the frames to reset after each second. rather than continuously incrementing.
Any help would be appreciated.
wouldn't that do the trick?
setTimeout(function(){
frames = 0;
},1000);
Related
I'm learning javascript and I want to create a simple clock. I want for user to be able to change minutes by entering a number in textbox and pressing a button, so when that number is displayed and when the seconds are counted to 60, that displayed number increase by 1, my code won't work, help pls:
var seconds = 0;
var minutes2 = 0;
var rezultat;
let dugme = document.querySelector("#dugme");
var el = document.getElementById("seconds-counter");
var el2 = document.getElementById("minutes-counter");
function incrementSeconds() {
seconds += 1;
if (seconds === 60) {
return seconds = 0;
}
el.innerText = seconds;
}
var cancel = setInterval(incrementSeconds, 1000);
dugme.addEventListener("click", function() {
var minutes = parseInt(document.querySelector("#value").value);
el2.innerText = minutes;
})
function incrementMinutes() {
minutes2 += 1;
if (minutes2 === 60) {
return minutes2 = 0;
}
rezultat = (seconds + minutes2 + minutes);
el2.innerText = rezultat;
}
var cancel = setInterval(incrementMinutes, 60000);
<form>
<input type="text" id="value">
<button id="dugme" type="button">minuti</button>
</form>
<div id="seconds-counter"></div>
<div id="minutes-counter"></div>
</form>
You have a few problems in your code. The main mistake is that your variable minutes is not defined in the function incrementMinutes() where you are trying to use it. You have to calculate it again.
Other improvements that you can make are:
Remove the return in your incrementSeconds and incrementMinutes function
Have only 1 setInterval, and call incrementMinutes when seconds reach 60.
You can see a snippet here below:
var seconds = 0;
var minutes2 = 0;
var rezultat;
let dugme = document.querySelector("#dugme");
var el = document.getElementById("seconds-counter");
var el2 = document.getElementById("minutes-counter");
function incrementSeconds() {
seconds += 1;
if (seconds === 60) {
seconds = 0;
incrementMinutes();
}
el.innerText = seconds;
}
var cancel = setInterval(incrementSeconds, 1000);
dugme.addEventListener("click", function() {
var minutes = parseInt(document.querySelector("#value").value);
el2.innerText = minutes;
})
function incrementMinutes() {
minutes2 += 1;
if (minutes2 === 60) {
minutes2 = 0;
}
rezultat = (minutes2 + parseInt(document.querySelector("#value").value));
el2.innerText = rezultat;
}
<form>
<input type="text" id="value">
<button id="dugme" type="button">minuti</button>
</form>
<div id="seconds-counter"></div>
<div id="minutes-counter"></div>
To show here the behavior I made a minute to 5 seconds.
As a formatting improvement, if you want to show in result min:sec you can do this
min = min < 10 ? "0"+min : min;
seconds = seconds < 10 ? "0" + seconds : seconds;
To build the string with leading zeros.
I have removed the returns because they were not neccessary you can inside reset the value there is no need to return it.
var seconds = 0;
var min = 0;
var rezultat;
let dugme = document.querySelector("#dugme");
var secCounter = document.getElementById("seconds-counter");
var mintCounter = document.getElementById("minutes-counter");
function incrementSeconds() {
seconds += 1;
if (seconds === 60) {
seconds = 0;
}
secCounter.innerText = seconds;
}
var cancel = setInterval(incrementSeconds, 1000);
function incrementMinutes() {
min += 1;
if (min === 60) {
min = 0;
}
tempMin = min;
tempSec = seconds;
min = min < 10 ? "0"+min : min;
seconds = seconds < 10 ? "0" + seconds : seconds;
rezultat = (min+":"+seconds);
mintCounter.innerText = rezultat;
min = tempMin;
seconds = tempSec;
}
// for debugging to 5 sec
var cancel = setInterval(incrementMinutes, 5000);
dugme.addEventListener("click", function() {
var inpMinutes = parseInt(document.querySelector("#value").value);
min = inpMinutes;
mintCounter.innerText = min;
})
<form>
<input type="text" id="value">
<button id="dugme" type="button">minuti</button>
</form>
<div id="seconds-counter"></div>
<div id="minutes-counter"></div>
</form>
So i want to make a program that start countingdown from a value that you choose but the issue is when i try to bring the value to javascript it dosen't work but when i type the value in html it work
here is my html code
<body>
<div id="count">
<input id="time" type="number" min="0">
<button id="button">Press here to begin the countdown</button>
</div>
<script src="lol.js"></script>
and here is my javascript code
var count = document.getElementById("count"),
seconds = document.getElementById("time").value ,
btn = document.getElementById("button"),
secondPass;
countDown = setInterval(function() {
secondPass()
} , 1000);
btn.onclick =
function secondPass(){
var minutes = Math.floor(seconds / 60),
remseconds = seconds % 60;
count.innerHTML = minutes + ":" + remseconds;
if (remseconds < 10){
remseconds = "0" + remseconds;
}
if (seconds> 0 ){
seconds = seconds - 1;
}
else {
clearInterval(countDown)
count.innerHTML = "done !"
}
}
The problem in your code was that you were trying to get the value before it was entered.
If I understood correctly, you wanted this:
var count = document.getElementById("count"),
btn = document.getElementById("button"),
secondPass;
btn.addEventListener("click", secondPass);
function secondPass() {
var seconds = document.getElementById("time").value
var countDown = setInterval(function () {
var minutes = Math.floor(seconds / 60),
remseconds = seconds % 60;
count.innerHTML = minutes + ":" + remseconds;
if (remseconds < 10) {
remseconds = "0" + remseconds;
}
if (seconds > 0) {
seconds = seconds - 1;
}
else {
clearInterval(countDown)
count.innerHTML = "done !"
}
}, 1000);
}
<div id="count">
<input id="time" type="number" min="0">
<button id="button">Press here to begin the countdown</button>
</div>
Main mistake - on time when you declare seconds variable - time input is empty.
I fixed your example, so you can figure out what was wrong
var count = document.getElementById("count"),
seconds,
btn = document.getElementById("button"),
countDown
btn.onclick = function() {
seconds = document.getElementById("time").value;
countDown = setInterval(function() {
secondPass()
}, 1000);
}
function secondPass(){
console.log('S', seconds)
var minutes = Math.floor(seconds / 60),
remseconds = seconds % 60;
count.innerHTML = minutes + ":" + remseconds;
if (remseconds < 10){
remseconds = "0" + remseconds;
}
if (seconds> 0 ){
seconds = seconds - 1;
}
else {
clearInterval(countDown)
count.innerHTML = "done !"
}
}
I have been made a count down for 10 items with JavaScript but it was so long for several items.
How can i make this brief?
this code for the only one item.
var time01 = 16360;
function time(){
var hour =Math.floor(time01/3600);
var baghi01=time01%3600;
var min = Math.floor(baghi01/60);
var sec = baghi01%60;
document.getElementById('hour-01').textContent = hour;
document.getElementById('min-01').textContent = min;
document.getElementById('sec-01').textContent = sec;
if(sec<10){
document.getElementById('sec-01').textContent = (`0${sec}`);
}
if(min<10){
document.getElementById('min-01').textContent = (`0${min}`);
}
if(hour<10){
document.getElementById('hour-01').textContent = (`0${hour}`);
}
time01 --;
}
setInterval(time,1000);
You could take a closure over the time and target information.
function time(time, target) {
const format = v => v.toString().padStart(2, 0);
var hourE = document.getElementById(`hour-${target}`),
minE = document.getElementById(`min-${target}`),
secE = document.getElementById(`sec-${target}`);
return function () {
var hour = Math.floor(time / 3600)
baghi01 = time % 3600,
min = Math.floor(baghi01 / 60),
sec = baghi01 % 60;
hourE.innerHTML = format(hour);
minE.innerHTML = format(min);
secE.innerHTML = format(sec);
time--;
};
}
setInterval(time(16360, '01'), 996);
setInterval(time(16360, '02'), 997);
setInterval(time(16360, '03'), 998);
setInterval(time(16360, '04'), 999);
setInterval(time(16360, '05'), 1000);
<span id="hour-01"></span>:<span id="min-01"></span>:<span id="sec-01"></span><br>
<span id="hour-02"></span>:<span id="min-02"></span>:<span id="sec-02"></span><br>
<span id="hour-03"></span>:<span id="min-03"></span>:<span id="sec-03"></span><br>
<span id="hour-04"></span>:<span id="min-04"></span>:<span id="sec-04"></span><br>
<span id="hour-05"></span>:<span id="min-05"></span>:<span id="sec-05"></span><br>
This question already has answers here:
Javascript seconds to minutes and seconds
(30 answers)
Closed 5 years ago.
var IDLE_TIMEOUT = 2700; //seconds 45min
var _idleSecondsCounter = 0;
document.onclick = function() {
_idleSecondsCounter = 0;
};
document.onmousemove = function() {
_idleSecondsCounter = 0;
};
document.onkeypress = function() {
_idleSecondsCounter = 0;
};
window.setInterval(CheckIdleTime, 1000);
function CheckIdleTime() {
_idleSecondsCounter++;
var oPanel = document.getElementById("SecondsUntilExpire");
if (oPanel)
oPanel.innerHTML = (IDLE_TIMEOUT - _idleSecondsCounter) + "";
if (_idleSecondsCounter >= IDLE_TIMEOUT) {
//alert("Your Session Time expired. Please Login.");
document.location.href = "logoff.php";
}
}
<div id='SecondsUntilExpire'></div>
So from above i am getting output as 2699 ( its in seconds = 45min ) and if no event happen its decrements ( 2698..2697..and so on ) and if any event (mouse up..etc ) happen its back to 2699
But i need in minutes thats : 44:59, 44:58 ..and so on
Use parseInt((IDLE_TIMEOUT - _idleSecondsCounter)/60) + ":" + (IDLE_TIMEOUT - _idleSecondsCounter)%60; to get achieve hh:mm effect
var IDLE_TIMEOUT = 2700; //seconds 45min
var _idleSecondsCounter = 0;
document.onclick = function() {
_idleSecondsCounter = 0;
};
document.onmousemove = function() {
_idleSecondsCounter = 0;
};
document.onkeypress = function() {
_idleSecondsCounter = 0;
};
window.setInterval(CheckIdleTime, 1000);
function CheckIdleTime() {
_idleSecondsCounter++;
var oPanel = document.getElementById("SecondsUntilExpire");
if (oPanel)
oPanel.innerHTML = parseInt((IDLE_TIMEOUT - _idleSecondsCounter)/60) + ":";
oPanel.innerHTML += (IDLE_TIMEOUT - _idleSecondsCounter)%60<10?"0"+(IDLE_TIMEOUT - _idleSecondsCounter)%60:(IDLE_TIMEOUT - _idleSecondsCounter)%60;
if (_idleSecondsCounter >= IDLE_TIMEOUT) {
alert("Your Session Time expired. Please Login.");
//document.location.href = "logoff.php";
}
}
<div id='SecondsUntilExpire'></div>
Here's how I'd code it to be readable
function CheckIdleTime() {
_idleSecondsCounter++;
var oPanel = document.getElementById("SecondsUntilExpire");
var remain = IDLE_TIMEOUT - _idleSecondsCounter;
var remainMinutes = Math.floor(remain / 60);
var remainSeconds = ('0' + (remain % 60)).substr(-2);
if (oPanel)
oPanel.innerHTML = remainMinutes + ':' + remainSeconds;
if (_idleSecondsCounter >= IDLE_TIMEOUT) {
//alert("Your Session Time expired. Please Login.");
document.location.href = "logoff.php";
}
}
uses
var remainSeconds = ('0' + (remain % 60)).substr(-2);
so that seconds are always two digits
Do you need this function
var IDLE_TIMEOUT = 2700;
alert(getMinutes(IDLE_TIMEOUT));
function getMinutes(time){
minutes = time/60;
seconds = time%60;
return ("00" + minutes).substr(-2)+":"+("00" + seconds).substr(-2);
}
Demo : https://jsfiddle.net/ttqtfwp5/1/
I have this code:
var hour = parseInt(js_arr[j].substring(0, 1));
var min = parseInt(js_arr[j].substring(3, 4));
var seconds = parseInt(js_arr[j].substring(6, 7));
var mil_sec = parseInt(js_arr[j].substring(9, 11));
var time = (hour * 3600000) + (min * 60000) + (seconds * 1000) + mil_sec;
function timeout() {
setTimeout(function () {
if (true) {
document.getElementById('subs').innerHTML = js_arr[i];
i = i + 4;
j = j + 4;
hour = parseInt(js_arr[j].substring(0, 1));
min = parseInt(js_arr[j].substring(3, 4));
seconds = parseInt(js_arr[j].substring(6, 7));
mil_sec = parseInt(js_arr[j].substring(9, 11));
time = (hour * 3600000) + (min * 60000) + (seconds * 1000) + mil_sec;
timeout();
} else {
timeout();
}
}, time);
}
Before javascript code I have an onclick="timeout(); button.
This button allows subtitles to play. What I would also like it to do is to stop these subtitles from playing by clicking on that same button. It would be great if someone could help!
Thanks a lot.
Add a variable that indicates whether the timeout is active. In the timeout()-function, this variable is checked and another loop is only initiated when it is true. To Start and Stop you simply set (and call timeout()) or reset the variable.
var hour = parseInt(js_arr[j].substring(0,1));
var min = parseInt(js_arr[j].substring(3,4));
var seconds = parseInt(js_arr[j].substring(6,7));
var mil_sec = parseInt(js_arr[j].substring(9,11));
var time = (hour*3600000)+(min*60000)+(seconds*1000)+mil_sec;
var timeOutRunning = false;
function startTimeOut() {
timeOutRunning = true;
timeout();
}
function stopTimeOut() {
timeOutRunning = false;
}
function timeout() {
if(timeOutRunning) {
setTimeout(function() {
document.getElementById('subs').innerHTML = js_arr[i];
i=i+4;
j=j+4;
hour = parseInt(js_arr[j].substring(0,1));
min = parseInt(js_arr[j].substring(3,4));
seconds = parseInt(js_arr[j].substring(6,7));
mil_sec = parseInt(js_arr[j].substring(9,11));
time = (hour*3600000)+(min*60000)+(seconds*1000)+mil_sec;
timeout();
}, time);
}
}
And then the onclick-function:
onclick="if(timeOutRunning) { stopTimeOut(); } else { startTimeOut(); }"