Skip to content

Instantly share code, notes, and snippets.

@yuya

yuya/index.html

Last active November 25, 2019 13:54
Show Gist options
  • Save yuya/fb421523d9dd4583142d67fcfa5e5eec to your computer and use it in GitHub Desktop.
Save yuya/fb421523d9dd4583142d67fcfa5e5eec to your computer and use it in GitHub Desktop.
Download ZIP
JavaScript でタイマー作る練習 (https://codepen.io/yuya-hashimoto/pen/MWWdPwe)
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>timer</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<script src="/js/script.js"></script>
</body>
</html>
Raw
script.js
;((global, document) => {
"use strict";
let timerId;
let startTime;
let latestTime = 0;
function getTimerText(elapsedTime) {
let min = Math.floor(elapsedTime / (1000 * 60));
let sec = Math.floor(elapsedTime % (1000 * 60) / 1000);
let msec = elapsedTime % 1000;
min = String(min).padStart(2, "0");
sec = String(sec).padStart(2, "0");
msec = String(msec).padStart(3, "0");
return `${min}:${sec}:${msec}`;
}
function toggleStopWatch(timerEl) {
const node = event.target;
if (!timerId) {
node.innerText = "stop";
startTime = Date.now();
timerId = setInterval(() => {
const elapsedTime = Date.now() - startTime + latestTime;
const timerText = getTimerText(elapsedTime);
timerEl.innerText = timerText;
}, 10);
}
else {
node.innerText = "start";
latestTime += Date.now() - startTime;
clearInterval(timerId);
timerId = null;
}
}
function initialize() {
const timerEl = document.createElement("p");
const buttonEl = document.createElement("button");
timerEl.appendChild(document.createTextNode("00:00:000"));
buttonEl.appendChild(document.createTextNode("start"));
buttonEl.addEventListener("click", () => {
toggleStopWatch(timerEl);
});
document.body.appendChild(timerEl);
document.body.appendChild(buttonEl);
}
initialize();
})(this, this.document);
Raw
style.css
html {
display: table;
width: 100%;
height: 100%;
}
body {
display: table-cell;
vertical-align: middle;
text-align: center;
font-family: monospace;
}
p {
font-size: 300%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment