Countdown Timer is not showing in javascript

Question

I am new in javascript, I want to create a countdown timer with localStorage which starts from given time and end to 00:00:00, but it's not working, When I am running my code it is showing value "1506".

Here is my code

<script type="text/javascript">
            if (localStorage.getItem("counter")) {
                var CurrentTime = localStorage.getItem("counter");
            }
            else {
                var Hour = 3;
                var Minute = 25;
                var Second = 60;
                var CurrentTime = Hour.toString() + ":" + Minute.toString() + ":" + Second.toString();
            }


            function CountDown() {                                
                document.getElementById('lblDuration').innerHTML = CurrentTime;
                Second--;
                if (Second == -1) {
                    Second = 59;
                    Minute--;
                }
                if (Minute == -1) {
                    Minute = 59;
                    Hour--;
                }
                localStorage.setItem("counter", CurrentTime);
            }

            var interval = setInterval(function () { CountDown(); }, 1000);

    </script>

You never modify CurrentTime in your function CountDown(). — Gerald Schneider
– Gerald Schneider, Commented Jul 2, 2015 at 7:20
Hi @Gerald Schneider Thanks for your comment, I didn't understand, please can you explain ? — Shaiwal Tripathi
– Shaiwal Tripathi, Commented Jul 2, 2015 at 7:28

ozil · Accepted Answer · 2015-07-02 07:31:19Z

2

you need to declare variables Hour, Minute, Second, CurrentTime out side if else block. In this case they are not in function CountDown() scope.
you are not setting CurrentTime = Hour.toString() + ":" + Minute.toString() + ":" + Second.toString(); after localStorage.setItem("counter", CurrentTime);

var Hour = 3;
var Minute = 25;
var Second = 60;
var CurrentTime = Hour.toString() + ":" + Minute.toString() + ":" + Second.toString();


function CountDown() {
    document.getElementById('lblDuration').innerHTML = CurrentTime;
    Second--;
    if (Second == -1) {
        Second = 59;
        Minute--;
    }
    if (Minute == -1) {
        Minute = 59;
        Hour--;
    }
    CurrentTime = Hour.toString() + ":" + Minute.toString() + ":" + Second.toString();
}

setInterval(function () {
    CountDown();
}, 1000);

<div id="lblDuration"></div>

answered Jul 2, 2015 at 7:31

ozil

7,1639 gold badges38 silver badges62 bronze badges

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

1 Comment

Shaiwal Tripathi Over a year ago

Hi @ozil Thanks for your valuable comment, Your code is working fine but you removed the localStorage, which I want to put it to prevent my countdown timer on page refresh,

borja gómez · Accepted Answer · 2015-07-02 08:02:42Z

1

When localStorage is available you don set the values for Hour, Minute and Second. So when the countdown function executed it finds Second to be undefined and the statement Second-- converts Second to NaN. To fix it just initialize the Hour, Minute and Second Variable. I 've refactored your code a little bit hope it helps:

function CountDown() { 
    var currentTime =  getCurrentTime();                           
    printCurrentTime(currentTime)
    currentTime.second--;
    if (currentTime.second == -1) {
        currentTime.second = 59;
        currentTime.minute--;
    }
    if (currentTime.minute == -1) {
        currentTime.minute = 59;
        currentTime.hour--;
    }
    setCurrentTime(currentTime);
}

  function setCurrentTime(newCurrentTime){
    if(localStorage) localStorage.setItem("counter", JSON.stringify(newCurrentTime));
    else setCurrentTime.storage = newCurrentTime;
  }
  function getCurrentTime(){
    var result = localStorage ? localStorage.getItem("counter") : setCurrentTime.storage;
    result = result || {hour:3, minute:25, second:60};
    if (typeof(result) === "string")result = JSON.parse(result);
    result.toString = function(){
        return result.hour +  ":" + result.minute + ":" + result.second;
    }
    return result;
  }
  function printCurrentTime(currentime){
        var domTag = document.getElementById('lblDuration');
        if(domTag) domTag.innerHTML = currentime.toString();
        else console.log(currentime);
  }
setInterval(function () { CountDown(); }, 1000);

answered Jul 2, 2015 at 8:02

borja gómez

1,0498 silver badges21 bronze badges

6 Comments

Shaiwal Tripathi Over a year ago

Thanks @borja gomez I run your code but it's showing output "1506"

borja gómez Over a year ago

That's strange I've run it on firefox IE and chrome without a problem. Where are you trying to run it?

Shaiwal Tripathi Over a year ago

I run it in chrome, but when you discussed about different browse, it worked successfully, but it is not stopping event after I close the browser ? I want when I run the code again it should start again from it's default values Please help

borja gómez Over a year ago

I've left a fiddle here. The only explanation I can find is that you have not cleaned the local storage before run it clean the local storage with localStorage.removeItem('counter')

borja gómez Over a year ago

It's stopping, but the problem is that it's keeping the values in the local storage so when you open again the window it starts where it left. If you want to start again don't use the local storage here you'll find the same code without using local storage

|

Collectives™ on Stack Overflow

Countdown Timer is not showing in javascript

2 Answers 2

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related