シンプルな加算計算機の JavaScript 実装
|
この記事では、参考までに、加算計算機を実装するためのJavaScriptの具体的なコードを紹介します。具体的な内容は次のとおりです。 具体的な要件:
1. ページレイアウト: 具体的な実装:
<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="最終計算結果:"+
結果;
}それ以外の場合(type==2){
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: 550px;">
番号 1: <input id="num1" type="number" placeholder="番号 1 を入力してください">
</div>
</div>
<div>
<div class="innerDiv" style="margin-left: 550px;">
番号 2: <input id="num2" type="number" placeholder="番号 2 を入力してください">
</div>
</div>
<div>
<div style="margin-left: 600px;" class="innerDiv">
<input type="button" onclick="myck(1)" value="計算">
<input type="button" onclick="myck(2)" value="クリア">
</div>
</div>
<div id="resultDiv">
</div>
</本文>
<スタイル>
.innerDiv{
左マージン: 420px;
上マージン: 20px;
}
</スタイル>
</html>以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: 一時ファイルを作成できないために MySQL が起動できない問題を解決する方法
推薦する
Linuxサービスの監視と運用および保守
目次1. psutilパッケージをインストールする次に、オペレーティングシステム内のすべてのサービス...
Vue プロジェクトで Baidu Map API を使用する方法
目次1. Baidu Map Open Platformにアカウントを登録してログインする2. 必要...
プレフィックスケースを削除する Nginx リバース プロキシ構成のチュートリアル
nginx をリバース プロキシとして使用する場合、リクエストをそのまま次のサービスに転送するだけで...
CSS の優先順位に関する詳細な紹介
CSS の優先順位について話す前に、CSS とは何か、CSS が何に使用されるのかを理解する必要があ...
jQueryフレームワークは、要素の表示と非表示の3つのアニメーションメソッドを実装しています。
目次1. デフォルトで表示と非表示を切り替える2. スライドして表示と非表示を切り替える3. フェー...
MySQL での varchar 型の日付の比較、並べ替え、その他の操作の実装
MySQL を使用する場合、日付は通常、datetime や timestamp などの形式で保存さ...
MySQLの複合インデックス方式の詳細な説明
どの DBMS でも、インデックスは最適化にとって最も重要な要素です。データ量が少ない場合、適切なイ...
Docker ベースの Redis クラスターの構築方法
Redisイメージをダウンロードする docker pull yyyyttttwww/redis を...
Linux 環境での Oracle 導入チュートリアル
1. 環境と関連ソフトウェア仮想マシン: VMwore Workstation Linuxシステム:...
24 の実用的な JavaScript 開発のヒント
目次1.配列を初期化する2. 配列の合計、最大値、最小値3. エラー値をフィルタリングする4. 論理...
MySQL 8.0.2 オフラインインストールと設定方法のグラフィックチュートリアル
MySQL_8.0.2のオフラインインストール方法は参考までに。具体的な内容は以下のとおりです。次の...
WeChatアプレットが左右連携を実現
この記事では、WeChatアプレットの左右連動を実現するための具体的なコードを参考までに紹介します。...
WeChatアプレットタブの左右スライドスイッチ機能実装コード
効果画像: 1. はじめに独自のアプレットでこのような機能を実装する必要がある1. 核となる考え方ス...
CSS でフローティングにより親要素の高さが崩れる問題を解決するいくつかの方法
以前は、フロートはレイアウトによく使用されていましたが、フローティングレイアウトを使用すると親要素の...
vue3ソースコード解析の簡単な実装方法
目次序文🍹準備🍲vue3 の使い方🍖 実装要約する序文最近、私の最初の公式 vue3 + ts プロ...