この記事では、jsで簡単な計算機を作成する具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 写真のような簡単な計算機を作るには、まずフォームを作成し、写真のような見た目にする必要があります。 <表の境界線="1" セル間隔="0" > <tr><th colspan="2">ショッピング計算機</th></tr> <tr> <td>最初の数字</td> <td><入力タイプ="テキスト" id="入力Id1" /></td> </tr> <tr> <td>2番目の数字</td> <td><入力タイプ="テキスト" id="入力Id2" /></td> </tr> <tr> <td><button type="button" onclick="cal('+')" >+</button></td> <td><button type="button" onclick="cal('-')" >-</button> <button type="button" onclick="cal('*')" >*</button> <button type="button" onclick="cal('/')" >/</button></td> </tr> <tr> <td>計算結果</td> <td><input type="text" id="resultId"/></td> </tr> </テーブル> Onclick は cal() メソッドを使用します。実際、最初は add、sub、mul、div メソッドを使用しました。後で、これら 4 つのメソッドは算術演算子を除いて同じであることがわかりました。そのため、1 つのメソッドを使用することにしました。ボタンをクリックすると、メソッドに渡される算術演算子が異なります。コードは次のとおりです。 <script type="text/javascript"> 関数cal(type){ var num1 = document.getElementById('inputId1'); var num2 = document.getElementById('inputId2'); var 結果; スイッチ(タイプ){ ケース '+': 結果 = parseInt(num1.value) + parseInt(num2.value); 壊す; 場合 '-': 結果 = parseInt(num1.value) - parseInt(num2.value); 壊す; 場合 '*': 結果 = parseInt(num1.value) * parseInt(num2.value); 壊す; 場合 '/': 結果 = parseInt(num1.value) / parseInt(num2.value); 壊す; } var resultObj = document.getElementById('resultId'); resultObj.value = 結果; } </スクリプト> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
目次どうしたの?いつ使うか列挙の数を制御するビット値コントロールインデックス非数値列挙結論はType...
目次序文静的スコープと動的スコープ静的スコープ実行プロセス動的スコープ実行プロセスエクササイズ練習1...
変更後: innodb_buffer_pool_size=576M ->256M InnoDB...
プロジェクトで発生した不規則な絵画壁のレイアウト問題は、次のように分析されます。 1.img dis...
MySQL では、テーブル名の大文字と小文字の区別の問題が発生する可能性があります。実際、これはプラ...
<br />最近、UCDChina は「インターフェース上のテキストに注意を払う」という...
1. はじめにスロークエリログを有効にすると、MySQL は指定された時間を超えるクエリステートメン...
冒頭にこう書かれています:アブソリュートは言った。「親戚よ、私はあなたを私の人生で見たくない!」なぜ...
Docker はプロセスを中核としてシステムリソースを分離する管理ツールです。分離は、オペレーティン...
ログインページなどのホームページを作成する場合、大きな背景画像を配置する必要があり、さまざまな画面の...
最初のステップは、対応するデータベースモジュール(sql)をプロジェクトファイル( .pro )に追...
目次1 データベース インデックスを作成するための一般的なルールは次のとおりです。 2. 数千万件の...
目次1. テーブル自動ソート2. ページング機能3.el-checkbox-group 複数選択ボッ...
目次一方向データフローの説明Vue2.x の使用法親コンポーネントに変更を通知するイベントのフォーム...
序文JS の型付けが弱く、記述基準が緩く、開発ツールのサポートが弱いため、前任者のコードをメンテナン...