HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>5 seconds!</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="container">
<div id="target">5.000</div>
<div id="result" class="standby">0.000</div>
<div class="buttons">
<div id="start">Start</div>
<div id="stop">Stop</div>
<script src="js/main.js"></script>
</body>
</html>
CSS
.container {
font-family: 'Courier New' , sans-serif;
width: 300px;
margin: 30px auto 0;
text-align: center;
font-weight: bold;
}
#target, #result {
font-size: 32px;
margin-bottom: 15px;
background: #ccc;
height: 60px;
line-height: 60px;
}
#result.standby {
opacity: 0.5;
}
#result.perfect {
background: #FA5858;
color: #fff;
}
#start {
float: left;
}
#stop {
float: right;
}
#start, #stop {
cursor: pointer;
font-size: 18px;
width: 145px;
background: #eee;
height: 40px;
line-height: 40px;
box-shadow: 6px 6px 5px #ccc;
}
#start.pushed, #stop.pushed {
margin-top: 3px;
box-shadow: 3px 3px 5px #ccc;
}
JavaScript
(function() {
'use strict';
var start = document.getElementById('start');
var stop = document.getElementById('stop');
var result = document.getElementById('result');
var startTime;
var isStarted = false;
start.addEventListener('click', function() {
if (isStarted === true) {
return;
}
isStarted = true;
startTime = Date.now();
this.className = 'pushed';
stop.className = '';
result.textContent = '0.000';
result.className = 'standby';
});
stop.addEventListener('click', function() {
var elapsedTime;
var diff;
if (isStarted === false) {
return;
}
isStarted = false;
elapsedTime = (Date.now() - startTime) / 1000;
result.textContent = elapsedTime.toFixed(3);
this.className = 'pushed';
start.className = '';
result.className = '';
diff = elapsedTime - 5.0;
if (Math.abs(diff) < 1.0) {
result.className = 'perfect';
}
});
})();
コメント