JavaScriptはシンプルな計算機能を実装します
|
この記事では、参考までに、簡単な計算機能を実装するためのJavaScriptの具体的なコードを紹介します。具体的な内容は次のとおりです。 具体的な要件は次のとおりです。
実装コード:
<html>
<ヘッド>
<メタ文字セット="utf-8">
<title>電卓</title>
<スクリプト>
関数myck(type){
var num1 = document.getElementById("num1");
var num2 = document.getElementById("num2");
if(type==1){
// 計算操作 var result = parseInt(num1.value) + parseInt(num2.value);
アラート(結果);
document.getElementById("resultDiv").innerText = "最終計算結果: " + result;
}それ以外の場合(type==2){
var 結果 = parseInt(num1.値) - parseInt(num2.値);
アラート(結果);
document.getElementById("resultDiv").innerText = "最終計算結果: " + result;
}
そうでない場合(type==3){
var 結果 = parseInt(num1.値) * parseInt(num2.値);
アラート(結果);
document.getElementById("resultDiv").innerText = "最終計算結果: " + result;
}
そうでない場合(type==4){
if(confirm("正しくクリアされましたか?")){
// クリア num1.value = "";
num2.値 = "";
document.getElementById("resultDiv").innerText="";
}
}
}
</スクリプト>
</head>
<本文>
<div style="margin-top: 100px;margin-left: 500px;">
<span style="font-size: 60px;">電卓</span>
</div>
<div>
<div class="innerDiv" style="margin-left: 490px;">
番号 1: <input id="num1" type="number" placeholder="番号 1 を入力してください">
</div>
</div>
<div>
<div class="innerDiv" style="margin-left:490px;">
番号 2: <input id="num2" type="number" placeholder="番号 2 を入力してください">
</div>
</div>
<div>
<div style="margin-left: 500px;" class="innerDiv">
<input type="button" onclick="myck(1)" value="追加">
<input type="button" onclick="myck(2)" value="減算">
<input type="button" onclick="myck(3)" value="乗算">
<input type="button" onclick="myck(4)" value="クリア 空">
</div>
</div>
<div id="resultDiv">
</div>
</本文>
<スタイル>
.innerDiv{
左マージン: 420px;
上マージン: 20px;
}
</スタイル>
</html>以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: nginx を使用してブルーグリーン デプロイメントをシミュレートする方法
>>: PID を作成できないために MySQL が起動できない問題を解決する方法
推薦する
ショッピングカートの計算を実現する js メソッド
この記事の例では、ショッピングカートの計算を実装するためのjsの具体的なコードを参考までに共有してい...
MySQL の自動増分 ID (主キー) が不足した場合の解決策
MySQL で使用される自動インクリメント ID には多くの種類があり、各自動インクリメント ID ...
ウェブサイトのフッター沈下現象に対する3つの解決策を詳しく解説
背景多くのウェブサイトのデザインは、一般的にコンテンツ+フッターの2つの部分で構成されています。コン...
EasyUEFI を使用して Windows 10 で USB ドライブなしで Ubuntu 18 をインストールする
1. BIOSを確認するまず、コンピュータの起動モードを確認します。win+R と入力し、msinf...
Vue+Elementでページング効果を実現
この記事の例では、ページング効果を実現するためのvue+Elementの具体的なコードを参考までに共...
JavaScript の find() メソッドと filter() メソッドの違いのまとめ
目次序文JavaScript find() メソッドJavaScript filter() メソッド...
Vite+ElectronでVUE3デスクトップアプリケーションを素早く構築
目次1. はじめに2. Viteプロジェクトを作成する1. viteをインストールする2. プロジェ...
CentOS6.8 は cmake を使用して MySQL5.7.18 をインストールします。
オンライン情報を参考に、cmakeを使用してCentOS6.8サーバーにMySQL5.7.18をイン...
JavaScript における URL オブジェクトの素晴らしい使い方
目次序文解析パラメータURLパラメータを変更する要約する序文URLオブジェクトはページ側ではあまり使...
MySQL の遅いクエリの最適化方法と最適化の原則
1. 日付のサイズを比較するには、XML に渡される日付形式は 'yyyy-MM-dd...
Linux Centos8 CA証明書作成チュートリアル
必要なファイルをインストールする Yum インストール openssl-* -yデータベースインデッ...
CSS スタイルにおける中国語フォントのフォントファミリーに対応する英語名の詳細な説明
ソングティ: SimSun太字: SimHeiマイクロソフト YaHei: マイクロソフト YaHe...
Vue フロントエンドの Excel ファイルのエクスポートの詳細な実装計画
目次1. 技術の選択2. 技術的な実装vue-json-excelプラグインを使用して実装1. vu...
Docker MQTT のインストールと使用のチュートリアル
MQTT の紹介MQTT (Message Queuing Telemetry Transport)...
JavaScript PromiseとAsync/Awaitの詳細な説明
目次概要4つの例例1: 誕生日で説明する約束の基本例2: 数字当てゲーム例3: Web APIから国...