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はファイルのアップロードとダウンロードを実装します
この記事では、参考までにVueのファイルのアップロードとダウンロードの具体的なコードを紹介します。具...
MySQL 5.7.11 zip インストールと設定方法のグラフィックチュートリアル
1. MySQL 5.7.11 zipインストールパッケージをダウンロードするこのマシンはwin7 ...
SpringBoot でマイクロサービスを構築するために Docker を使用した実際の記録を分析する
それは何ですか？ Spring Boot は、Spring オープンソース組織のサブプロジェクトであ...
SQLデータベースの14の事例の紹介
データシート /* Navicat SQLite データ転送 ソースサーバー: school ソース...
HTML内のフレームセットタグが正常に表示されない原因の解析と解決方法
<frameset></frameset>は皆さんもよくご存知のものです。こ...
よく使用される HTML メタタグ属性 (Web サイトの互換性と最適化に必要)
元の URL: http://segmentfault.com/blog/ciaocc/119000...
Dockerfile に基づいて Tomcat イメージを構築する方法
Dockerfile は Docker イメージを構築するために使用されるファイルです。コマンドパラ...
Vue.jsは9グリッド画像表示モジュールを実装します
Vue.js を使用して、クリックしてズームできる 9 グリッドの画像表示モジュールを作成しました。...
Vueは複数の画像の追加、表示、削除を実装します
この記事では、Vueで複数の画像を追加、表示、削除するための具体的なコードを参考までに紹介します。具...
MySQL 5.6.22 のインストールと設定方法のグラフィックチュートリアル
このチュートリアルでは、MySQL5.6.22のインストールと設定方法の具体的なコードを参考までに共...
VirtualBox CentOS7.7.1908 Python3.8 ビルド Scrapy 開発環境 [グラフィックチュートリアル]
目次環境CentOSをインストールするyum 国内ミラーソースを構成するサードパーティの依存関係をイ...
MySQL パラメータ関連の概念とクエリ変更方法
序文：以前の記事では、特定のパラメータの機能についてよく紹介してきました。しかし、MySQL パラメ...
CSS ファンタスティックボーダーアニメーション効果の実装
今日、私はブログサイト shoptalkshow を閲覧していて、非常に興味深いこのインターフェース...
CSS3 を使用して中心点の周りに要素を配置する方法の例
この記事では、CSS3 を使用して中心点を中心に要素をレイアウトする方法の例を紹介します。詳細は次の...
MySQL 8.0.21 のインストールと設定方法のグラフィックチュートリアル
MySQL 8.0.21のインストールと設定方法を記録してみんなで共有します。 1. ダウンロード1...