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 が起動できない問題を解決する方法
推薦する
Dockerでイメージを削除する方法
dockerでイメージを削除するコマンドはdocker rmiですが、このコマンドを実行してもイメー...
Vue でキープアライブを使用した後にキャッシュをクリアする方法
キープアライブとは何ですか?通常の開発では、コンポーネントによっては複数回初期化する必要のないものも...
sbinディレクトリを生成せずにNginxをインストールするソリューション
エラーの説明: 1. Linux (CentOS 7 64) システムに Nginx (1.18.0...
Docker で MySQL データベースを使用して LAN アクセスを実現する
1. MySQLイメージを取得する docker pull mysql:5.6注: mysql5.7...
Docker Composeでコンテナ管理の問題を解決する
Docker の設計では、コンテナは 1 つのアプリケーションのみを実行します。しかし、現在のアプリ...
Linux で open-vswitch をインストールおよびアンインストールする方法
1. ソースコードからovsをコンパイルしてインストールします。依存関係をインストールします: # ...
XshellがvirtualBox仮想マシンに接続できない問題の解決策
まず、VirtualBox仮想マシンのネットワーク設定モードについて説明します。NAT+ホストオンリ...
エレメントアバターアップロード練習
この記事は、Element公式サイトとQiniu Cloud公式サイトを使用しています。 eleme...
JSX を使用してマークアップ コンポーネント スタイルの開発を作成する例 (フロントエンドのコンポーネント化)
目次JSX環境の構築NPMを初期化するwebpackをインストールするBabelをインストールするw...
Dockerでリモートアクセスを有効にする方法
DockerデーモンソケットDocker デーモンは、 unix 、 tcp 、 fdの 3 種類の...
純粋なCSSを使用してスクロールシャドウ効果を実現します
端的に言うと、スクロール可能な要素には非常によくある状況があります。通常、スクロールすると、要素が現...
Vue3ライフサイクル関数とメソッドの詳細な説明
1. 概要いわゆるライフサイクル機能とは、特定の条件下で自動的にトリガーされる機能です。 2. VU...
MySQLカスタム変数の概念と特徴
MySQL カスタム値は、値を保存するための一時的なコンテナです。サーバーへの接続がアクティブである...
CSS ですべての子要素を選択し、スタイルを追加する方法
方法：実際のプロジェクトを例に挙げてみましょう。 .lk-ツールバー{ .el-入力{ 幅: 169...
MySQL 上級学習インデックスの長所と短所、使用ルール
1. インデックスの利点と欠点利点: 高速検索、高速グループ化および並べ替えデメリット: ストレージ...