この記事では、JavaScriptシミュレーション計算機の具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。 関数: 1.ボタンをクリックして番号を入力します 使用される知識ポイント: 1. 多数のカスタム関数を使用してビジネスロジックを実装する 総合演習の目的: 1. CSS、HTML、JSを効果的に組み合わせてビジネス機能を実現する そして最近 js を学び始めたのですが、とても興味深いです。Java の基礎を学んでいたときは、それほど興味がありませんでした。初めて使い始めたとき、js はとても興味深いと感じました。以下は簡単な計算機のソース コードです。 html ページ: <!DOCTYPE html> <html> <ヘッド> <title>js 計算機</title> <link rel="スタイルシート" type="text/css" href="index.css" > <script type="text/javascript" src="index.js"> </スクリプト> </head> <body onload="init()"> <!-- 1 つのテキスト ボックス、10 個の数字、... 20 個のボタン --> <div id="div1"> <フォームアクション=""> <div id="div2"> <input type="text" name="num" disabled="無効" id="num" value="0"> </div> </フォーム> <div id="div3"> <input type="button" name="" value="C" id="baidu"> <input type="button" name="" value="←" id=""> <input type="button" name="" value="+/-" id=""> <input type="button" name="" value="/" id=""> <input type="button" name="" value="7" id=""> <input type="button" name="" value="8" id=""> <input type="button" name="" value="9" id=""> <input type="button" name="" value="*" id=""> <input type="button" name="" value="4" id=""> <input type="button" name="" value="5" id=""> <input type="button" name="" value="6" id=""> <input type="button" name="" value="-" id=""> <input type="button" name="" value="1" id="" > <input type="button" name="" value="2" id="" > <input type="button" name="" value="3" id="" > <input type="button" name="" value="+" id=""> <input type="button" name="" value="0" id=""> <input type="button" name="" value="=" id=""> <input type="button" name="" value="." id=""> <input type="button" name="" value="AC" id=""> </div> </div> </本文> </html> js ページ: 関数init(){ var num = document.getElementById("num"); 数値=0; var btn_num1; var fh; num.disabled="無効"; // var n1=document.getElementById("n1"); //n1.onclick=関数(){ // } var oButton = document.getElementsByTagName("input"); for(var i=0;i<oButton.length;i++){ oButton[i].onclick=関数(){ if (isnumber (this.value)) { //num.value=(num.value+this.value)*1; //デフォルトの0を削除する if(isNull(num.value)){ num.value=この値; }それ以外{ 数値=数値+この値; } }それ以外{ //関数が正しいかどうかをテストする// alert("bushishuzi") var btn_num = this.value; //関数が正しいかどうかをテストする(ポップアップウィンドウ) // アラート(btn_num); スイッチ(btn_num){ ケース「+」: // アラート(11); btn_num1=num.value*1; //=parseInt(num.value) これもOKですが、次の単語をnumberに変更する必要があります。 数値=0; fh="+"; 壊す; 場合 "-": btn_num1 = 数値*1; 数値=0; fh="-"; 壊す; 場合 "*": btn_num1 = 数値*1; 数値=0; fh="*"; 壊す; 場合 "/": btn_num1 = 数値*1; 数値=0; fh="/"; 壊す; 場合 "。": num.value=dec_number(num.value); 壊す; ケース「←」: num.value=back(num.value); 壊す; ケース「+/-」: num.value=sign(num.value); 壊す; ケース「AC」: 数値 = "0"; 壊す; ケース「C」: init_baidu(); 壊す; ケース "=": スイッチ(fh){ ケース"+": 数値=btn_num1+数値*1; 壊す; 場合"-": num.value=btn_num1-num.value*1; 壊す; 場合"*": 数値=btn_num1*数値*1; 壊す; 場合"/": if(数値==0){ 数値=0; alert("除数は 0 にできません"); }それ以外{ num.value=btn_num1/num.value*1; } 壊す; } 壊す; } } } } } //小数点関数 function dec_number(n){ if(n.indexOf(".")==-1){ n=n+"."; } n を返します。 } //テキストボックスが空または0であることを確認します 関数isNull(n){ n*1==0||n.length==0の場合{ true を返します。 }それ以外{ false を返します。 } } //戻るキー関数back(n){ n = n.substr(0,n.length-1); if (isNull(n)) { 0 の場合 } n を返します。 } //正負の符号 +/- 関数 sign(n){ if(n.indexOf("-")==-1){ n="-"+n; }それ以外{ n = n.substr(1,n.length); } n を返します。 } //isNaN: 数値に変換できない: true、数値に変換できる: false 関数isnumber(n){ !isNaN(n) を返します。 } //ボタン C は Baidu へのハイパーリンクを使用します。これは自由に使用できます。function init_baidu(){ window.location.href="http://www.baidu.com"; } CSS ページ: *{ マージン:0px; パディング:0px; } div{ 幅:170ピクセル; } #div1{ 上:60px; 左: 100px; 位置:絶対; } 入力[type="button"]{ 幅:30px; 右マージン: 5px; } 入力[type="text"]{ 幅:147ピクセル; テキスト配置: 右; 背景色:白; 境界線:1px実線; パディング右:1px; ボックスのサイズ:コンテンツボックス; } input[type="button"]:hover{/*//疑似クラスとボタンの使用*/ 背景色:白; 境界線:1px実線; } 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Ubuntuの基本設定: openssh-serverのインストールと使用
>>: MySQL 5.7.18 バージョンの無料インストール構成チュートリアル
目次エフェクト表示コードリンクキーコード表形式データコンポーネントのネスト検証方法リセット方法完全な...
sshツールをインストールする1. ターミナルを開き、次のコマンドを入力します。 apt-getアッ...
時間に余裕を持って、過去を忘れましょう。前のセクションでは、[検索] フォームとクエリおよびリセット...
1. コマンドの紹介usermod (ユーザー変更) コマンドは、ユーザー アカウントを変更するため...
Web ページでは、あるページに情報を入力すると、別のページにジャンプし、入力した情報が別のページ...
目次1. テスト環境1.1 ハードウェアとソフトウェア1.2 テーブル構造2. テストの目的2.1 ...
序文この記事では、Linux 構成ログ サーバーに関する関連コンテンツを主に紹介し、参考と学習のため...
MySQL インデックスの確立は、MySQL の効率的な操作にとって非常に重要です。インデックスによ...
目次1. 問題のあるSQL文たとえば、次の図のような質問をした人がいました。 問題は次のように要約で...
最近、Vue のソースコードを勉強していて、Vue で親コンポーネントと子コンポーネント間でデータを...
序文リバース プロキシは、Web 経由で行われたリクエスト (http と https の両方) を...
1. まずテーブル作成ステートメントを見てみましょう テーブル学生を作成( sid int 主キー ...
目次1. 元の値と参照値2. インスタンス3. 範囲1. 元の値と参照値6 つの単純なデータ型の値は...
目次1. インデックスと変数の賢い使用1. インデックスなしの比較テスト2. created_tim...
序文通常、大量のデータを扱う MySQL クエリには「ページング」戦略が採用されます。ただし、ページ...