読者です 読者をやめる 読者になる 読者になる

flandlescarlet's diary【情報工学生の備忘録】

元機械工学科所属だった情報工学生です。JavaScriptで適当に何かを作ったり、絵を描いていたりします。

ルーレットアイテムを作ってみる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>