この記事では、参考までに、加算計算機を実装するための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 が起動できない問題を解決する方法
目次1. psutilパッケージをインストールする次に、オペレーティングシステム内のすべてのサービス...
目次1. Baidu Map Open Platformにアカウントを登録してログインする2. 必要...
nginx をリバース プロキシとして使用する場合、リクエストをそのまま次のサービスに転送するだけで...
CSS の優先順位について話す前に、CSS とは何か、CSS が何に使用されるのかを理解する必要があ...
目次1. デフォルトで表示と非表示を切り替える2. スライドして表示と非表示を切り替える3. フェー...
MySQL を使用する場合、日付は通常、datetime や timestamp などの形式で保存さ...
どの DBMS でも、インデックスは最適化にとって最も重要な要素です。データ量が少ない場合、適切なイ...
Redisイメージをダウンロードする docker pull yyyyttttwww/redis を...
1. 環境と関連ソフトウェア仮想マシン: VMwore Workstation Linuxシステム:...
目次1.配列を初期化する2. 配列の合計、最大値、最小値3. エラー値をフィルタリングする4. 論理...
MySQL_8.0.2のオフラインインストール方法は参考までに。具体的な内容は以下のとおりです。次の...
この記事では、WeChatアプレットの左右連動を実現するための具体的なコードを参考までに紹介します。...
効果画像: 1. はじめに独自のアプレットでこのような機能を実装する必要がある1. 核となる考え方ス...
以前は、フロートはレイアウトによく使用されていましたが、フローティングレイアウトを使用すると親要素の...
目次序文🍹準備🍲vue3 の使い方🍖 実装要約する序文最近、私の最初の公式 vue3 + ts プロ...