javascript - 无法获取 div 的内容以本地存储并在本地加载

问题描述

我有一个 JS 函数可以在本地保存和加载我制作的记事本的内容。我试图为包含秒表时间的 div 复制它。（见下面的代码）

暂停时的秒表将写入保存该 div 的时间，我希望在刷新/关闭并重新打开页面时保存这些时间。

它适用于我在记事本中的笔记，请有人解释我哪里出错了？

用于保存功能的 JavaScript：

  //Storage of Text-Box
  
  const notesInput = document.querySelector('#notes');
  function remFunc() {
    // store the entered name in web storage
    localStorage.setItem('notes', notes.value);
  }
  
  function loadfunc() {
    
    if(localStorage.getItem('notes')) {
      let notes_var = localStorage.getItem('notes');
      notes.value= notes_var;
    } else {
    }
  }
  
  document.body.onload = loadfunc();


 //Storage of Times DIV
    
    const output = document.querySelector('#output');
    function remfunc2() {  
      localStorage.setItem('output', outContent.innerHTML);
    }
    
    function loadfunc2() {
      if(localStorage.getItem('output')) {
        let output_var = localStorage.getItem('output');
        output.innerHTML = output_var ;
      } else {
        
      }
    }
    
    document.body.onload = loadfunc2();

这是div：

<div id="output" name="output" class="buttonZ logPad"></div>

这是秒表Javascript：

  // Timer JS
  
  var flagclock = 0;
  var flagstop = 0;
  var stoptime = 0;
  var splitcounter = 0;
  var currenttime;
  var splitdate = '';
  var output;
  var clock;
  
  function startstop()
  {
    var startstop = document.getElementById('startstopbutton');
    var startdate = new Date();
    var starttime = startdate.getTime();
    if(flagclock==0)
    {
      startstop.value = 'Stop';
      flagclock = 1;
      counter(starttime);
    }
    else
    {
      startstop.value = 'Start';
      flagclock = 0;
      flagstop = 1;
      splitdate = '';
      logTime();
    }
  }
  
  function counter(starttime)
  {
    output = document.getElementById('output');
    clock = document.getElementById('clock');
    currenttime = new Date();
    var timediff = currenttime.getTime() - starttime;
    if(flagstop == 1)
    {
      timediff = timediff + stoptime
    }
    if(flagclock == 1)
    {
      clock.innerHTML = formattime(timediff,'');
      clock.setAttribute('value', formattime(timediff, ''));
      refresh = setTimeout('counter(' + starttime + ');',10);
    }
    else
    {
      window.clearTimeout(refresh);
      stoptime = timediff;
    }
  }
  
  function formattime(rawtime,roundtype)
  {
    if(roundtype == 'round')
    {
      var ds = Math.round(rawtime/100) + '';
    }
    else
    {
      var ds = Math.floor(rawtime/100) + '';
    }
    var sec = Math.floor(rawtime/1000);
    var min = Math.floor(rawtime/60000);
    ds = ds.charAt(ds.length - 1);
    if(min >= 60)
    {
      startstop();
    }
    sec = sec - 60 * min + '';
    if(sec.charAt(sec.length - 2) != '')
    {
      sec = sec.charAt(sec.length - 2) + sec.charAt(sec.length - 1);
    }
    else
    {
      sec = 0 + sec.charAt(sec.length - 1);
    }
    min = min + '';
    if(min.charAt(min.length - 2) != '')
    {
      min = min.charAt(min.length - 2)+min.charAt(min.length - 1);
    }
    else
    {
      min = 0 + min.charAt(min.length - 1);
    }
    return min + ':' + sec + ':' + ds;
  }
  
  function resetclock()
  {
    flagstop = 0;
    stoptime = 0;
    splitdate = '';
    window.clearTimeout(refresh);
    
    if(flagclock !== 0) {
      startstopbutton.value = 'Start';
      flagclock = 0;
      flagstop = 1;
      splitdate = '';
    }
    
    
    if(flagclock == 1)
    {
      var resetdate = new Date();
      var resettime = resetdate.getTime();
      counter(resettime);
    }
    else
    {
      clock.innerHTML = "00:00:0";
    }
  }
  
  //Split function
  
  function splittime()
  {
    if(flagclock == 1)
    {
      if(splitdate != '')
      {
        var splitold = splitdate.split(':');
        var splitnow = clock.innerHTML.split(':');
        var numbers = new Array();
        var i = 0
        for(i;i<splitold.length;i++)
        {
          numbers[i] = new Array();
          numbers[i][0] = splitold[i]*1;
          numbers[i][1] = splitnow[i]*1;
        }
        if(numbers[1][1] < numbers[1][0])
        {
          numbers[1][1] += 60;
          numbers[0][1] -= 1;
        }
        if(numbers[2][1] < numbers[2][0])
        {
          numbers[2][1] += 10;
          numbers[1][1] -= 1;
        }
      }
      splitdate = clock.innerHTML;
      output.innerHTML += (++splitcounter) + '. ' + clock.innerHTML + '\n';
    }
  }
  function logTime() {
    const time = document.getElementById('clock').getAttribute('value');
    document.getElementById('output').innerHTML += (++splitcounter) + '. ' + time + '<br />'; 
  }
  
  function time() {
    splittime();
    resetclock();            
  }

任何帮助都感激不尽！谢谢你。

标签： javascripthtml

javascript - 无法获取 div 的内容以本地存储并在本地加载

问题描述

解决方案

推荐阅读