シンプルな加算計算機の 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 が起動できない問題を解決する方法
推薦する
HTML での非同期ファイルアップロードの例
コードをコピーコードは次のとおりです。 <form action="/hehe&qu...
CSS3 アニメーション ボールローリング JS コントロールアニメーション一時停止
CSS3 はアニメーションを作成でき、多くの Web ページのアニメーション画像、Flash アニメ...
Facebook によるインターネット サービスのほぼ完璧な再設計
<br />出典: http://www.a-xuan.cn/?p=197 先ほどFac...
Mysqlクエリ条件で文字列の末尾にスペースがあっても一致しない問題の詳細な説明
1. テーブル構造テーブル人id名前1あなた2あなた（スペース） 3あなた（スペース2つ） 2. ク...
Vue + Axios リクエストインターフェース方式とパラメータ渡し方式の詳しい説明
目次1. リクエストを取得する: 2. 投稿リクエスト: 3. 拡張と補足Vue スキャフォールディ...
シンプルなjQuery + CSSを使用してカスタムタグタイトルツールチップを作成します
導入シンプルな jQuery + CSS を使用して、ブラウザのデフォルトの動作を置き換えるカスタム...
MySQL ストアド プロシージャの作成、呼び出し、管理の詳細な説明
目次ストアドプロシージャの概要ストアド プロシージャを使用する理由は何ですか?ストアドプロシージャの...
MySQL の集計関数 count の使用法とパフォーマンスの最適化テクニック
この記事の環境はWindows 10、MySQLのバージョンは5.7.12-logです1. 基本的な...
npmとcnpmを混在させる際の落とし穴の詳細な説明
目次原因理由NPM の紹介: CNPM の紹介:より良い方法方法の改善npm と cnpm を一緒に...
ラムダ式の原則と例
ラムダ式ラムダ式 (クロージャとも呼ばれる) は、Java 8 のリリースを推進した最も重要な新機能...
Linux で FTP イメージ サーバーをインストールして展開する方法
Linux で FTP サーバーを設定するためのチュートリアルを参照してください https://w...
OracleデータをMySQLデータベースに抽出する実装プロセス
Oracle データベースから MySQL データベースへの移行では、Oracle データベース モ...
Win10 構成 Tomcat 環境変数チュートリアル図
設定する前に、次の操作を行う必要があります。 1. まずjdk bloggerをインストールします。...
nginx は画像表示の遅さとダウンロードの不完全さの問題を解決します
前面に書かれた最近、ある読者から、ブラウザからサーバーにアクセスすると、画像の表示が遅く、ブラウザに...