We Keep Coding

Timer doesn't start running

I tried to make a normal Timer in Javascript and started coding something with help of some Tutorials.
I did it the same way as in the tutorial but my timer actually doesn't start running, and i don't know why.
Here is my Code:
var time = 0;
var running = 0;
function startPause() {
if(running == 0){
running = 1;
increment();
}
else{
running = 0;
}
}
function reset(){
running = 0;
time = 0;
document.getElementById("startPause").innerHTML = "Start";
}
function increment() {
if(running == 1){
setTimeout(function(){
time++;
var mins = Math.floor(time / 10 / 60);
var secs = Math.floor(time / 10);
var tenths = time % 10;
document.getElementById("output").innerHTML = mins + ":" + secs + ":" + tenths;
}, 100);
}
}
</script>
i also made a fiddle you can check out here: https://jsfiddle.net/adamswebspace/5p1qgsz9/
what is wrong with my code?

I cleared a bit your code, and used setInterval instead of setTimeOut;
note that you have to use clearInterval in order to stop the timer
var time = 0;
var running = 0;
var timer = null;
function increment() {
time++;
var mins = Math.floor(time / 10 / 60);
var secs = Math.floor(time / 10);
var tenths = time % 10;
document.getElementById("output").innerHTML = mins + ":" + secs + ":" + tenths;
}
function startPause() {
if (running === 0) {
running = 1;
timer = setInterval(increment, 1000);
} else {
running = 0;
clearInterval(timer);
}
}
function reset() {
running = 0;
time = 0;
document.getElementById("startPause").innerHTML = "Start";
}

you have to bind the function like the following
var vm = this;
vm.startPause = function startPause() {
if (running == 0) {
running = 1;
vm.increment();
} else {
running = 0;
}
}
https://jsfiddle.net/f7hmbox7/

In order for onclick to find the function in your code. It must be supplied in a <script> tag for JSFiddle.
You can just add
<script>
/** JS Here */
</script>
and it will work.
Keep in mind that all the errors coming from JS are showed in the console of your browser inspector.
https://jsfiddle.net/dzskncpw/

frames per second issue

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

Countdown timer javascript mins into hours

I'm a beginner in JavaScript, I wrote a countdown timer, but I don't know how to convert the mins into hours. I think its not to hard, but I can't do it, whenever I wrote new rows its not working. Here is my code:
var minutesRemaining;
var secondsRemaining;
var intervalHandle;
function resetPage() {
document.getElementById('inputArea').style.display = 'block';
//hide pause button by default
document.getElementById("pauseArea").style.display = "none";
//hide resume button
document.getElementById("resumeArea").style.display = "none";
}
function resumeCountdown() {
tick();
intervalHandle = setInterval(tick, 1000);
//hide resume button when resuming
document.getElementById("resumeArea").style.display = "none";
//show resume button;
document.getElementById("pauseArea").style.display = "block";
return;
}
function pauseCountdown() {
clearInterval(intervalHandle);
document.getElementById("pauseArea").style.display = "none";
document.getElementById("resumeArea").style.display = "block";
return;
}
function tick() {
//grab h1
var timeDisplay = document.getElementById('time');
//turn seconds into mm:55
var min = Math.floor(secondsRemaining / 60);
var sec = secondsRemaining - (min * 60);
//add leading 0 if seconds less than 10
if (sec < 10) {
sec = '0' + sec;
}
//concatenate with colon
var message = min.toString() + ':' + sec;
// now change the display
timeDisplay.innerHTML = message;
//stop if down to zero
if (secondsRemaining === 0) {
alert('Done!');
clearInterval(intervalHandle);
resetPage();
}
// subtract from seconds remaining
secondsRemaining--;
}
function startCountdown() {
//get contents
var minutes = document.getElementById('minutes').value;
//check if not a number
if (isNaN(minutes)) {
alert("Please enter a number!");
return;
}
//how many seconds?
secondsRemaining = minutes * 60;
//call tick
intervalHandle = setInterval(tick, 1000);
//hide form
document.getElementById('inputArea').style.display = 'none';
//show pause when running
document.getElementById("pauseArea").style.display = "block";
}
window.onload = function () {
// create text input
var inputMinutes = document.createElement('input');
inputMinutes.setAttribute('id', 'minutes');
inputMinutes.setAttribute('type', 'text');
inputMinutes.setAttribute('placeholder', 'Idő megadása');
//pause button
var pauseButton = document.getElementById("pauseBtn");
pauseButton.onclick = function() {
pauseCountdown();
};
//resume button
var resumeButton = document.getElementById("resumeBtn");
resumeButton.onclick = function() {
resumeCountdown();
};
//create button
var startButton = document.createElement('input');
startButton.setAttribute('type', 'button');
startButton.setAttribute('value', 'Indítás');
startButton.onclick = function () {
startCountdown();
};
// add to DOM
document.getElementById('inputArea').appendChild(inputMinutes);
document.getElementById('inputArea').appendChild(startButton);
document.getElementById("pauseArea").appendChild(pauseButton);
document.getElementById("resumeArea").appendChild(resumeButton);
//hide pause button by default
document.getElementById("pauseArea").style.display = "none";
//hide pause button by default
document.getElementById("resumeArea").style.display = "none";
};

