シンプルな加算計算機の 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 が起動できない問題を解決する方法
推薦する
MySQL主キー命名戦略関連
最近、データライフサイクル管理の詳細を整理していたときに、小さな問題を発見しました。それは、MySQ...
Linux で独自の Nexus プライベート サーバーを構築する方法
この記事では、Linuxサーバー上でDockerを使用してNexusプライベートサーバーを構築する方...
jQuery はラブエフェクトをクリックする
この記事では、jQueryのクリック時のラブエフェクトの具体的なコードを参考までに共有します。具体的...
JavaScriptを使用してページ効果を作成する
11. JavaScriptを使用してページ効果を作成する11.1 DOMプログラミングDOM プロ...
Win10 インストール Linux システム チュートリアル ダイアグラム
Windows システムに仮想マシンをインストールするには、 VMware Workstationソ...
ノードにおけるhttpモジュールの使用と実行プロセス
ノードにおけるhttpの役割は何ですか？ httpモジュールの役割は、サーバーの作成と記述を支援する...
Dockerがコンテナを作成した後にホスト名を変更する詳細なプロセス
後悔を癒す薬は世の中にある、考えてみる気さえあれば！コンテナを再作成する必要はもうありません。 m2...
MySQLの文字セットを変更する方法
1. MySQLの文字セットを確認する '%char%' のような変数を表示します。...
MySQLトリガーについて深く理解するための記事
目次1. SC テーブルを挿入または変更するときに、テスト スコアが 0 ～ 100 の範囲外の場合...
HTML の 5 種類のスペースの意味
HTML には、幅の異なる 5 つのスペース エンティティが用意されています。非改行スペース ( )...
DockerとFastDFSのインストールコマンドと使い方の詳しい説明
Dockerの機能1) すぐに始められるユーザーがプログラムを「Docker 化」するには、わずか数...
CSSはウェブページの列の左側が固定されていることを認識し、一番下までスクロールすると自動的に位置を調整します。
プレビューアドレス: https://ovsexia.gitee.io/leftfixed/ htm...
仮想マシンに Windows Server 2008 オペレーティング システムをインストールする
この記事では、Windows Server オペレーティング システムのインストールと企業でのそのア...
CSS のマージンの崩壊問題を解決する方法
まず、マージン崩壊が発生する 3 つの状況を見てみましょう。 1. 隣接する 2 つのブロックレベル...
win10 64 ビット システムに複数の JDK バージョンをインストールする際の切り替え問題と解決策の概要
コンピューターにmyeclipse2017とidea2017がインストールされているため、ideaが...