シンプルな加算計算機の 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 が起動できない問題を解決する方法
推薦する
Vue3.0 手書き拡大鏡効果
達成される効果は、固定ズームが 2 倍になり、マウスが左側の画像領域に入るとマスク レイヤーが表示さ...
「さらに表示」ボタンによる複数行テキストの切り捨てに関する考察
最近、たまたまこの小さな要件に遭遇しました。昔、JS を使用してこれを処理したことを覚えていますが、...
配列をフィルタリングするJavaScript
この記事では、配列フィルタリングを実装するためのJavaScriptの具体的なコードを参考までに紹介...
WeChatミニプログラムでの仮想リストの実装例
目次序文分析する初期レンダリング方法初期最適化さらなる最適化方法2序文ほとんどのミニプログラムには、...
Mysql 自己結合クエリ例の詳細な説明
この記事では、Mysql の自己結合クエリについて説明します。ご参考までに、詳細は以下の通りです。自...
MySQLトランザクションとMySQLログの詳細な説明
取引特性1. アトミック性: トランザクションの開始後、すべての操作が完了するか、まったく実行されな...
Vue3 における provide と inject の使用法と原則
序文：親コンポーネントと子コンポーネント間でデータを渡す場合、通常は props と emittin...
MySQL はどのようにしてマスターとスレーブの一貫性を確保するのでしょうか?
目次MySQLマスタースレーブの基本原理3つのbinlog形式の比較混合形式のバイナリログが存在する...
Ubuntu Linux に Git と GitHub をインストールして使用する
Git 入門Git は、Linux(R) カーネル開発の管理を支援するために 2005 年に Lin...
CSS でハニカム/六角形アトラスを実装するためのサンプルコード
理由は分かりませんが、UIではハニカム効果（手を広げたような効果）のデザインが好まれます。 1. 六...
Ubuntu 20.04 Firefox でビデオを再生できない (Flash プラグインがない) 場合の解決策
1. Flashプラグインパッケージのダウンロードアドレス: https://get.adobe.c...
Prometheusコンテナのデプロイメントのための実用的なソリューション
環境ホスト名IPアドレス仕えるプロメテウス192.168.237.137プロメテウス、グラファナノー...
JavaScript 開発における標準コミットメッセージの重要性の詳細な説明
目次標準コミットメッセージの重要性コミットするコミットリント依存関係をインストールする.commit...
Vueのログインとログアウトの詳細な説明
目次ログインビジネスプロセスログイン機能の実装要約するまず、エフェクトの実装プロセスを見てみましょう...
mysqladmin を使用して MySQL インスタンスの現在の TPS と QPS を取得する方法
mysqladmin は管理と操作を行う公式の mysql クライアント プログラムです。MySQL...