最上段のボタンをいずれか選んでクリックするとchkマークが走って賞を決定します。
応用:表を大きくしたり当選確率を設定できるようにしたりして改造してみましょう。ここではラジオボタンを使いましたが、チェックボックスでもできます。
<html>
<head>
<title></title>
</head>
<script language="JavaScript">
<!--
window.onerror=null
mv = 0
rd = 0
lr = 0
//まずくじの表を作る
document.write("<center><form name='form1'><table border=8>")
//1段目、横に10個ラジオボタンを並べる
document.write("<tr bgcolor='#777777'>")
for( i=0 ; 10>i ; i++ )
{
document.write("<td><input type='radio' name='fi"+i+"' ")
document.write("onClick='str(this.form)'></td>")
}
document.write("</tr>")
//1段目と2段目の間の太罫線
document.write("<tr></tr>")
document.write("<tr></tr>")
document.write("<tr></tr>")
//2段目から10段目まで
for( j=1 ; 10>j ; j++)
{
document.write("<tr bgcolor='#999999'>")
for(k=0;10>k;k++)
{
document.write("<td><input type='radio'")
document.write(" NAME='fi"+j*k+"' ></td>")
}
document.write("</tr>")
document.write("<br>")
}
//10段目と11段目の間の罫線
document.write("<tr></tr>")
//11段目
document.write("<tr>")
document.write("<td bgcolor='#C4A1C3'> 1</td>")
document.write("<td bgcolor='lightblue'>す</td>")
document.write("<td bgcolor='yellow'> 2</td>")
document.write("<td bgcolor='green'>す</td>")
document.write("<td bgcolor='red'>特</td>")
document.write("<td bgcolor='orange'>す</td>")
document.write("<td bgcolor='#ffffff' >3</td>")
document.write("<td bgcolor='#cccccc'>銀</td>")
document.write("<td bgcolor='yellow'>金</td>")
document.write("<td bgcolor='pink'>4</td></tr>")
document.write("</table></form></center>")
document.write("<p>")
document.close()
//----作表終了
//表の初期化だよっ
function res(){
for( l=0 ; 100>l ; l++ ){
document.form1.elements[l].checked=false
}
}
res()
function str(form1)
{
for( m=0 ; m<10 ;m++ )
{
if(document.form1.elements[m].checked==true)
{
while( m < 90 )
{
takuchk()
}
//当選確率はコントロールしてないのでここで調整してね
if(m==90)alert('1等賞っ')
if(m==91)alert('すかっ')
if(m==92)alert('2等賞っ')
if(m==93)alert('すかっ')
if(m==94)alert('特賞っ')
if(m==95)alert('すかっ')
if(m==96)alert('3等賞っ')
if(m==97)alert('銀賞っ')
if(m==98)alert('金賞っ')
if(m==99)alert('4等賞っ')
setTimeout('res()',3000)
}
}
}
function takuchk(){
m += mov(m)
document.form1.elements[m].checked=true
}
//ランダムを作って返すのだ
function rnd()
{
//NN3.x以前のブラウザエラー回避
if ( navigator.appVersion.charAt(0)>=3){
rd = Math.random()*10
} else {
//NN3.x以前のブラウザ用ランダム3.xの方がいいよ(^^;
var Now = new Date();
var rdada = Now.getTime();
var rd = (rdada / Math.PI * 0.123456) % 10
}
rd = Math.round(rd)
return rd
}
//チェックボックスの動きはここできめるんだよ(^^)/
function mov(m)
{
lz = (""+m).indexOf("0")
rz = (""+m).indexOf("9")
rd = rnd()
//デバック用alertです(改造時にご利用ください^^)
//alert("m="+m+" lz="+lz+" rz="+rz+" rd="+rd);
if(m<10){ mv=10 }else{
if(lz!=-1){lr=1;mv=1}else{
if(rz!=-1){lr=0;mv=-1}else{
if ( rd==0 ) mv=10
if ( rd>1&&rd<=3 ) mv=10
if ( rd>3&&rd<=6 ) if(lr==1){lr=1;mv=1}else{lr=0;mv=-1}
if ( rd>6&&rd<=9 ) if(lr==1){lr=0;mv=-1}else{lr=1;mv=1}
if ( rd>9 ) mv=10
}
}
}
return mv
}
//-->
</script>
</body>
</body>
</html>
| CONTENTS
| PART1 これだけ知っていれば大丈夫
| PART2 サンプルの紹介
| PART3 JavaScript言語仕様
| PART4 JavaScriptクイック書式一覧
| PART5 JavaScriptサイト
| オンラインサポートページ(回線をつないでください)