数字の掛け算、足し算をブラウザで行えるスクリプトをhtmlで書いたので載せておく。だいたいはWebで調べながら書けたが、1点苦労したところだけ文章に残しておく。
入力フォームやボタンのフォントサイズ指定
32、35行目に<font size ="○">というのがある。これは文字のフォント指定で、以降の文字のサイズを指定することができる。ただし、入力フォームの中身やボタンに表示される文字は、この書式で指定することはできない。入力フォームやボタンの書式について指定するには、41行目にあるように、sytle =・・・・の書き方をする必要がある。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
<html> <!-- 文字化けを防ぐための文字コード指定 --> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <head> <!-- ブラウザのタブに表示されるタイトル --> <title>ブラウザ計算</title> </head> <!-- これが計算の中身。チェックボックスの１、２がチェックされていたら100を足す。１～１０の入力値すべてを掛け算する--> <script type="text/javascript"> function Calculate() { var cost1 =0; var cost2 =0; check1 = document.form1.check1.checked; check2 = document.form1.check2.checked; if(check1 == true) {cost1 =100;} if(check2 == true) {cost2 =100;} form1.output.value = form1.text1.value * form1.text2.value* form1.text3.value * form1.text4.value* form1.text5.value* form1.text6.value * form1.text7.value* form1.text8.value* form1.text9.value* form1.text10.value + cost1 + cost2;} </script> <center> <!-- これ以降がブラウザに表示される中身 --> <body> <font size ="7"> ブラウザ計算<br> <!-- フォント指定。ここで指定するフォントは、ボタンや入力フォームには適用されないため、別途指定が必要。 --> <font size ="6"> <form name="form1"> <td align="right"><b> 入力値１：</b></td> <!-- nameに入れた名前で、この入力フォームを識別できる。先に書いたように入力フォームのフォント指定をするためには style="font-size:30px;"のような指定が必要 --> <td><input type="text" name="text1" size="20" maxlength="20"style="font-size:30px;"></td><br> <td align="right"><b> 入力値２：</b></td> <td><input type="text" name="text2" size="20" maxlength="20"style="font-size:30px;"></td><br> <td align="right"><b> 入力値３：</b></td> <td><input type="text" name="text3" size="20" maxlength="20"style="font-size:30px;"></td><br> <td align="right"><b> 入力値４：</b></td> <td><input type="text" name="text4" size="20" maxlength="20"style="font-size:30px;"></td><br> <td align="right"><b> 入力値５：</b></td> <td><input type="text" name="text5" size="20" maxlength="20"style="font-size:30px;"></td><br> <td align="right"><b> 入力値６：</b></td> <td><input type="text" name="text6" size="20" maxlength="20"style="font-size:30px;"></td><br> <td align="right"><b> 入力値７：</b></td> <td><input type="text" name="text7" size="20" maxlength="20"style="font-size:30px;"></td><br> <td align="right"><b> 入力値８：</b></td> <td><input type="text" name="text8" size="20" maxlength="20"style="font-size:30px;"></td><br> <td align="right"><b> 入力値９：</b></td> <td><input type="text" name="text9" size="20" maxlength="20"style="font-size:30px;"></td><br> <td align="right"><b> 入力値１０：</b></td> <td><input type="text" name="text10" size="20" maxlength="20"style="font-size:30px;"></td><br> <td> <!-- style="width:20px;height:20px;"の指定でチェックボックスのサイズ指定ができる。数字が異なる場合、小さい方の 数字が適用される。 --> <input type="checkbox" name="check1" style="width:20px; height:20px;">チェック１<br> <input type="checkbox" name="check2" style="width:20px; height:20px;">チェック２<br> </td> <INPUT type="button" name="buttoncalc" onClick="Calculate()" value="計算"style="font-size:30px;"><br> <td align="right"><b> 計算結果：</b></td> <td><input type="text" name="output" size="20" maxlength="20" value="0"style="font-size:30px;"></td><br> </font> </center> </form> </body> </html> |
