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 が起動できない問題を解決する方法
推薦する
Vue ページレンダリングにおけるキーの適用例チュートリアル
導入フロントエンドプロジェクトの開発プロセスでは、el-table によって表示される結果列がコンポ...
JS はランダム点呼システムを実装します
参考までに、JSを使用してランダム点呼システムを実装します。具体的な内容は次のとおりです。毎回の授業...
Echart Bar の 2 列チャート スタイルの最も完全な詳細な説明
目次序文インストールと設定1. Echartsをインストールする2. Echartsをグローバルに導...
通知メッセージカルーセルを実装するための CSS3 トランジション
Vueバージョンをファイルにコピーして使用します <テンプレート> <!-- カル...
Vue カプセル化に基づくプルダウン更新およびプルアップ読み込みコンポーネント
VueとネイティブJavaScriptカプセル化に基づいて、プルダウンリフレッシュとプルアップロード...
異なるインデックスを更新してMySQLのデッドロックルーチンを解決する
前回の記事では、ソース コードを使用してロック関連の情報をデバッグする方法を紹介しました。ここでは、...
MacでDockerがホストマシンにpingできない問題を解決する
解決Docker for Macに付属するLinux仮想マシン（軽量ですが、ソケットファイルを使用し...
Reactにおけるコンポーネント通信の詳細な説明
目次親コンポーネントは子コンポーネントと通信します子コンポーネントは親コンポーネントと通信しますコン...
iframeを指すaタグのターゲットの名前とIDの違い
コードをコピーコードは次のとおりです。 <iframe id="myFrameId&...
JavaScript エラー処理 try..catch...finally + は throw+TypeError+RangeError をカバーします
目次1. 目的2. 文法3. 練習する1. 目的通常、エラーが発生すると、スクリプトは直ちに停止し、...
MYSQL開発パフォーマンス調査：バッチデータ挿入の最適化方法
1. どのような問題に直面しましたか?標準 SQL では、通常、次の SQL 挿入ステートメントを記...
WeChatアプレットの世界的な状況の詳細な説明
序文WeChat アプレットでは、App.js の globalData を中間ブリッジとして使用し...
仮想マシンUbuntu 16.04がインターネットに接続できない問題の解決策
Ubuntu をインストールしたばかりですが、開いたときにネットワーク接続がありませんでした。右上隅...
最もよく使われるHTMLエスケープシーケンス
HTML では、<、>、& などは特別な意味を持ち (<、> はリン...
VMware 15 を使用して仮想マシンをインストールし、CentOS 8 を使用する詳細な手順
序文：現在、Linux と .Net Core を学習しており、クロスプラットフォームの知識を学んで...