Блог

Главная - Вопросы по программированию - Копирование текущего содержимого div в текстовую область

Копирование текущего содержимого div в текстовую область

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я нахожусь в процессе создания инструмента для своего рабочего места. Это только для себя, но в основном для изучения html, CSS и 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 = '';
  }
}

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, '');
    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 == 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';
    console.log("split");
  }
}

function time() {
  splittime();
  resetclock();
}  
 <input id="startstopbutton" class="buttonZ" style="width: 120px;" type="button" name="btn" id='btn' value="Start" onclick="startstop();">
<input id="resetbutton" class="buttonZ" style="width: 120px;" type="button" name="btnRst1" id='btnRst1' value="Reset" onclick="time();" />
<div id="clock" class="timerClock" value="00:00:00">00:00:00</div>
<br>
<textarea id="output" spellcheck="false" readonly></textarea>

Ответ №1:

Создать новую функцию:

 function logTime() {
    const time = document.getElementById('clock').getAttribute('value');
    document.getElementById('output').innerHTML  = 'n'   time; 
}

Добавьте его в область else видимости:

 else {
    startstop.value = 'Start';
    flagclock = 0;
    flagstop = 1;
    splitdate = '';
    logTime(); // New addition
  }

обновите значение элемента, а не только innerHTML:

 if (flagclock == 1) {
    clock.innerHTML = formattime(timediff, '');
    clock.setAttribute('value', formattime(timediff, '')); // New addition
    refresh = setTimeout('counter('   starttime   ');', 10);
  }

Тест:

 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 == 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';
    console.log("split");
  }
}

function time() {
  splittime();
  resetclock();
}

function logTime() {
    const time = document.getElementById('clock').getAttribute('value');
    document.getElementById('output').innerHTML  = 'n'   time; 
}  
 <input id="startstopbutton" class="buttonZ" style="width: 120px;" type="button" name="btn" id='btn' value="Start" onclick="startstop();">
<input id="resetbutton" class="buttonZ" style="width: 120px;" type="button" name="btnRst1" id='btnRst1' value="Reset" onclick="time();" />
<div id="clock" class="timerClock" value="00:00:00">00:00:00</div>
<br>
<textarea id="output" spellcheck="false" rows="4" cols="50" readonly></textarea>

Комментарии:

1. Привет, это здорово — Спасибо за вашу помощь — Я удалил счетчик разделения, поскольку заметил, что он регистрирует время при нажатии кнопки stop, а также reset, и только журналы сброса будут учитываться в счетчике разделения. — Я пытался включить оба, но пока не мог понять, если вы знаете, как это можно сделать, это было бы огромной помощью.