Timer control in javascript

Question

I am using timer in my project , I am having two problems in it. When start button is press time should start & when end button is press time should end.
But 1)when end button is clicked
time is not stopping .
2)when time decrease & reach 1 minute..time is stopped ..it should reduse in seconds also

var tim;
var min = 10;
var sec = 10;
var f = new Date();

function f1() {
    f2();
    document.getElementById("starttime").innerHTML = "Your started your Exam at " + f.getHours() + ":" + f.getMinutes();


}

function f2() {
    if (parseInt(sec) > 0) {
        sec = parseInt(sec) - 1;
        document.getElementById("showtime").innerHTML = "Your Left Time  is :" + min + " Minutes ," + sec + " Seconds";
        tim = setTimeout("f2()", 1000);
    } else {
        if (parseInt(sec) == 0) {
            min = parseInt(min) - 1;
            if (parseInt(min) == 0) {
                clearTimeout(tim);
                location.href = ".././Home/Login";
            } else {
                sec = 60;
                document.getElementById("showtime").innerHTML = "Your Left Time  is :" + min + " Minutes ," + sec + " Seconds";
                tim = setTimeout("f2()", 1000);


            }
        }

    }
}

can you post your event binding code as well ?

Willem D'Haeseleer
– Willem D'Haeseleer

2013-07-05 07:04:22 +00:00
Commented Jul 5, 2013 at 7:04 — Willem D'Haeseleer
– Willem D'Haeseleer, Commented Jul 5, 2013 at 7:04

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

My suggestion would be this:

Fiddle

var tim;
var sec;
var f = new Date();

function f1() {
    sec = 10 * 60;
    f2();
    document.getElementById("starttime").innerHTML = "Your started your Exam at " + f.getHours() + ":" + f.getMinutes();
}

function f2() {
    if (sec > 0) {
        sec--;
        tim = setTimeout(f2, 1000);
    } else {
        document.getElementById("starttime").innerHTML = "times up!!!!";
    }
    
    var min = Math.floor(sec / 60);
    var secDisplay = sec % 60;
    
    document.getElementById("showtime").innerHTML = "Your Left Time  is : " + min + " Minutes," + secDisplay + " Seconds";
}

function end() {
    clearTimeout(tim);
    sec = 0;
    f2();
}

Changes are:

Removed the min variable and only use the total seconds instead of two variables. We can easily calculate the minutes based on the total seconds, for the display purposes. Using the seconds variable makes it much easier to check the time remaining. As you can see the code is simplified a lot.
Changed the setTimeout to take the function as an argument, not a string.
Added end() function, to be called when the end button is clicked.
Moved the seconds count to inside f1() so that it can be started and ended repeatedly without reloading the page.
Removed unnecessary parseInt() calls. The sec variable is already of numerical type so no need to convert it.

The timer will stop when the seconds reduce to 0. If you want it to stop when the time remaining reaches one minute, just change the condition in f2() to if (sec > 60) {

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jul 5, 2013 at 7:15

MrCode

64.6k10 gold badges95 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Gopalakrishnan Udaya Over a year ago

thank u...in start button onclick="f1()" time count start....then in end button i have to stop timer....plz help

MrCode Over a year ago

Updated answer to include the ability to end when the end button is pressed.

Gopalakrishnan Udaya Over a year ago

thank u sir...it working good....when time over it navigate to another page ...in browser back button(go back to one page)is pressed it navigate back it should be stopped ...plz help me

MrCode Over a year ago

Just change the times up!!!! part to do a window.location = 'newpage.html, just like you had originally. I only changed that for the purpose of testing it on jsfiddle.net

JohanSellberg · Accepted Answer · 2013-07-05 07:35:43Z

1

For your first question about the end button i cannot see any end button functionality. but you could have a stop function that clears the timeout.

function f3() {
    clearTimeout(tim);
    //update any text you wish here or move to the next page..
}

For your second question why it ends at 1 minute. You are decreasing the minute value before you check if it is zero. So when you come to f2, sec is 0 and min is 1 you then decrease min to 0.. And then check if it is zero and end the execution. To solve that move your "min = parseInt(min) - 1;" to after the else and it should count the last minute too.

PS. you don't need parseint since you are using numbers allready

edited Jul 5, 2013 at 7:35

answered Jul 5, 2013 at 7:24

JohanSellberg

2,5881 gold badge21 silver badges28 bronze badges

1 Comment

Gopalakrishnan Udaya Over a year ago

thank u sir....when time over it navigate to another page ...in browser back button(go back to one page)is pressed it navigate back it should be stopped ...plz help me

Collectives™ on Stack Overflow

Timer control in javascript

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related