シンプルな加算計算機の 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 が起動できない問題を解決する方法
推薦する
マウスが画像のハイパーリンク上を通過するときに画像のサイズ（幅、高さ）を変更する CSS
マウスが画像の上を通過したときに画像のハイパーリンクを変更する方法:コードをコピーコードは次のとおり...
デザイナーが再びハマーの公式サイトに不満を述べる
昨年、この公開書簡は大ヒットし、羅永浩氏を驚かせた。今日、著者が新しい章を発表するとは思ってもみなか...
HTML+CSS マージテーブル境界線サンプルコード
table タグと td タグに境界線を追加すると、デフォルトでは次のように二重境界線が使用されます...
secure_file_priv nullの問題を解決する
secure_file_priv = ' '；管理者としてcmdを実行します。 my...
Layui は複数条件クエリのサンプルコードを実装します
最近ファイルシステムを作ったのですが、フィールドが多すぎることに気づきましたページングを使用した複数...
MySQL無料インストール版を解凍した後にパスワードが見つからない問題を解決する方法
1. mysql-8.0.21-winx64を解凍する2. 環境変数を設定し、アドレスをbinフォル...
XHTML チュートリアル: Transitional と Strict の違い
実際、XHTML 1.0 は、Transitional DOCTYPE と Strict DOCTY...
表に斜めヘッダー効果を出す5つの方法
誰もがテーブルをよく知っているはずです。コード内でよく見かけます。テーブルにスラッシュ ヘッダーを追...
MySQL シリーズ 6 のユーザーと認証
目次チュートリアルシリーズ1. ユーザー管理1. ユーザーアカウント2. アカウントの追加と削除3....
15 分で学べる並列アーティファクト GNU Parallel 入門ガイド
GNU Parallel は、1 台以上のコンピューター上で計算タスクを並列に実行するためのシェル ...
Linux は suid vim.basic ファイルを使用して権限昇格を実現します。
カリで再現まず、必要なvim.basicファイルにsuid権限を設定します。 chmod u+s /...
MySQLクエリステートメントの簡単な操作例
この記事では、例を使用して、MySQL クエリ ステートメントの簡単な操作を説明します。ご参考までに...
MySQL の 4 つのトランザクション分離レベルを例を使って分析する
序文データベース操作では、同時データ読み取りの正確性を効果的に保証するために、トランザクション分離レ...
MySQL マスタースレーブレプリケーションの役割と動作原理の詳細な説明
1. マスタースレーブレプリケーションとは何ですか?マスタースレーブレプリケーションは、スレーブデー...
Node.js+express+socket でオンラインのリアルタイム多人数チャットルームを実現
この記事では、オンラインリアルタイム多人数チャットルームを実現するためのNode.js+expres...