Javascript 暂停并恢复localstorage中的计数值

我正在使用此代码作为测验的倒计时计时器。工作正常。在这里，我需要添加两个按钮，一个是暂停按钮，另一个是恢复按钮。当我单击暂停按钮时，它是停止时间；当我单击恢复按钮时，它是从我暂停时间的位置开始的

我试过这个代码。它不起作用了

HTML代码

<div class="div__time">
    <div style="display: none;" id="overall_time"></div>
    <div id="overall_times"></div>
    <div class="total_time"></div>
</div>
<input id="pauseButton" type="button" value="Pause">
<input id="resumeButton" type="button" value="Resume">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script>
    var speaking_ms = "00:00:10";
    var speaking_ms_arr = speaking_ms.split(":");
    var speaking_time_min_sec = (+speaking_ms_arr[0]) * 60 * 60 + (+speaking_ms_arr[1]) * 60 + (+speaking_ms_arr[2]);
    var speaking_time_min_sec = parseInt(speaking_time_min_sec) + 1;

    var speaking_value;

    if (localStorage.getItem("speaking_counter")) {
        if (localStorage.getItem("speaking_counter") <= 0) {
            speaking_value = speaking_time_min_sec;
        } else {
            speaking_value = localStorage.getItem("speaking_counter");
        }
    } else {
        speaking_value = speaking_time_min_sec;
    }

    document.getElementById('overall_time').innerHTML = speaking_value;

    var speaking_counter = function() {
        if (speaking_value <= 0) {
            localStorage.setItem("speaking_counter", speaking_time_min_sec);
        } else {
            speaking_value = parseInt(speaking_value) - 1;
            localStorage.setItem("speaking_counter", speaking_value);
        }
        document.getElementById('overall_time').innerHTML = speaking_value;
        if (speaking_value == 0) {
            localStorage.setItem("speaking_counter", speaking_value);
            setTimeout(function() {
                clearInterval(interval);
            }, 1000);
        }

        var hours = Math.floor(speaking_value / 3600);
        var minutes = Math.floor(speaking_value % 3600 / 60);
        var seconds = Math.floor(speaking_value % 3600 % 60);
        var red_time = hours + ' : ' + minutes + ' : ' + seconds;
        document.getElementById('overall_times').innerHTML = red_time;
    };

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

    var Clock = {
        pause: function() {
                clearInterval(this.interval);
                delete this.interval;
            },

            resume: function() {
                if (!this.interval) this.start();
            }
    };

    $('#pauseButton').click(function() { Clock.pause(); });
    $('#resumeButton').click(function() { Clock.resume(); });
</script>

JS代码

<div class="div__time">
    <div style="display: none;" id="overall_time"></div>
    <div id="overall_times"></div>
    <div class="total_time"></div>
</div>
<input id="pauseButton" type="button" value="Pause">
<input id="resumeButton" type="button" value="Resume">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script>
    var speaking_ms = "00:00:10";
    var speaking_ms_arr = speaking_ms.split(":");
    var speaking_time_min_sec = (+speaking_ms_arr[0]) * 60 * 60 + (+speaking_ms_arr[1]) * 60 + (+speaking_ms_arr[2]);
    var speaking_time_min_sec = parseInt(speaking_time_min_sec) + 1;

    var speaking_value;

    if (localStorage.getItem("speaking_counter")) {
        if (localStorage.getItem("speaking_counter") <= 0) {
            speaking_value = speaking_time_min_sec;
        } else {
            speaking_value = localStorage.getItem("speaking_counter");
        }
    } else {
        speaking_value = speaking_time_min_sec;
    }

    document.getElementById('overall_time').innerHTML = speaking_value;

    var speaking_counter = function() {
        if (speaking_value <= 0) {
            localStorage.setItem("speaking_counter", speaking_time_min_sec);
        } else {
            speaking_value = parseInt(speaking_value) - 1;
            localStorage.setItem("speaking_counter", speaking_value);
        }
        document.getElementById('overall_time').innerHTML = speaking_value;
        if (speaking_value == 0) {
            localStorage.setItem("speaking_counter", speaking_value);
            setTimeout(function() {
                clearInterval(interval);
            }, 1000);
        }

        var hours = Math.floor(speaking_value / 3600);
        var minutes = Math.floor(speaking_value % 3600 / 60);
        var seconds = Math.floor(speaking_value % 3600 % 60);
        var red_time = hours + ' : ' + minutes + ' : ' + seconds;
        document.getElementById('overall_times').innerHTML = red_time;
    };

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

    var Clock = {
        pause: function() {
                clearInterval(this.interval);
                delete this.interval;
            },

            resume: function() {
                if (!this.interval) this.start();
            }
    };

    $('#pauseButton').click(function() { Clock.pause(); });
    $('#resumeButton').click(function() { Clock.resume(); });
