tocktimer
Version:
timer object/class. kickass!
141 lines (122 loc) • 4.41 kB
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Tock</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.11.4/chartist.min.css" integrity="sha512-V0+DPzYyLzIiMiWCg3nNdY+NyIiK9bED/T1xNBj08CaIUyK3sXRpB26OUCIzujMevxY9TRJFHQIxTwgzb0jVLg==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.11.4/chartist.min.js" integrity="sha512-9rxMbTkN9JcgG5euudGbdIbhFZ7KGyAuVomdQDI9qXfPply9BJh0iqA7E/moLCatH2JD4xBGHwV6ezBkCpnjRQ==" crossorigin="anonymous"></script>
<script src="tock.js"></script>
<style>
#laptimes {
border: 1px solid #ddd;
padding: 10px;
width: 200px;
}
input {
font-size: 24px;
width: 160px;
}
</style>
<script>
let interval;
window.onload = () => {
const start_time = new Date().getTime();
const interval_time = 1000;
let naive_time = -1000;
let chartLabel = 0;
let naiveTickCount = 0;
let tockTickCount = 0;
const clockDiffEl = document.getElementById('clockDiff');
const tockClockEl = document.getElementById('tockClock');
const tockErrorEl = document.getElementById('tockError');
const tockTickEl = document.getElementById('tockTick');
const naiveClockEl = document.getElementById('naiveClock');
const naiveErrorEl = document.getElementById('naiveError');
const naiveTickEl = document.getElementById('naiveTick');
const chartData = {
labels: [],
series: [[],[]],
};
const chart = new Chartist.Line('.chart', chartData, {
width: 500,
height: 300,
});
const timer = new Tock({
interval: interval_time,
callback: () => {
tockTickEl.value = tockTickCount++;
tockClockEl.value = timer.msToTimecode(timer.lap(), true);
tockErrorEl.value = (new Date().getTime()) - start_time - timer.lap();
chartData.series[0].push(timer.lap());
chart.update();
}
});
timer.start();
interval = window.setInterval(() => {
naiveTickEl.value = naiveTickCount++;
naive_time += interval_time;
naiveClockEl.value = timer.msToTimecode(naive_time, true);
naiveErrorEl.value = (new Date().getTime()) - start_time - naive_time;
chartData.series[1].push(naive_time);
chart.update();
}, interval_time);
document.getElementById('stopButton').addEventListener('click', () => {
window.clearInterval(interval);
timer.stop();
});
window.setInterval(() => {
let current_time = new Date().getTime();
clockDiffEl.value = timer.msToTimecode(current_time - start_time, true);
}, 16)
}
</script>
</head>
<body>
<table>
<tr>
<td></td>
<th>Time</th>
<th>Error</th>
<th>Ticks</th>
</tr>
<tr>
<th>Tock</th>
<td>
<input id="tockClock" readonly>
</td>
<td>
<input id="tockError" readonly>
</td>
<td>
<input id="tockTick" readonly>
</td>
</tr>
<tr>
<th>Naive</th>
<td>
<input id="naiveClock" readonly>
</td>
<td>
<input id="naiveError" readonly>
</td>
<td>
<input id="naiveTick" readonly>
</td>
</tr>
<tr>
<th>Actual</th>
<td>
<input id="clockDiff" readonly>
</td>
<td>
<!-- <input id="clockError" readonly value="0"> -->
</td>
<td></td>
</tr>
</table>
<p>
<button id="stopButton" type="button">Stop</button>
</p>
<div class="chart"></div>
</body>
</html>