Home>
<! DOCTYPE html><html><head><meta charset = "utf-8"><title>Stopwatch</title><link rel = "stylesheet" href = "styles.css"></head><body> 00: 00.000 <button>Start</button><button>Stop</button><button>Reset</button><select name = "mintus" id = "mintus"><option value = "time_1">30</option><option value = "time_2">60</option><option value = "time_3">90</option></select><button>TimeWay</button>     <button>Calculation</button>     
<script src = "main.js"></script></body></html>
'use strict';
{

  const timer = document.getElementById ('timer');
  const start = document.getElementById ('start');
  const stop = document.getElementById ('stop');
  const reset = document.getElementById ('reset');
  const mintus = document.getElementById ('mintus');
  const math = document.getElementById ('sum');
  const sum_account = document.getElementById ('sum_account');
  const timeway = document.getElementById ('timeway');
  const sum_way = document.getElementById ('sum_way');
  let startTime;
  let timeoutId;
  let elapsedTime = 0;

  function countUp () {
    const d = new Date (Date.now () --startTime + elapsedTime);
    const m = String (d.getMinutes ()). padStart (2, '0');
    const s = String (d.getSeconds ()). padStart (2, '0');const ms = String (d.getMilliseconds ()). padStart (3, '0');
    timer.textContent = `${m}: ${s}. ${ms}`;
    timeoutId = setTimeout (() =>{
      countUp ();
    },

 Ten);
  }
  function setButtonStateInitial () {
    start.disabled = false;
    stop.disabled = true;
    reset.disabled = true;
  }
  function setButtonStateRunning () {
    start.disabled = true;
    stop.disabled = false;
    reset.disabled = true;
  }
  function setButtonStateStopped () {
    start.disabled = false;
    stop.disabled = true;
    reset.disabled = false;
  }
  // Calculation of remaining time
  function calculateRemaining () {
    let timeTxt = timer.textContent.replace (":", ""). replace (".", "");
    const timeresult = mintus.value;
    switch (timeresult) {
      case'time_1':
        const result1 = String (3000000 --timeTxt);
        reguler (result1);
         break;
      case'time_2':
        const result2 = String (6000000 --timeTxt);
        reguler (result2);
        break;
      case'time_3':
        const result3 = String (9000000 --timeTxt);
        reguler (result3);
        break;
      }
  }
    //Regular expressions
    function reguler (regular) {
        const regulation =/(\ d {2}) (\ d {2}) (\ d {3}) /;
        const timemath = regular.replace (regulation,'$1 minute $2 seconds $3');
        sum_account.innerHTML = timemath;}
Part being implemented
-------------
    // Time display of progress
    function way () {
        var timeoutway = [];
        let timeTxt = timer.textContent.replace (":", ""). replace (".", "");
        const regulation2 =/(\ d {2}) (\ d {2}) (\ d {3}) /;
        const timemath2 = timeTxt.replace (regulation2,'$1 minute $2 seconds $3');
          timeoutway.push (timemath2)
          console.log (timeoutway);
          sum_way.innerHTML = timeoutway [0-4];
    }
  ――――――――――――――――――――――
  setButtonStateInitial ();
  start.addEventListener ('click', () =>{
    setButtonStateRunning ();
    startTime = Date.now ();
    countUp ();
  });
  stop.addEventListener ('click', () =>{
    setButtonStateStopped ();
    clearTimeout (timeoutId);
    elapsedTime + = Date.now () --startTime;
  });
  reset.addEventListener ('click', () =>{
    setButtonStateInitial ();
    timer.textContent = '00: 00.000';
    elapsedTime = 0;
  });

  math.addEventListener ('click', () =>{
    stop.click ();
    calculateRemaining ();
  });
  timeway.addEventListener ('click', () =>{
    way ();
  });
}

If i press the button as the function I want to do, I want to display the progress time without stopping the stop watch and do it multiple times.

I could display it only once, but I couldn't find it even if I searched for a method to do it multiple times, so it would be helpful if you could tell me.

The part that is worried as the current function
1 When you press the TimeWay button of html, the timeTxt value is displayed in time, and you could put that value in the array once, but when you press the TimeWay button again, I want to repeat the same process about 10 times.
2 Display the values ​​in the array on id = "sum_way" each time you press the button

I don't know the current situation of these two, so it would be very helpful if you just taught me.
Sorry for the poor explanation. Thank you.

  • Answer # 1

    See my answer to the previous question

    Doesn't it mean that the stopwatch doesn't stop even after the calculation?
    Just comment out stop.click () in math.addEventListener

Related articles