この記事の例では、計算機機能を実装するためのjsの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。 先生の指導のもと、この簡単な計算機を完成させました。魔法のようなプロセスでした。計算機の基本機能はすべて揃っています。シンプルな電卓ですが、初心者には強い論理的判断能力が必要です。条件がたくさんあります。開発者として、常に設計上のバグを探し、ユーザーのニーズを常に改善する必要があります。これらすべてに明確な論理的推論と判断が必要です。少し圧倒されています。 <!DOCTYPE html> <html> <head lang="ja"> <メタ文字セット="UTF-8"> <title>電卓</title> <スタイル> *{ パディング:0; マージン:0; } テーブル{ 幅:400ピクセル; マージン:自動; border:1px 純銀色; border-collapse: collapse;/*列間の間隔*/ } td { 幅: 100ピクセル; 境界線: 1px 実線 #525252; } td入力{ 幅:98.7%; 高さ:60px; アウトライン: なし; テキスト配置: 右; フォントサイズ: 20px; 背景: rgba(251, 255, 227, 0.81); } td ボタン{ 幅:100%; 高さ:60px; フォントサイズ: 22px; 背景: rgba(223, 255, 243, 0.81); } </スタイル> </head> <本文> <テーブル> <tr> <td colspan="4" ><input id="text" type="text" value="0" /></td> </tr> <tr> <td colspan="2"><button class="btn">削除</button></td> <td colspan="2"><button class="btn">c</button></td> </tr> <tr> <td><button class="btn">9</button></td> <td><button class="btn">8</button></td> <td><button class="btn">7</button></td> <td><button class="btn">+</button></td> </tr> <tr> <td><button class="btn">6</button></td> <td><button class="btn">5</button></td> <td><button class="btn">4</button></td> <td><button class="btn">-</button></td> </tr> <tr> <td><button class="btn">3</button></td> <td><button class="btn">2</button></td> <td><button class="btn">1</button></td> <td><button class="btn">*</button></td> </tr> <tr> <td><button class="btn">0</button></td> <td><button class="btn">.</button></td> <td><button class="btn">=</button></td> <td><button class="btn">/</button></td> </tr> </テーブル> <!--<span id="m">8</span>--> <スクリプト> /* var M = document.getElementById("m"); コンソールにログ出力します。 console.log(M.innerText);*/ //ボタンを取得します var buttonal = document.getElementsByClassName ("btn"); var textal = document.getElementById("テキスト"); var res=[]; //入力値を格納する配列を定義します。var label=false; for(var i=0;i<buttonal.length;i++){ ボタン [i].onclick=addclick; 関数addclick(){ // 入力は数字または「.」です。 if(!isNaN(this.innerHTML) || this.innerHTML=="."){ //テキストボックスの初期値は0ではありません ラベル = true; if(textal.value!== "0"){ //テキストボックスには「.」が含まれています。 if(textal.value.indexOf(".")!==-1){ //重複ポイントの問題を処理します。テキスト ボックス内にクリックできないポイントがあります (ユーザーが押した数字を追加する必要があり、ユーザーがポイントを押しても追加されない) // "." を入力する場合if(this.innerHTML!== "."){ textal.value+=this.innerHTML; } } それ以外{ textal.value+=this.innerHTML; } } //テキストボックスの初期値は0です それ以外{ if(this.innerHTML == "."){ テキスト値 = "0" + this.innerHTML; } それ以外{ テキスト値 = this.innerHTML; } } } //数字以外{ スイッチ(this.innerHTML) { case "+" :これを保存してください。 壊す; case "-" :save(this); 壊す; case "/" :save(これを); 壊す; case "*":これを保存してください。 壊す; ケース "=": res.push(テキスト値); var result = eval(res.join("")); if(結果 == "無限大"){ remove_add("削除"); } textal.value=result==無限大?"除数はゼロにできません":result; //console.log(res.join("")); 解像度 = []; 壊す; ケース「del」: //後ろから前に向かって数字を 1 つずつ減算します。substr(start,count) substring(start,end) end は取得されません。textal.value = textal.value.length==1 ? "0":textal.value.substr(0,textal.value.length-1); 壊す; ケース「c」: テキスト値="0"; 解像度=[]; remove_add("追加"); 壊す; } } } } 関数 save(mini){ // 画面をクリアする前にユーザーが押した値を保存します // ユーザーが記号を連続して押したか、数字 + 記号を押したかの条件を確認しますif(!label){ // 記号を連続して 2 回押した場合res[res.length-1]=mini.innerHTML; // 2 番目に押された記号が最初の記号に置き換わります} それ以外{ res.push(テキスト値); res.push(mini.innerHTML); } テキスト値="0"; ラベル=偽; } //c関数remove_add(p)以外のすべてのイベントをアンロードします{ for(var i=0;i<buttonal.length;i++){ if(p == "追加"){ ボタン[i].onclick = addclick; } それ以外{ if(ボタン[i].innerHTML!="c"){ ボタン[i].onclick = null; } } } } </スクリプト> </本文> </html> 効果画像: 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL 20 の高性能アーキテクチャ設計原則 (収集する価値あり)
>>: Ubuntu 20.04の新バージョンでルートユーザーを使用してシステムにログインする方法の詳細なチュートリアル
replace ステートメントは、一般的に insert ステートメントに似ています。ただし、テーブ...
JavaScript ではオブジェクトを走査する順序は固定されていないと聞いたことがある人もいるかも...
目次標準コミットメッセージの重要性コミットするコミットリント依存関係をインストールする.commit...
<br />長年の専門的なアートデザイン教育を通じて「美とは何か」を学びましたが、「美を...
目次序文1. gzip圧縮を設定する2. 詳細設定3. nginxサービスを再起動する要約する序文ウ...
目次1. インストール2. vue2でEchartsを使用するmain.jsファイル内コンテナが与え...
実際のプロジェクト開発プロセスでは、ページがサーバーにアップロードされます。サーバーへの負荷を軽減し...
序文ヒント: ここで、この記事に記録するおおよその内容を追加できます。例えば、人工知能の継続的な発展...
1. 括弧の役割1.1 角括弧 [ ]属性名が角括弧で囲まれている場合、右側には式の値が割り当てられ...
1. データベースを作成します。 データ data _name を作成します。 PHP でデータベー...
目次1. Vue ライフサイクル2. フック機能2.1 4つの段階と8つの方法に分かれています。 2...
取引特性1. アトミック性: トランザクションの開始後、すべての操作が完了するか、まったく実行されな...
この記事では、React Native ScrollViewのプルダウンリフレッシュ効果の具体的なコ...
以下に示すように、あなたならどのようにそれを達成しますか: 通常、フォントアイコンを使用して中央にプ...
この記事では、簡単なパズルゲームを実装するためのjsの具体的なコードを参考までに共有します。具体的な...