CSSでのボタンのエフェクト

締切済

質問者：DreamyLife_615
質問日時：2014/07/15 13:43
回答数：2件

数字を小さい順にタップしていくコードなのですが
この状態だと一度押されたものは背景が変わり押せなくなります
ですが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;
}

ですどうすればデザインの変更を保ったまま押されたときに背景を変えることができますか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： ORUKA1951
回答日時：2014/07/15 19:16

ご期待とまったく反する回答になりますが、

　フォームのコントロールと言うユーザーインターフォース(UI)は、そのデザインを変えてはなりません。やりすぎです。初心者が懲りたい気持ちは分かりますが、javascriptが無効のユーザーはワケワカメになってしまいます。
　CSSでも、フォームのUIを変更するプロパティが用意されていません。
　CSS3の:checkedなどで、背景は変更できますがデザインは変更すべきではありません。

　

この回答への補足

ボタンを円の形に変えて背景色を付けただけのにしてみましたがこれでも無理ですかね

#button_0{
background:#E75A7D;
height:60px;
width: 60px;
margin-right : 5px;
margin-top: 10px;
font-size:1.3em;
outline: none;
border-radius: 50%;}

補足日時：2014/07/15 20:58

通報する

- 0
- 件

通報する

No.1

回答者： fujillin
回答日時：2014/07/15 15:54

CSS3でよければ、そのままで

#board > input:disabled {
　　background : red;
}
とかで、自由に。

そうでなければ、disabled設定の時に別にクラス設定をしてあげて、そのクラスに対して（↑）と同様にCSSを設定しておくのが簡単かと。

この回答への補足

下記の中に埋め込めばいいんですか？
#board > input {
height:60px;
width: 90px;
margin-right : 5px;
margin-top: 10px;
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;
}

補足日時：2014/07/15 17:32

通報する