带有 dom 存储的 Javascript 倒计时器

Question

有人可以帮我理解这段代码出了什么问题吗？我花了几天的时间试图让它工作，因为我需要一个 javascript/dom 计时器而不是 jquery

HTML

<input name="button" type="button" onClick="displaytimer()" value="Play!">
<form name="counter">
    You have 
    <input type="text" size="8" name="d2"> 
    seconds left to escape!
</form>

Javascript

if (localStorage) {
    var milisec = 0;
    var seconds = localStorage.seconds || 30;
    document.counter.d2.value = seconds;

    function displaytimer() {
        if (milisec <= 0) {
            milisec = 9;
            seconds -= 1;
        }

        if (seconds <= -1) {
            milisec = 0;
            seconds += 1;
        }

        else milisec -= 1;

        localStorage.seconds = seconds;
        document.counter.d2.value = seconds + "." + milisec;

        if (seconds > 0 || (seconds = 0 && milisec > 0)) {
            setTimeout(displaytimer(), 100);
        }

        if (seconds <=0) {
            window.location="./pages/fail.html";
            cleartimer();
        }

        function cleartimer() {
            localStorage.seconds = seconds;
            document.counter.d2.value =0;
        }

        window.location="./pages/2.html";
    }
}
else {
    document.write("dom storage not supported");
}

Answer 1

试试这个代码。它被修改以避免在另一个函数内进行某些函数声明。此外，为了简单起见，还使用了setInterval()。请注意，onClick() 现在会触发 starttimer()。

HTML:

<input name="button" type="button" onClick="starttimer()" value="Play!">
<form name="counter">
    You have 
    <input type="text" size="8" name="d2"> 
    seconds left to escape!
</form>

JS:

if (localStorage) {
    var milisec = 0;
    var seconds = localStorage.seconds || 30;
    document.counter.d2.value = seconds;
    var timer;

    function starttimer() {
        clearInterval(timer);
        timer = setInterval(displaytimer, 100);
    }

    function cleartimer() {
        localStorage.seconds = seconds;
        document.counter.d2.value = 0;
        clearInterval(timer);
    }

    function displaytimer() {
        if (milisec <= 0) {
            milisec = 9;
            seconds -= 1;
        }
        if (seconds <= -1) {
            milisec = 0;
        } else {
            milisec -= 1;
        }
        localStorage.seconds = seconds;
        document.counter.d2.value = seconds + "." + milisec;
        if (seconds < 0) { //countdown ended here
            //window.location="./pages/fail.html"; //put this forward in its appropriate place according to what you want to do
            cleartimer();
        }
        //window.location="./pages/2.html"; //put this forward in its appropriate place according to what you want to do
    }
}
else {
    document.write("dom storage not supported");
}

<小时/>

我已经在这个plunkr中进行了测试，它工作正常。 http://plnkr.co/edit/acAxRZAHsFVtJoQZ1Ov6