Here is what i just wrote really quick. It may help you. But you can just do some basic math to get your conversions and handle the remainder. Like so:
function countDown(future_date_in_millis) {
var date = new Date();
var current_time = date.getTime();
//get the future date and time
var future_date = future_date_in_millis.getTime(); //1438077258047; //date.getTime();
// get the duration in milliseconds
// 1 day = 86400000 millis
var duration = future_date - current_time;
var dd = Math.floor(duration / 86400000);
var remainder = duration % 86400000;
var hh = Math.floor(remainder / 3600000);
remainder = remainder % 3600000;
var mm = Math.floor(remainder / 60000);
remainder = remainder % 60000;
var ss = Math.floor(remainder / 1000);
var days = document.getElementById("dd");
var hours = document.getElementById("hh");
var minutes = document.getElementById("mm");
var seconds = document.getElementById("ss");
days.innerHTML = dd.toString();
hours.innerHTML = hh.toString();
minutes.innerHTML = mm.toString();
seconds.innerHTML = ss.toString();
}
window.setInterval(function () {
/// call your function here
var d = new Date("July 15, 2015 4:52:00 PM");
countDown(d);
}, 1000);

Button onclick performing multiple actions

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(); }"

Adding a Pause Button [closed]

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 9 years ago.
I have the following code to create the stopwatch functionality. The only thing I would like to have is to create the startandstop button be startandpause. But I have been wracking my brain ang the internet trying to find out how to do this. Any help would be greatly appreciated. Thanks!
<script type="text/javascript">
<!-- Stopwatch
var stopwatch;
var runningstate = 0; // 1 means the timecounter is running 0 means counter stopped
var stoptime = 0;
var lapcounter = 0;
var currenttime;
var lapdate = '';
function timecounter(starttime)
{
currentdate = new Date();
stopwatch = document.getElementById('stopwatch');
var timediff = currentdate.getTime() - starttime;
if(runningstate == 0)
{
timediff = timediff + stoptime
}
if(runningstate == 1)
{
stopwatch.value = formattedtime(timediff);
refresh = setTimeout('timecounter(' + starttime + ');',10);
}
else
{
window.clearTimeout(refresh);
stoptime = timediff;
}
}
function marklapH()
{
if(runningstate == 1)
{
if(lapdate != '')
{
var lapold = lapdate.split(':');
var lapnow = stopwatch.value.split(':');
var lapcount = new Array();
var x = 0
for(x; x < lapold.length; x++)
{
lapcount[x] = new Array();
lapcount[x][0] = lapold[x]*1;
lapcount[x][1] = lapnow[x]*1;
}
if(lapcount[1][1] < lapcount[1][0])
{
lapcount[1][1] += 60;
lapcount[0][1] -= 1;
}
if(lapcount[2][1] < lapcount[2][0])
{
lapcount[2][1] += 10;
lapcount[1][1] -= 1;
}
}
lapdate = stopwatch.value;
Hlapdetails.value += (++lapcounter) + '. ' + stopwatch.value + '\n';
}
}
function startandstop()
{
var startandstop = document.getElementById('startandstopbutton');
var startdate = new Date();
var starttime = startdate.getTime();
if(runningstate==0)
{
startandstop.value = 'Stop';
runningstate = 1;
timecounter(starttime);
}
else
{
startandstop.value = 'Start';
runningstate = 0;
lapdate = '';
}
}
function resetstopwatch()
{
lapcounter = 0;
stoptime = 0;
lapdate = '';
window.clearTimeout(refresh);
if(runningstate == 1)
{
var resetdate = new Date();
var resettime = resetdate.getTime();
timecounter(resettime);
}
else
{
stopwatch.value = "0:0:0";
}
}
function formattedtime(unformattedtime)
{
var decisec = Math.floor(unformattedtime/100) + '';
var second = Math.floor(unformattedtime/1000);
var minute = Math.floor(unformattedtime/60000);
decisec = decisec.charAt(decisec.length - 1);
second = second - 60 * minute + '';
return minute + ':' + second + ':' + decisec;
}
</script>

Try this code,
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="show"></div>
<input type="button" id="start" value="start" onclick="countup()" />
<input type="button" id="pause" value="pause" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<script type="text/javascript">
var h = 0;
var m = 0;
var s = 0;
var ml = 0;
document.getElementById("show").innerHTML = "0:0:0:0";
function countup() {
ml++;
if (ml > 99 ) {
s++;
ml = 0;
}
if (s >59) {
s = 0;
m++;
}
if (m >59) {
m = 0;
h++;
}
var t = h + ":" + m + ":" + s + ":" + ml;
document.getElementById("show").innerHTML = t;
}
var timer;
$("#pause").click(function () {
clearInterval(timer);
});
$("#start").click(function () {
timer = setInterval(countup, 10)
});
</script>
</body>
</html>