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;
}
ですどうすればデザインの変更を保ったまま押されたときに背景を変えることができますか？
お礼
ORUKA1951様 ご回答ありがとうございます。 すいません、ご指摘の通り、見た目のことばかり考えていて、 使う人のことまで考えが及んでいませんでした。 技術者としては、重要なことですよね。 ありがとうございます。 また、解決策についてもご教示頂き、ありがとうございました! 大変参考になりました。 今のままにしておきますが、こういうやり方もあるとうことで、勉強させて頂きます。