</script>

var speaking_ms=“00:00:10”；
var speaking_ms_arr=speaking_ms.split（“：”）；
var speaking_time_min_sec=（+speaking_ms_arr[0]）*60*60+（+speaking_ms_arr[1]）*60+（+speaking_ms_arr[2]）；
var speaking_time_min_sec=parseInt（speaking_time_min_sec）+1；
var-u值；
if（localStorage.getItem（“语音计数器”））{
如果（localStorage.getItem（“speaking_counter”）我更改了fiddle中代码的结尾，它就工作了：

在您的版本中，this.internal是未定义的。您可能想了解js中的“this”和scopes。而$（…）是一种需要lib jquery（不包括在fiddle中）的语法，普通的js等价物是“document.querySelector”，您应该阅读关于此函数的MDN文章。
最后，您的语法有点老派。如果您使用的是localStorage，而不是针对非常旧的浏览器，那么您可能应该避免使用jquery，并使用诸如“const”之类的关键字。
我在fiddle中更改了代码的结尾，它起到了作用：

在您的版本中，this.internal是未定义的。您可能想了解js中的“this”和scopes。而$（…）是一种需要lib jquery（不包括在fiddle中）的语法，普通的js等价物是“document.querySelector”，您应该阅读关于此函数的MDN文章。
最后，您的语法有点过时。如果您使用的是localStorage，而不是针对非常旧的浏览器，那么您可能应该避免使用jquery，并使用诸如“const”之类的关键字。
以下是您的错误。（）

请看下面的代码

var speaking_ms = "00:00:10";
var speaking_ms_arr = speaking_ms.split(":");
var speaking_time_min_sec = (+speaking_ms_arr[0]) * 60 * 60 + (+speaking_ms_arr[1]) * 60 + (+speaking_ms_arr[2]);
var speaking_time_min_sec = parseInt(speaking_time_min_sec) + 1;

var speaking_value;

if (localStorage.getItem("speaking_counter")) {
    if (localStorage.getItem("speaking_counter") <= 0) {
        speaking_value = speaking_time_min_sec;
    } else {
        speaking_value = localStorage.getItem("speaking_counter");
    }
} else {
    speaking_value = speaking_time_min_sec;
}

document.getElementById('overall_time').innerHTML = speaking_value;

var speaking_counter = function() {
    if (speaking_value <= 0) {
        localStorage.setItem("speaking_counter", speaking_time_min_sec);
    } else {
        speaking_value = parseInt(speaking_value) - 1;
        localStorage.setItem("speaking_counter", speaking_value);
    }
    document.getElementById('overall_time').innerHTML = speaking_value;
    if (speaking_value == 0) {
        localStorage.setItem("speaking_counter", speaking_value);
        setTimeout(function() {
            clearInterval(interval);
        }, 1000);
    }

    var hours = Math.floor(speaking_value / 3600);
    var minutes = Math.floor(speaking_value % 3600 / 60);
    var seconds = Math.floor(speaking_value % 3600 % 60);
    var red_time = hours + ' : ' + minutes + ' : ' + seconds;
    document.getElementById('overall_times').innerHTML = red_time;
};

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

var Clock = {
    pause: function() {
            clearInterval(interval);
            delete interval;
        },

        resume: function() {
            if (typeof interval === 'undefined') start();
        }
};

$('#pauseButton').click(function() { Clock.pause(); });
$('#resumeButton').click(function() { Clock.resume(); });
start();

var speaking_ms=“00:00:10”；
var speaking_ms_arr=speaking_ms.split（“：”）；
var speaking_time_min_sec=（+speaking_ms_arr[0]）*60*60+（+speaking_ms_arr[1]）*60+（+speaking_ms_arr[2]）；
var speaking_time_min_sec=parseInt（speaking_time_min_sec）+1；
var-u值；
if（localStorage.getItem（“语音计数器”））{
if（localStorage.getItem（“口语计数器”）以下是您的错误。（）

请看下面的代码

var speaking_ms = "00:00:10";
var speaking_ms_arr = speaking_ms.split(":");
var speaking_time_min_sec = (+speaking_ms_arr[0]) * 60 * 60 + (+speaking_ms_arr[1]) * 60 + (+speaking_ms_arr[2]);
var speaking_time_min_sec = parseInt(speaking_time_min_sec) + 1;

var speaking_value;

if (localStorage.getItem("speaking_counter")) {
    if (localStorage.getItem("speaking_counter") <= 0) {
        speaking_value = speaking_time_min_sec;
    } else {
        speaking_value = localStorage.getItem("speaking_counter");
    }
} else {
    speaking_value = speaking_time_min_sec;
}

document.getElementById('overall_time').innerHTML = speaking_value;

var speaking_counter = function() {
    if (speaking_value <= 0) {
        localStorage.setItem("speaking_counter", speaking_time_min_sec);
    } else {
        speaking_value = parseInt(speaking_value) - 1;
        localStorage.setItem("speaking_counter", speaking_value);
    }
    document.getElementById('overall_time').innerHTML = speaking_value;
    if (speaking_value == 0) {
        localStorage.setItem("speaking_counter", speaking_value);
        setTimeout(function() {
            clearInterval(interval);
        }, 1000);
    }

    var hours = Math.floor(speaking_value / 3600);
    var minutes = Math.floor(speaking_value % 3600 / 60);
    var seconds = Math.floor(speaking_value % 3600 % 60);
    var red_time = hours + ' : ' + minutes + ' : ' + seconds;
    document.getElementById('overall_times').innerHTML = red_time;
};

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

var Clock = {
    pause: function() {
            clearInterval(interval);
            delete interval;
        },

        resume: function() {
            if (typeof interval === 'undefined') start();
        }
};

$('#pauseButton').click(function() { Clock.pause(); });
$('#resumeButton').click(function() { Clock.resume(); });
start();

var speaking_ms=“00:00:10”；
var speaking_ms_arr=speaking_ms.split（“：”）；
var speaking_time_min_sec=（+speaking_ms_arr[0]）*60*60+（+speaking_ms_arr[1]）*60+（+speaking_ms_arr[2]）；
var speaking_time_min_sec=parseInt（speaking_time_min_sec）+1；
var-u值；
if（localStorage.getItem（“语音计数器”））{
if（localStorage.getItem（“speaking_counter”）我已经修复了您的解决方案，并实现了您试图实现的内容。您的解决方案存在一些小问题，我已经修复了。
1.您使用它访问的间隔变量不属于您访问该变量的时钟对象的一部分。
2.您在clock对象的resume函数中使用了这个.start（）函数，它不是clock对象的一部分。
3.用于定义事件的JQuery未包含在FIDLE中。尽管它包含在问题中粘贴的代码中。
html:



js:

var speaking_ms=“00:00:10”；
var speaking_ms_arr=speaking_ms.split（“：”）；
var speaking_time_min_sec=（+speaking_ms_arr[0]）*60*60+（+speaking_ms_arr[1]）*60+（+speaking_ms_arr[2]）；
var speaking_time_min_sec=parseInt（speaking_time_min_sec）+1；
var-u值；
if（localStorage.getItem（“语音计数器”））{
if（localStorage.getItem（“speaking_counter”）我已经修复了您的解决方案，并实现了您试图实现的内容。您的解决方案存在一些小问题，我已经修复了。
1.您使用它访问的间隔变量不属于您访问该变量的时钟对象的一部分。
2.您在clock对象的resume函数中使用了这个.start（）函数，它不是clock对象的一部分。
3.用于定义事件的JQuery未包含在FIDLE中。尽管它包含在问题中粘贴的代码中。
html:



js:

var speaking_ms=“00:00:10”；
var speaking_ms_arr=speaking_ms.split（“：”）；
var speaking_time_min_sec=（+speaking_ms_arr[0]）*60*60+（+speaking_ms_arr[1]）*60+（+speaking_ms_arr[2]）；
var speaking_time_min_sec=parseInt（speaking_time_min_sec）+1；
var-u值；
if（localStorage.getItem（“语音计数器”））{
if（localStorage.getItem（“语音计数器”）
到目前为止，你已经得到了相当多的答案，我想给你另外一个例子，让你有一个可供选择的体系结构。明确地阅读和使用。而且，你不需要这个函数的jQuery。只有当你需要它时才导入一个像jQuery这样的大库。ll，以及
addEventListener

还有更令人兴奋的方法来处理倒计时（包括使用递归），但下面是一个将时钟设想为单个对象的示例。这使您能够更好地控制时钟，并使其可重用

您可以在时钟上定义管理时间间隔、减少倒计时、暂停、恢复、启动和重置时钟的函数。我为每个时钟添加了按钮，以便您可以看到它的工作方式。还请注意，我注释掉了
localStorage
，以表明它在没有存储的情况下工作，但主要是因为没有给出StackOverflow中的代码段n使用
localStorage
的权限，因此它将崩溃，但您可以按原样在此处运行此代码


var时钟={
表示值：10，
间隔：-1，
倒计时：函数（）{
speaking_value=this.speaki
 var speaking_ms = "00:00:10";
    var speaking_ms_arr = speaking_ms.split(":");
    var speaking_time_min_sec = (+speaking_ms_arr[0]) * 60 * 60 + (+speaking_ms_arr[1]) * 60 + (+speaking_ms_arr[2]);
    var speaking_time_min_sec = parseInt(speaking_time_min_sec) + 1;

    var speaking_value;

    if (localStorage.getItem("speaking_counter")) {
        if (localStorage.getItem("speaking_counter") <= 0) {
            speaking_value = speaking_time_min_sec;
        } else {
            speaking_value = localStorage.getItem("speaking_counter");
        }
    } else {
        speaking_value = speaking_time_min_sec;
    }

    document.getElementById('overall_time').innerHTML = speaking_value;

    var speaking_counter = function() {
        if (speaking_value <= 0) {
            localStorage.setItem("speaking_counter", speaking_time_min_sec);
        } else {
            speaking_value = parseInt(speaking_value) - 1;
            localStorage.setItem("speaking_counter", speaking_value);
        }
        document.getElementById('overall_time').innerHTML = speaking_value;
        if (speaking_value == 0) {
            localStorage.setItem("speaking_counter", speaking_value);
            setTimeout(function() {
                clearInterval(interval);
            }, 1000);
        }

        var hours = Math.floor(speaking_value / 3600);
        var minutes = Math.floor(speaking_value % 3600 / 60);
        var seconds = Math.floor(speaking_value % 3600 % 60);
        var red_time = hours + ' : ' + minutes + ' : ' + seconds;
        document.getElementById('overall_times').innerHTML = red_time;
    };

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


    var Clock = {
        pause: function() {
                clearInterval(interval);
                delete interval;
            },

            resume: function() {

                    interval = setInterval(function() {
                        speaking_counter();
                    }, 1000);

            }
    };

    $('#pauseButton').click(function() { Clock.pause(); });
    $('#resumeButton').click(function() { Clock.resume(); });