addEventListener(‘click’, function(){}で、クリックごとに、btn inactiveのクラスを追加していってます。数字の初期値はランダム、時間はsetTimeoutで、現在時間からスタート時間を引いています。
reference
appendChild(): method appends a node as the last child of a node.
Tip: If you want create a new paragraph, with text, remember to create the text as a Text node which you append to the paragraph, then append the paragraph to the document.
Document.createElement() :method creates the HTML element specified by tagName, or an HTMLUnknownElement if tagName isn’t recognized. In a XUL document, it creates the specified XUL element. In other documents, it creates an element with a null namespace URI.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Run Time for Button touch</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background: #e0e0e0;
font-family: Arial, sans-serif;
text-align: center;
color: #0088cc;
font-size: 16px;
}
#scoreArea{
text-shadow: 0 1px 0 rgba(255, 255,255, 0.5);
margin: 30px auto;
}
#scoreText{
font-weight: bold;
font-size: 24px;
}
#startButton{
margin: 30px auto;
width: 180px;
border-radius: 5px;
box-shadow: 0 4px 0 #e91b0c;
background: #f44336;
color: #fff;
cursor: pointer;
padding: 7px;
}
#startButton:hover{
opacity: 0.8;
}
#startButton.pushed{
margin-top: 32px;
box-shadow: 0 2px 0 #e91b0c;
}
.btn {
position: relative;
display: inline-block;
width: 30px;
padding: 7px;
border-radius: 5px;
box-shadow: 0 4px 0 #0088cc;
color: #fff;
background: #00aaff;
cursor: pointer;
margin-bottom: 10px;
}
.btn.hidden:after{
content: '?';
position: absolute;
top: 0;
left: 0;
width: 30px;
padding: 7px;
border-radius: 5px;
background: #00aaff;
}
.btn + .btn {
margin-left: 10px;
}
.btn.inactive {
opacity: 0.5;
}
</style>
</head>
<body>
<div id="scoreArea">Your Score: <span id="scoreText">0.0</span></div>
<div id="board">
<!--<div class="btn">0</div>
<div class="btn">1</div><br>
<div class="btn">2</div>
<div class="btn">3</div> -->
</div>
<div id="startButton" class="pushed">START</div>
<script>
(function(){
'use strict';
var size = 3;
var currentNum = 0;
var startTime;
var timerId;
var board = document.getElementById('board');
var scoreText = document.getElementById('scoreText');
var startButton = document.getElementById('startButton');
initBoard();
startButton.addEventListener('click', function(){
initBoard();
var btns = document.getElementsByClassName('btn');
for (var i = 0; i < btns.length; i++){
btns[i].className = 'btn';
}
currentNum = 0;
startTime = Date.now();
if(timerId !== null) clearTimeout(timerId);
runTimer();
});
startButton.addEventListener('mousedown', function(){
this.className = 'pushed';
});
startButton.addEventListener('mouseup', function(){
this.className = '';
});
function runTimer(){
scoreText.innerHTML = ((Date.now() - startTime) / 1000).toFixed(2);
timerId = setTimeout(function(){
runTimer();
}, 10);
}
function createButton(num){
var button;
button = document.createElement('div');
button.className = 'btn hidden';
button.innerHTML = num;
button.addEventListener('click', function(){
if ((this.innerHTML - 0) === currentNum){
this.className = 'btn inactive';
currentNum++;
}
if (currentNum == size * size){
clearTimeout(timerId);
}
});
return button;
}
function initBoard(){
var buttons = [];
while (board.firstChild){
board.removeChild(board.firstChild);
}
for (var i = 0; i < size * size; i ++){
buttons.push(createButton(i));
}
while (buttons.length){
var button = buttons.splice(Math.floor(Math.random() * buttons.length), 1);
board.appendChild(button[0]);
if (buttons.length % size === 0){
board.appendChild(document.createElement('br'));
}
}
}
})();
</script>
</body>
</html>
