九九を遊んで覚えるためのスクリプトです。
数字をクリックして選択した後、「こたえは？」のボタンを押すと結果が出ます。
もう一度チャレンジする時は、「もういちど！」ボタンを押して下さい。
これは二桁のかけ算に対応しています。一桁のかけ算も可能です。
・サンプルを見る
・ソースを保存する
（右クリック→「対象をファイルに保存」or「リンクを名前を付けて保存」して下さい。）
・ソースを見る
・解説を見る
[ ソース ]
<html><head>
<script language="JavaScript">
<!--//Copyright (C) WEST MiRa http://www.west-mira.jp
pic=new Array();
for(i=0;i<10;i++)
{pic[i]=new Image();
pic[i].src=""+i+".gif";}
img_name=new Array("hitotu","hitotu2","hutatu","hutatu2","kotae1","kotae2","kotae3","kotae4");
suuji=new Array(0,0,0,0);
k=0;
function img_load()
{
for(i=0; i<pic.length; i++)document.images["hidden"].src=pic[i].src;
}
function hajime()
{for(i=0;i<8;i++)
{document.images[img_name[i]].src=pic[0].src;}
k=0;}
function kuku(kazu)
{if(kazu!='x'&&kazu!='keisann')
{if(k==0||k==2)
document.images[img_name[k]].src=pic[kazu].src;
else if(k==1||k==3)
{document.images[img_name[k]].src=document.images[img_name[k-1]].src;
document.images[img_name[k-1]].src=pic[kazu].src;}
suuji[k]=kazu;
k++;}
else if(kazu=='x')k=2;
else if(kazu=='keisann')
{if(k==2)kekka=suuji[0]*suuji[1];
else if(k==4)
{a=String(suuji[0])+String(suuji[1]);
b=String(suuji[2])+String(suuji[3]);
kekka=String(eval(a)*eval(b));}
else if(k==3)
{if(document.images["hitotu2"].src.indexOf("0.gif")!=-1)
{a=String(suuji[0]);
b=String(suuji[1])+String(suuji[2]);}
else
{a=String(suuji[0])+String(suuji[1]);
b=String(suuji[2]);}
kekka=String(eval(a)*eval(b));
}
j=4; i=kekka.length-1;
for(l=0;l<kekka.length;l++)
{document.images["kotae"+j].src=pic[eval(kekka.charAt(i))].src;
i--; j--;}
}
}
//-->
</script>
</head>
<body onLoad="img_load();">
<div align="center">
<table>
<tr>
<td><a href="javaScript:kuku(1);"><img src="1.gif" border="0"></a></td>
<td><a href="javaScript:kuku(2);"><img src="2.gif" border="0"></a></td>
<td><a href="javaScript:kuku(3);"><img src="3.gif" border="0"></a></td>
<td><a href="javaScript:kuku(4);"><img src="4.gif" border="0"></a></td>
<td><a href="javaScript:kuku(5);"><img src="5.gif" border="0"></a></td>
</tr><tr>
<td><a href="javaScript:kuku(6);"><img src="6.gif" border="0"></a></td>
<td><a href="javaScript:kuku(7);"><img src="7.gif" border="0"></a></td>
<td><a href="javaScript:kuku(8);"><img src="8.gif" border="0"></a></td>
<td><a href="javaScript:kuku(9);"><img src="9.gif" border="0"></a></td>
<td><a href="javaScript:kuku(0);"><img src="0.gif" border="0"></a></td>
</tr></table>
<hr width="55%">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td colspan="4"></td>
<td><img src="0.gif" name="hitotu2" border="0"></td>
<td><img src="0.gif" name="hitotu" border="0"></td>
</tr>
<tr>
<td valign="bottom"><a href="javaScript:kuku('x');"><img src="x.gif" border="0"></a></td>
<td rowspan="2" valign="bottom"><img src=").gif" border="0"></td>
<td colspan="2"></td>
<td><img src="0.gif" name="hutatu2" border="0"></td>
<td><img src="0.gif" name="hutatu" border="0"></td>
</tr>
<tr>
<td></td>
<td colspan="4" valign="top"><img src="line.gif" border="0"></td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
<td><img src="0.gif" name="kotae1" border="0"></td>
<td><img src="0.gif" name="kotae2" border="0"></td>
<td><img src="0.gif" name="kotae3" border="0"></td>
<td><img src="0.gif" name="kotae4" border="0"></td>
</tr>
</table>
<form name="form1">
<input type="button" value="こたえは？" onClick="kuku('keisann');">
<input type="button" value="もういちど！" onClick="hajime();">
<img src="" name="hidden" width="1" height="1" border="0">
</form>
</div>
</body>
</html>
[ 解説 ]
まず０〜９の各数字画像を用意します。
ファイル名は「0」ならば「0.gif」、「1」ならば「1.gif」と付けて下さい。
画像の置き場所は、スクリプトと同じディレクトリに保存して下さい。
「ｘ」や「＝」の画像も必要ならば作って下さい。
文字でも良いのならば、下から１３行目が「ｘ」、
下から１１行目が「＝」のタグに対応しているので、文字に置き換えて下さい。
中程に<body>があります。
ボディタグ内にはお好きな属性を加えてあげて下さい。
壁紙や文字色など、お好きに設定して下さい。
ボディ内のHTMLに関しましても、お好きに設定して下さい。
このスクリプトはダウンロード版もご用意しています。
ダウンロード版を使用すればスクリプトをいじる必要も、画像を用意する必要もありません。
|
