Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
.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%;
}
}
<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>
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);
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment