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>

Answer 1

1. you need to declare variables Hour, Minute, Second, CurrentTime out side if else block. In this case they are not in function CountDown() scope.
2. 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> 

Answer 2

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