与dom存储的Javascript倒计时计时器

时间:2021-12-29 21:27:58

Can someone help me understand where im going wrong with this code ive spend days upon days trying to get this to work as i need a javascript/dom timer rather than jquery

有人可以帮助我了解这个代码我出错的地方我花了几天试图让这个工作,因为我需要一个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");
}

1 个解决方案

#1


Try this code. It was modified to avoid some function declaration inside another function. Also, setInterval() was used for simplicity. Note that onClick() triggers now starttimer().

试试这个代码。它被修改以避免在另一个函数内部进行某些函数声明。此外,为简单起见,使用了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");
}

I've tested in this plunkr and it worked ok. http://plnkr.co/edit/acAxRZAHsFVtJoQZ1Ov6

我已经在这个plunkr中测试过,它运行正常。 http://plnkr.co/edit/acAxRZAHsFVtJoQZ1Ov6

#1


Try this code. It was modified to avoid some function declaration inside another function. Also, setInterval() was used for simplicity. Note that onClick() triggers now starttimer().

试试这个代码。它被修改以避免在另一个函数内部进行某些函数声明。此外,为简单起见,使用了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");
}

I've tested in this plunkr and it worked ok. http://plnkr.co/edit/acAxRZAHsFVtJoQZ1Ov6

我已经在这个plunkr中测试过,它运行正常。 http://plnkr.co/edit/acAxRZAHsFVtJoQZ1Ov6