页面加载后具有恢复功能的秒表

Question

I want to create a stopwatch which has a resume facility like if I have to pause my watch then after page load it will show my last run time and start from my last time when I resume it (it will be in pause condition) Note: It will also in running condition after page load If I did not pause it我想创建一个具有恢复功能的秒表，例如如果我必须暂停我的手表然后在页面加载后它将显示我的上次运行时间并从我恢复时的最后一次开始（它将处于暂停状态）注意：如果我没有暂停它，它也会在页面加载后处于运行状态

I have tried this [stopwatch][1] with some reference so I am able to manage running condition if the watch is not paused but I am not finding any suitable solution for when watch is paused and I reload page I will show my last paused time and resume from here if I resume it again...我已经尝试过这个[stopwatch][1]一些参考，所以如果手表没有暂停，我能够管理运行条件，但我没有找到任何合适的解决方案，当手表暂停时我重新加载页面我将显示我的最后一次暂停如果我再次恢复它，时间和从这里恢复......

My HTML Code here我的 HTML 代码在这里

<!DOCTYPE html>
<html>
<head>
  <title>Vanilla JS Stopwatch - Javascript Stopwatch</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,600,600i">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
  <style>
    #timerContainer {
      font-family: 'Source Sans Pro', sans-serif;
      font-weight: 300;
      width:700px;
      margin:20px auto;
      min-height: 60px;
      border-top:0px;
    }
    .timer, .reset {
      float:left;
      width: 54%;
      padding: 20px 0;
      font-size: 24px;
      text-align:center;
      color: #fff;
      background: #A90000;
      cursor: pointer
    }
    .reset {
      background: #550000;
      color: white;
      width:14.9%;
      border-left: 1px solid #990000;
    }
    .reset:hover {
      background: #CC0000;
    }
    .lighter {
      background: #CC0000
    }
  </style>
</head>
<body>

  <div id="timerContainer">
    <div class="timer" onclick="startTimer()">Start Studying!</div>
    <div class="startTimer reset" onclick="startTimer()" >
      <i class="fas fa-play"></i>
    </div>
    <div class="pauseTimer reset" onclick="pauseTimer()" >
      <i class="fas fa-pause"></i>
    </div>
    <div class="resetTimer reset" onclick="resetTimer()">Reset</div>
  </div>
  <script type="text/javascript" src="stopWatch.js"></script>
</body>
</html>

My JS file stopWatch.js我的 JS 文件stopWatch.js

  var startTimerButton = document.querySelector('.startTimer');
var pauseTimerButton = document.querySelector('.pauseTimer');
var timerDisplay = document.querySelector('.timer');
var start = false;
var pause = false;
var stop = false;



var Clock = {


  totalSeconds: times(),

  start: function () {
    var self = this;
    this.interval = setInterval(function () {
      self.totalSeconds += 1;

       var hours = Math.floor((self.totalSeconds / 3600));
      var minutes = Math.floor((self.totalSeconds / 60 % 60 ));
      var seconds = Math.floor((self.totalSeconds % 60 ));
      hours = (hours < 10) ? "0" + hours : hours;
      minutes = (minutes < 10) ? "0" + minutes : minutes;
      seconds = (seconds < 10) ? "0" + seconds : seconds;
      $(".timer").html(hours + ':' + minutes + ':' + seconds);
    }, 1000);

  },

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

  resume: function () {
    if (!this.interval) this.start();
  },
  reset: function () {
    if (!this.interval && !this.start()) {clearInterval(this.interval); this.reseter();}
  },
  reseter: function(){
   var self = this;
    self.totalSeconds = 0;

      $(".timer").html("00:00:00");


    },
    pauseTracker:function() {
        var self = this;
        var tracker_started = check_cookie_name("tracker_started");
var tracker_paused = check_cookie_name("tracker_paused");

start_time_last =  ( tracker_paused - tracker_started ) / 1000; 

    self.totalSeconds = start_time_last;
 $(".timer").html("00:00:00");

    }
};

//

function startTracker(argument) 
{
    if (start == false) 
    {
        Clock.start();
        if (!check_cookie_name("tracker_started")) {

        document.cookie = "tracker_started="+new Date().getTime()+"; expires=Thu, 18 Dec 2020 12:00:00 UTC; path=/";

        }
        pause = false;
    }
        start = true;
}
function pauseTimer(argument)
{
    if (pause == false) 
    {
        Clock.pause();
        document.cookie = "tracker_paused="+new Date().getTime()+"; expires=Thu, 18 Dec 2020 12:00:00 UTC; path=/";
        start = false;
    }
        pause = true;
        stop = false;
}

function resetTimer(argument) 
{
    if (stop == false && start == false && pause == true) 
    {



                document.cookie = "tracker_started="+new Date().getTime()+"; expires=Thu, 18 Dec 2019 12:00:00 UTC; path=/";
                document.cookie = "achtimerstart="+new Date().getTime()+"; expires=Thu, 18 Dec 2019 12:00:00 UTC; path=/";
                document.cookie = "achtimerid="+new Date().getTime()+"; expires=Thu, 18 Dec 2019 12:00:00 UTC; path=/";
                document.cookie = "achtid="+new Date().getTime()+"; expires=Thu, 18 Dec 2019 12:00:00 UTC; path=/";
                document.cookie = "achpid="+new Date().getTime()+"; expires=Thu, 18 Dec 2019 12:00:00 UTC; path=/";
                Clock.reset();
                start = false;
                pause = false;
                swal({title: "success", text: "Time has been locked successfully!", type: "success"},
               function(){ 
                   location.reload();
               });
            }



        stop = true;
}


function check_cookie_name(name) 
{
  var match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
  if (match) {
    return (match[2]);
  }
  else{
       console.log('--something went wrong---');
  }
}




function startTimer(){

    if (start == false && pause == true) {
            startTracker();
            return false;
        }

    }





function times(){

var tracker_started = check_cookie_name("tracker_started");
if (tracker_started) {
    var current =  new Date().getTime();
    start_time_last =  ( current - tracker_started ) / 1000; 
setTimeout(function(argument) {
          startTracker();
     },500);


    return start_time_last;
}else{
  return 0;
}
}

Answer 1

If you want stuff to be persisted across session reloads you need to store the data somewhere.如果您希望在会话重新加载期间保留内容，则需要将数据存储在某处。 You can try using localStorage for that purpose.为此，您可以尝试使用localStorage 。

页面加载后具有恢复功能的秒表

问题描述

1 个解决方案

解决方案1
0 2020-01-07 05:43:50

页面加载后具有恢复功能的秒表

问题描述

1 个解决方案

解决方案1 0 2020-01-07 05:43:50

解决方案1
0 2020-01-07 05:43:50