ルーレットアイテムを作ってみる3

今日の気分求めったー

(^ω^)	(・ω・)	(°д°)	('д`)
('・ω・)			°(∀)°
(°д°))			(^ω^;)
(TдT)	(∀0)	(?д?)	(￣∇￣)

今日の気分を求めるスクリプトです。

今回はルーレットの形について、考えてみました。

前回4個から12個まで増やして回転する形でルーレットかしました。

一応後は、止まった時に起きる処理をするだけとなります。

デザインもいろいろと考えていこうと思います。

Sample

<script type="text/JavaScript">
choice = 1; //選択場所を1にする
counter = 1; //カウンターを設定
number = Math.round (Math.random () * 11) + 2; // 2〜13のランダムな数

function roulette(date){
 date = date - 1;
 for(i=1;i<=12;i++){
 document.getElementById("td" + i).style.backgroundColor = "#FFF";
 document.getElementById("td" + i).style.color = "#000";
 }
 document.getElementById("td" + date).style.backgroundColor = "#000";
 document.getElementById("td" + date).style.color = "#FFF";
 number = Math.round (Math.random () * 11) + 2; // 2〜13のランダムな数
}

function kaiten(){
for(i=1;i<=12;i++){
 document.getElementById("td" + i).style.backgroundColor = "#FFF";
 document.getElementById("td" + i).style.color = "#000";
}
for(i=1;i<=12;i++){ //tdのid個数
 if(choice == i){ //tdが1の時最後の部分を消す
 if(i == 1){
 document.getElementById("td" + choice).style.backgroundColor = "#000";
 document.getElementById("td12").style.backgroundColor = "#FFF";
 document.getElementById("td" + choice).style.color = "#DDD";
 document.getElementById("td12").style.color = "#000";
 }
 else{
 j = i - 1; //一個前の要素を設定
 document.getElementById("td" + choice).style.backgroundColor = "#000";
 document.getElementById("td" + j).style.backgroundColor = "#FFF";
 document.getElementById("td" + choice).style.color = "#DDD";
 document.getElementById("td" + j).style.color = "#000";
 }
 }
}
 choice++;
 counter++;
 if(choice == 13){choice = 1;}
 if(counter == 72 + number){
 clearTimeout("tell");
 date = number;
 choice = 1;
 counter = 1;
 roulette(date);
 }
 else{
 tell = setTimeout("kaiten()",60);
 }
}

</script>

<table border="1">
 <tr>
 <td id="td1">(^ω^)</td>
 <td id="td2">(・ω・)</td>
 <td id="td3">(°д°)</td>
 <td id="td4">('д`)</td>
 <tr>
 <tr>
 <td id="td12">('・ω・)</td>
 <td></td>
 <td></td>
 <td id="td5">°(∀)°</td>
 </tr>
 <tr>
 <td id="td11">(°д°))</td>
 <td></td>
 <td></td>
 <td id="td6">(^ω^;)</td>
 </tr>
 <tr>
 <td id="td10">(TдT)</td>
 <td id="td9">(∀0)</td>
 <td id="td8">(?д?)</td>
 <td id="td7">(￣∇￣)</td>
 </tr>
</table>

<input type="button" onClick="kaiten()" value="rouletteを回す">