01counter-with-time.css

.display{
  margin: 20px 0;
  text-align: center;
}
#disp-count{
  line-height: 52px;
  font-size: 52px;
}
#disp-total{
  line-height: 24px;
  font-size: 24px;
}
#disp-diff{
  line-height: 18px;
  font-size: 18px;
}
.bt{
  display: block;
  cursor: pointer;
  user-select: none;
}
.bt.hide{
  display: none;
}
#bt-reset{
  margin-left: auto;
  border: none;
  background-color: #fff;
  color: #2C9400;
}
#bt-start,#bt-count{
  width: 80%;
  height: 2em;
  margin: 10px auto;
  font-size: 24px;
}
#bt-stop{
  width: 50%;
  height: 2em;
  margin: 50px auto 20px auto;
}
#bt-dl{
  width: 50%;
  height: 2em;
  margin: 10px auto;
}
#output-outer{
  height: 300px;
  overflow: auto;
}
#output{
  padding: 5px;
  margin: 0 auto;
  border-collapse: collapse;
}
.output-td{
  padding: 0 5px;
  border: 1px solid #333;
  text-align: right;
  white-space: nowrap;
}
@media screen and (min-width:769px) {
  #bt-start,#bt-count{
    width: 50%;
  }
  #bt-stop,#bt-dl{
    width: 30%;
  }
}

02counter-with-time.html

<button id="bt-reset" class="bt">リセット</button>
<div id="disp-count" class="display">0</div>
<div id="disp-total" class="display">00:00:00.000</div>
<div id="disp-diff" class="display">00:00:00.000</div>
<div id="bt-main-area">
  <button id="bt-start" class="bt">スタート</button>
  <button id="bt-count" class="bt hide">+1</button>
</div>
<button id="bt-stop" class="bt">STOP</button>
<div id="output-outer">
  <table id="output">
    <tr>
      <td class="output-td">カウント</td>
      <td class="output-td">日時</td>
      <td class="output-td">経過時間(ms)</td>
      <td class="output-td">前回との差(ms)</td>
  </tr></table>
</div>
<button id="bt-dl" class="bt">CSVダウンロード</button>

03counter-with-time.js

const disp_count = document.getElementById('disp-count');
const disp_total = document.getElementById('disp-total');
const disp_diff = document.getElementById('disp-diff');
const bt_start = document.getElementById('bt-start');
const bt_count = document.getElementById('bt-count');
const bt_reset = document.getElementById('bt-reset');
const bt_stop = document.getElementById('bt-stop');
const bt_dl = document.getElementById('bt-dl');
const output = document.getElementById('output');
let count;
let timer;
let date_start;
let time_prev;
let total;
let diff;
let record;
//
bt_start.addEventListener('click',countStart);
bt_count.addEventListener('click',countUp);
bt_stop.addEventListener('click',stop);
bt_reset.addEventListener('click',reset);
bt_dl.addEventListener('click',download);
//
shokika();

function shokika(){
  count = 0;
  date_start = new Date();
  total = 0;
  diff = 0;
  record = [['カウント','日時', '経過時間(ms)', '前回との差(ms)']];
}

function countStart(){
  console.log('countStart');
  date_start = new Date();
  time_prev = date_start.getTime();
  timer = setInterval(()=>{
    const time_now = new Date().getTime();
    total = time_now - date_start.getTime();
    diff = time_now - time_prev;
    disp_total.textContent = hhmmss(total);
    disp_diff.textContent = hhmmss(diff);
  },1);
  record.push([0, fullDate(date_start), 0, 0]);
  bt_start.classList.add('hide');
  bt_count.classList.remove('hide');
  makeTable(output, record);
}

function countUp(){
  console.log('countUp');
  count++;
  const now = new Date();
  record.push([count, fullDate(now), now.getTime() - date_start.getTime(), now.getTime() - time_prev]);
  time_prev = now.getTime();
  disp_count.textContent = count;
  makeTable(output, record);
}

function stop(){
  console.log('stop');
  clearInterval(timer);
  bt_start.classList.add('invisible');
  bt_count.classList.add('invisible');
  bt_stop.classList.add('invisible');
}

function reset(){
  console.log('reset');
  clearInterval(timer);
  shokika();
  bt_start.classList.remove('hide');
  bt_count.classList.add('hide');
  bt_start.classList.remove('invisible');
  bt_count.classList.remove('invisible');
  bt_stop.classList.remove('invisible');
  disp_count.textContent = '0';
  disp_total.textContent = '00:00:00.000';
  disp_diff.textContent = '00:00:00.000';
  makeTable(output, record);
}

function download(){
  console.log('download');
  const file_name = `counter${date_start.getTime()}.csv`;
  const data = record.map(r=>r.join(',')).join('\n');
  const bom = new Uint8Array([0xef, 0xbb, 0xbf]);
  const blob = new Blob([bom, data], {type: "text/csv"});
  const a = document.createElement('a');
  a.download = file_name;
  a.href = window.URL.createObjectURL(blob);
  a.click();
}

function hhmmss(ms){
  const hh = digit(Math.floor(ms/(3600*1000)),2);
  ms = ms % (3600*1000);
  const mm = digit(Math.floor(ms/(60*1000)),2);
  ms = ms % (60*1000);
  const ss = digit(Math.floor(ms/1000),2);
  ms = digit(ms % 1000,3);
  return `${hh}:${mm}:${ss}.${ms}`;
}

function fullDate(date){
  const Y = date.getFullYear();
  const M = digit(date.getMonth()+1,2);
  const D = digit(date.getDate(),2);
  const hh = digit(date.getHours(),2);
  const mm = digit(date.getMinutes(),2);
  const ss = digit(date.getSeconds(),2);
  const sss = digit(date.getMilliseconds(),3);
  const jisa = date.getTimezoneOffset();
  const timezone = (()=>{
    if(jisa==0){
      return 'Z';
    }else{
      const tz_h = digit(Math.floor(Math.abs(jisa)/60),2);
      const tz_m = digit(Math.floor(Math.abs(jisa)%60),2);
      if(jisa<0){
        return `+${tz_h}:${tz_m}`;
      }else{
        return `-${tz_h}:${tz_m}`;
      }
    }
  })();
  return `${Y}-${M}-${D}T${hh}:${mm}:${ss}.${sss}${timezone}`;
}

function digit(n, d){
  return '0'.repeat(d-String(n).length) + n;
}

function makeTable(table, array){
  table.textContent = '';
  array.forEach(ar=>{
    const tr = document.createElement('tr');
    ar.forEach(val=>{
      const td = document.createElement('td');
      td.classList.add('output-td');
      td.textContent = val;
      tr.appendChild(td);
    });
    table.appendChild(tr);
  });
}