(1)javascriptでパーセント計算アプリの作成

別なブログで旅行のブログを作っていますがアプリ関係のブログも作成したくなりました。

最終的にはアンドロイド・アプリを作りたいのですが、開発環境の準備が簡単なjavascriptから始めます。

アプリは簡単なパーセント計算を作成します。
(パーセント計算は通常の電卓でもできますが操作が良くわからないので作成することにしました)

 
パーセント計算アプリ の画面イメージ
p画面.png
 
使用方法:
 ①または②の緑色のセルに値を入力して「計算実行」で結果が表示されます。
   ①はパーセントを指定した場合の計算。
   ②はパーセントを求めます。
javascriptソース(html全体)
-----------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>パーセント計算機</title>
  </head>
  <script type="text/javascript">
     function Calculate(){ 
        var icel_01 = parseInt(frm1.cel_01.value)
        var icel_02 = parseInt(frm1.cel_02.value)
        var ikekka = icel_01 * (icel_02 / 100);
        ikekka = Math.round(ikekka)
        frm1.cel_03.value = ikekka
        frm1.cel_04.value = frm1.cel_01.value
        frm1.cel_07.value = frm1.cel_01.value
        frm1.cel_05.value = frm1.cel_02.value
        frm1.cel_08.value = frm1.cel_02.value
        frm1.cel_06.value = icel_01 - ikekka
        frm1.cel_09.value = icel_01 + ikekka
       
        icel_10 = parseInt(frm1.cel_10.value)
        icel_11 = parseInt(frm1.cel_11.value)
        ikekka = (icel_10 / icel_11) * 100
        ikekka = Math.round(ikekka)
        frm1.cel_12.value = ikekka
     }
     function Calcls(){
        frm1.cel_01.value = ""
        frm1.cel_02.value = ""
        frm1.cel_03.value = ""
        frm1.cel_04.value = ""
        frm1.cel_05.value = ""
        frm1.cel_06.value = ""
        frm1.cel_07.value = ""
        frm1.cel_08.value = ""
        frm1.cel_09.value = ""
        frm1.cel_10.value = ""
        frm1.cel_11.value = ""
        frm1.cel_12.value = ""
     }
  </script>
  <body>
    <h1>パーセント計算機</h1>①か②の緑のセルに値(整数)を入れて計算ボタンを押してください<br>
    ピンクのセルは計算結果が表示されるエリアです。
    <br><br>
    <INPUT type="button" onClick="Calculate()" value="計算実行">  
    <INPUT type="button" onClick="Calcls()" value="クリア"><br><br>
    <form name="frm1">
      ① %を指定<br>
      <input type="text" name="cel_01" size="6" value=1980 style="background-color:#00ff00">の
      <input type="text" name="cel_02" size="6" value=15 style="background-color:#00ff00">%    =
      <input type="text" name="cel_03" size="6" value=297 style="background-color:#F5A9F2">
      <br>
      <input type="text" name="cel_04" size="6" value=1980 style="background-color:#F5A9F2">の
      <input type="text" name="cel_05" size="6" value=15 style="background-color:#F5A9F2">%引き =
      <input type="text" name="cel_06" size="6" value=1683 style="background-color:#F5A9F2">
      <br>
      <input type="text" name="cel_07" size="6" value=1980 style="background-color:#F5A9F2">の
      <input type="text" name="cel_08" size="6" value=15 style="background-color:#F5A9F2">%増し =
      <input type="text" name="cel_09" size="6" value=2277 style="background-color:#F5A9F2">
      <br><br>
      ② %を求める<br>
      <input type="text" name="cel_10" size="6" value=120 style="background-color:#00ff00">は
      <input type="text" name="cel_11" size="6" value=200 style="background-color:#00ff00">の  
      <input type="text" name="cel_12" size="6" value=60 style="background-color:#F5A9F2">%
    </form>
  小数点以下は四捨五入しています。
  </body>
</html>
-----------------------------------------------------------------------------
テスト方法:
上記ソースはローカルファイルでテストできます。
方法:
 p.txt ファイルを作成
 p.txt ファイルを開いて上記ソースを貼り付けて上書き保存
 p.txt ファイルの拡張子を htm に変更して p.htm にする。
 p.htmのダブルクリックで「パーセント計算アプリ」が立ち上がります。
次は サーバにhtmlを登録します。


この記事へのコメント