10秒当てゲーム(JavaScript)
HTML
<div class="counter">
<div id="terget">10.000</div>
<div id="result" class="standby">0.000</div>
<div class="button">
<div id="start">Start</div>
<div id="stop">Stop</div>
</div>
</div>
<ul style="clear: both; margin: 5em 0">
<li><a href="http://hmmytori.hateblo.jp/entry/2017/06/04/172631">10秒当てゲーム(JavaScript) - 開発記録</a></li>
</ul>
CSS
.counter{
text-align:center;
margin:30px auto 0 auto;
font-family: 'Raleway', sans-serif;
width:300px;
}
#terget,#result{
font-size:32px;
margin-bottom:15px;
height:70px;
line-height:70px;
background:#aaa;
}
#result.perfect{
background:#FA5858;
color:#FFFFFF;
}
#result.standby{
opacity:0.5;
}
#start{
float:left;
}
#stop{
float:right;
}
#start,#stop{
cursor:pointer;
font-size:18px;
width:140px;
background:#ccc;
height:35px;
line-height:35px;
box-shadow:0 6px 0 #aaa;
}
#start.pushed,#stop.pushed{
margin-top:3px;
box-shadow:0 3px 0 #aaa;
}
JavaScript
(function(){
'use strict';
var start = document.getElementById('start');
var stop = document.getElementById('stop');
var result = document.getElementById('result');
var startTime;
var Started=false;
start.addEventListener('click',function(){
if(Started===true){
return;
}
Started=true;
startTime = Date.now();
this.className='pushed';
stop.className='';
result.textContent='0.000';
result.className='standby';
});
stop.addEventListener('click',function(){
var elapsedTime;
if(Started===false){
return;
}
Started=false;
elapsedTime=(Date.now()-startTime)/1000;
result.textContent=elapsedTime.toFixed(3);
this.className='pushed';
start.className='';
result.className='';
if(elapsedTime<10.5 && elapsedTime>9.5){
result.className='perfect';
}
});
})();