ルーレットアイテムを作ってみる4【はてなサービス決定君】

はてなサービス決定君

D	Q	H	I
B			S
F			N
U	K	A	G

はてなサービスをランダムで選出するスクリプトです。

テキストフォームにidを入れてルーレットを回すと、そのサービスの所に飛びます。

何も入力しない場合は、そのサービスのTOPにリンクが飛びます。

Sample

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

function roulette(date){
    user_id = document.table_hatena.user_name.value;
 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";
 switch(date){
 case 1: location.href="http://d.hatena.ne.jp/"+user_id; break;
 case 2: location.href="http://q.hatena.ne.jp/"+user_id; break;
 case 3: location.href="http://h.hatena.ne.jp/"+user_id; break;
 case 4: location.href="http://i.hatena.ne.jp/"+user_id; break;
 case 5: location.href="http://s.hatena.ne.jp/"+user_id; break;
 case 6: location.href="http://n.hatena.ne.jp/"+user_id; break;
 case 7: location.href="http://g.hatena.ne.jp/"+user_id; break;
 case 8: location.href="http://a.hatena.ne.jp/"+user_id; break;
 case 9: location.href="http://k.hatena.ne.jp/"+user_id; break;
 case 10: location.href="http://ugomemo.hatena.ne.jp/"+user_id; break;
 case 11: location.href="http://f.hatena.ne.jp/"+user_id; break;
 case 12: location.href="http://b.hatena.ne.jp/"+user_id; break;

 }
 system = 1;
 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{
if(system == 2){
 clearTimeout("tell");

}
 system = 2; 
 tell = setTimeout("kaiten()",60);

}
}

</script>
<h1>はてなサービス決定君</h1>

<table>
 <tr>
 <td id="td1">D</td>
 <td id="td2">Q</td>
 <td id="td3">H</td>
 <td id="td4">I</td>
 <tr>
 <tr>
 <td id="td12">B</td>
 <td></td>
 <td></td>
 <td id="td5">S</td>
 </tr>
 <tr>
 <td id="td11">F</td>
 <td></td>
 <td></td>
 <td id="td6">N</td>
 </tr>
 <tr>
 <td id="td10">U</td>
 <td id="td9">K</td>
 <td id="td8">A</td>
 <td id="td7">G</td>
 </tr>
</table>
<form name="table_hatena">
<input type="text" name="user_name" placeholder="idを入れてね"><br>
<input type="button" onClick="kaiten()" value="今からやるはてなサービス">
</form>