时间戳

首页 > 解决方案 > 暂停和恢复本地存储中的计数值

javascript - 暂停和恢复本地存储中的计数值

问题描述

我正在将此代码用于测验测试的倒数计时器。它的工作正常。在此我需要添加两个按钮，一个是暂停按钮，另一个是恢复按钮。当我单击暂停按钮时，它是停止时间，当我单击恢复按钮时，它从我暂停时间的地方开始。

我试过这段代码。它不工作。

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">

JS代码

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

小提琴链接

提前致谢。

标签： javascriptjqueryhtmllocal-storage

解决方案

到目前为止，您已经得到了很多答案，我想给您另一个示例，以便您可以考虑另一种架构。一定要阅读scopes和closures使用this. 此外，此功能不需要 jQuery。仅在需要时才导入像 jQuery 这样的大型库。在这种情况下document.getElementById，你和addEventListener.

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

您可以在时钟上定义管理间隔、减少倒计时、暂停、恢复、启动和重置时钟的功能。我为每个按钮添加了按钮，这样你就可以看到它是如何工作的。另请注意，我注释掉localStorage以表明它可以在没有存储的情况下工作，但主要是因为 StackOverflow 中的片段没有被授予使用权限，localStorage因此它会崩溃，但您可以在此处按原样运行此代码。

var Clock = {
  speaking_value: 10,
  interval: -1,
  countdown: function() {
    speaking_value = this.speaking_value;
    if (speaking_value <= 0) {
      //localStorage.setItem("speaking_counter", 0);
    } 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);
      var self = this;
      setTimeout(function() {
        clearInterval(self.interval);
      }, 1000);
    }
    this.speaking_value = speaking_value;
    this.updateClock();
  }, 
  paused: false,
  pause: function() {
    clearInterval(this.interval);
    this.paused = true;
  },
  resume: function() {
    if (this.paused) { 
      this.paused = false;
      this.tick();    
    }
  },
  updateClock: function() {
    speaking_value = this.speaking_value;
    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;
  },
  tick: function() {
    var self = this;
    this.interval = setInterval(function() {
      self.countdown()
    }, 1000)
  },
  start: function() {
    this.updateClock();
    this.tick();
  },
  reset: function(){
    clearInterval(this.interval);
    this.speaking_value = 10;
    this.updateClock();
  }
};

Clock.updateClock();

document.getElementById('startButton').addEventListener('click', function() { Clock.start(); });

document.getElementById('pauseButton').addEventListener('click', function() { Clock.pause(); });

document.getElementById('resumeButton').addEventListener('click', function() { Clock.resume(); });

document.getElementById('resetButton').addEventListener('click', function() { Clock.reset(); });
<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="startButton" type="button" value="Start">
<input id="pauseButton" type="button" value="Pause">
<input id="resumeButton" type="button" value="Resume">
<input id="resetButton" type="button" value="Reset">

推荐阅读