CSSでのボタンのエフェクト
数字を小さい順にタップしていくコードなのですが
この状態だと一度押されたものは背景が変わり押せなくなります
ですがCSSでボタンのデザインを変えると押したかどうかわからなくなってしまいます
コードは以下の通りです
<body>
<h1>小さい数字からタッチ!</h1>
<p>Time: <span id ="time">0.0</span> sec. </p>
<div id="board">
<input type="button" id="button_0" value="?" onclick="touched(0);">
<input type="button" id="button_1" value="?" onclick="touched(1);">
<input type="button" id="button_2" value="?" onclick="touched(2);"><br>
<input type="button" id="button_3" value="?" onclick="touched(3);">
<input type="button" id="button_4" value="?" onclick="touched(4);">
<input type="button" id="button_5" value="?" onclick="touched(5);"><br>
<input type="button" id="button_6" value="?" onclick="touched(6);">
<input type="button" id="button_7" value="?" onclick="touched(7);">
<input type="button" id="button_8" value="?" onclick="touched(8);"><br>
</div>
<p><input type="button" value="start!" onclick="timerStart();"></p>
<script>
var currentNum;
var timet;
var startTime;
var isPlaying = false;
function timerStart() {
initBoard();
currentNum = 0;
startTime = (new Date()).getTime();
if (!isPlaying) {
isPlaying = true;
runTimer();
}
}
function initBoard() {
var nums = [0,1,2,3,4,5,6,7,8];
var num;
var btn;
for (var i=0; i<9; i++) {
num = nums.splice(Math.floor(Math.random() * nums.length), 1);
btn = document.getElementById('button_' + i);
btn.value = num[0];
btn.disabled = false;
}
}
function touched(n) {
var btn = document.getElementById('button_' + n)
if (btn.value == currentNum) {
btn.disabled = true;
currentNum++;
}
if (currentNum == 9){
clearTimeout(timer);
isPlaying = false;
alert('Your Score: ' + document.getElementById('time').innerHTML);
}
}
function runTimer() {
document.getElementById('time').innerHTML = (((new Date()).getTime() - startTime) / 1000).toFixed(1);
timer = setTimeout(function() {
runTimer() ;
}, 100);
}
</script>
</body>
CSSは
#board > input {
height: 60px;
width: 90px;
margin-right : 5px;
margin-top : 5px;
background: -moz-linear-gradient(top,#09C 0%,#09C 50%,#069 50%,#069);
background: -webkit-gradient(linear, left top, left bottom,from(#09C), color-stop(0.5,#09C), color-stop(0.5,#069), to(#069));
border: 1px solid #DDD;
color: #FFF;
padding: 10px 0;
}
ですどうすればデザインの変更を保ったまま押されたときに背景を変えることができますか？
お礼
Proof4さん ありがとうございます。 私のやりたいことが出来ました。 ちょっとしたことなのですが、基礎知識がないので、大分時間をかけていたのにうまくいきませんでした。 嬉しいです。