サンプルプログラム
jqueryを使用しています。ヘッダーにjQueryを組み込む宣言をしておきましょう。
jQueryの宣言
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
例1:符と翻数を出力する
JavaScriptの記述
$(document).ready(function() { //例1:符と翻数を出力する $("button.hu").click(function() { var humax = eval(110);//符の最高値 var humin = eval(30);//符の最低値 var huhani = Math.random()*(humax-humin)+humin;//符を算出 var hu = Math.round(huhani/10)*10; //10未満を丸める alert(hu); //求めた符をダイアログボックスに表示する }); $("button.han").click(function() { var hanmax = eval(13); //翻数の最高値 var hanmin = eval(1); //翻数の最低値 var hanhani = Math.random()*(hanmax-hanmin)+hanmin;//翻数を算出 var han = Math.round(hanhani); //1未満を丸める alert(han); //求めた翻数をダイアログボックスに表示する }); });
HTMLの記述
<button name="符算出" class="hu">符算出</button> ←30〜110の範囲を出力 <button name="翻数算出" class="han">翻数算出</button> ←1〜13翻の範囲を出力
操作例
ボタンをクリックすると、計算結果が表示されます。
←30〜110の範囲を出力
←1〜13翻の範囲を出力
例2:符と翻数の最低値と最高値を設定して出力する
JavaScriptの記述
$(document).ready(function() { $("button.hu2").click(function() { var humax = eval($("select.humax").val()); //符の最高値をリストから取得 var humin = eval($("select.humin").val()); //符の最低値をリストから取得 var huhani = Math.random()*(humax-humin)+humin;//符を算出 var hu = Math.round(huhani/10)*10; //10未満を丸める alert(hu); //求めた符をダイアログボックスに表示する }); $("button.han2").click(function() { var hanmax = eval($("select.hanmax").val()); //翻数の最高値をリストから取得 var hanmin = eval($("select.hanmin").val()); //翻数の最低値をリストから取得 var hanhani = Math.random()*(hanmax-hanmin)+hanmin;//翻数を算出 var han = Math.round(hanhani); //1未満を丸める alert(han); //求めた翻数をダイアログボックスに表示する }); });
HTMLの記述
<b>符の最低値</b>: <select class="humin"> <option value=20>20</option> <option value=30 selected>30</option> <option value=40>40</option> <option value=50>50</option> <option value=60>60</option> <option value=70>70</option> <option value=80>80</option> <option value=90>90</option> <option value=100>100</option> <option value=110>110</option> <option value=120>120</option> </select> <b>符の最高値</b>: <select class="humax"> <option value=20>20</option> <option value=30>30</option> <option value=40>40</option> <option value=50>50</option> <option value=60>60</option> <option value=70 selected>70</option> <option value=80>80</option> <option value=90>90</option> <option value=100>100</option> <option value=110>110</option> <option value=120>120</option> </select> <p><button class="hu2">符算出</button></p> <b>翻数の最低値</b>: <select class="hanmin"> <option value=1 selected>1</option> <option value=2>2</option> <option value=3>3</option> <option value=4>4</option> <option value=5>5</option> <option value=6>6</option> <option value=7>7</option> <option value=8>8</option> <option value=9>9</option> <option value=10>10</option> <option value=11>11</option> <option value=12>12</option> <option value=13>13</option> <option value=14>14</option> <option value=15>15以上</option> </select> <b>翻数の最高値</b>: <select class="hanmax"> <option value=1>1</option> <option value=2>2</option> <option value=3>3</option> <option value=4>4</option> <option value=5>5</option> <option value=6>6</option> <option value=7>7</option> <option value=8>8</option> <option value=9>9</option> <option value=10>10</option> <option value=11>11</option> <option value=12>12</option> <option value=13 selected>13</option> <option value=14>14</option> <option value=15>15以上</option> </select> <p><button class="han2">翻数算出</button></p>
操作例
ボタンをクリックすると、計算結果が表示されます。
符の最低値: 符の最高値:翻数の最低値: 翻数の最高値: