この記事は主にJavaScriptを使用してWeb計算機を実現する効果を記録し、参考として掲載しています。具体的な内容は次のとおりです。 簡単に言うと、コードは次のようになります。 まず HTML コードです: <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>js を使用して Web 計算機を実装する</title> <link rel="スタイルシート" href="cal.css" > </head> <本文> <div id="コンテナ" class="コンテナ"> <input id="結果" class="結果"> <div id="cal" class="clearfix"> <div id="num" class="fl"> <div id="top" class="clearfix"> <input id="クリア" type="ボタン" 値="C"> <input id="antonyms" type="button" value="+/-"> <input id="残り" type="button" value="%"> </div> <div id="bonttom" class="clearfix"> <入力タイプ="ボタン" 値="7"> <入力タイプ="ボタン" 値="8"> <入力タイプ="ボタン" 値="9"> <入力タイプ="ボタン" 値="4"> <入力タイプ="ボタン" 値="5"> <入力タイプ="ボタン" 値="6"> <入力タイプ="ボタン" 値="1"> <入力タイプ="ボタン" 値="2"> <入力タイプ="ボタン" 値="3"> <input class="zero" type="button" value="0"> <input type="button" value="."> </div> </div> <div id="math" class="fr math"> <input type="button" value="/" onclick="onclicknum('/')"> <input type="button" value="*" onclick="onclicknum('*')"> <input type="button" value="+" onclick="onclicknum('+')"> <input type="button" value="-" onclick="onclicknum('-')"> </div> <input id="res" type="button" value="="> </div> </div> </本文> </html> 次は CSS スタイル コードです。 * { マージン: 0px; パディング: 0px; } .clearfix:before、.clearfix:after { コンテンツ: ''; 表示: ブロック; } .clearfix:後{ クリア: 両方; } .clearfix { _ズーム: 1; } 入力{ 表示: ブロック; } 。容器 { 幅: 240ピクセル; 高さ: 400px; 境界線: 2px 実線 #eb4509; マージン: 100px 自動; } .fl { フロート: 左; } .fr { フロート: 右; } 入力{ 幅: 60ピクセル; 高さ: 60px; 境界線: 1px実線 #000; フロート: 左; 背景: #ddd; フォントサイズ: 24px; 色: #eb4509; -webkit-box-sizing: 境界線ボックス; -moz-box-sizing: 境界線ボックス; ボックスのサイズ: 境界線ボックス; } .math 入力 { フロート: なし; } 入力.ゼロ{ 幅: 120ピクセル; } #番号{ 幅: 180ピクセル; } #cal #math { 幅: 60ピクセル; } 。結果 { 幅: 100%; 高さ: 100px; 行の高さ: 100px; 境界線: なし; 背景色: #dfdfdf; フォントサイズ: 30px; フロート: なし; アウトライン: なし; テキスト配置: 右; 右パディング: 20px; -webkit-box-sizing: 境界線ボックス; -moz-box-sizing: 境界線ボックス; ボックスのサイズ: 境界線ボックス; } 最後に、js コード: <script type="text/javascript"> var 数値結果; var 文字列; var フラグ; var bot = document.getElementById("bonttom"); var botInputs = bot.getElementsByTagName("入力"); var clear = document.getElementById("clear"); var res = document.getElementById("res"); var math = document.getElementById("math"); var mathInputs = math.getElementsByTagName("入力"); var antonymsBtn = document.getElementById("antonyms"); var 残りBtn = document.getElementById("残り"); //数字をクリックして、加算、減算、乗算、除算を実行します。 imporIn(botInputs); // 数学入力をインポートします。 関数imporIn(eles) { (var i = 0; i < eles.length; i++) の場合 { eles[i].onclick = 関数 () { onclicknum(この値); } } } //cボタンをクリアするにはクリックします clear.onclick = function () { クリッククリア(); } //=記号をクリックして結果を取得します res.onclick = function () { クリック結果(); } //+/-をクリック antonymsBtn.onclick = 関数 () { 反意語(); } //クリック % 残りBtn.onclick = 関数(){ 残り(); } 関数 onclicknum(nums) { if (フラグ) { console.log("num=" + 数値); if (数値 !== "/" && 数値 !== "+" && 数値 !== "-" && 数値 !== "*") { str.value = ""; console.log("aa" + 数値); } } フラグ = false; str = document.getElementById("結果"); str.value = str.value + nums; } //クリア関数 onclickclear() { str = document.getElementById("結果"); str.value = ""; } //結果を取得する関数 onclickresult() { str = document.getElementById("結果"); numresult = eval(str.value); str.value = numresult; フラグ = true; } //正と負の数関数antonyms() { str = document.getElementById("結果"); str.値 = -str.値; } //% 関数の剰余() { str = document.getElementById("結果"); str.値 = str.値 / 100; } </スクリプト> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: VMware で VMware ツールをインストールしてもインストール ファイルが表示されない問題を解決する方法
メタタグ機能METAタグは、HTMLタグのHEAD領域にある重要なタグです。文書の文字セット、使用言...
この記事では、例を使用して MySQL コマンドライン スクリプトの実行について説明します。ご参考ま...
CSS には多くの属性があります。特に複数の値を設定する必要がある属性は、長期間使用しないと忘れられ...
目次確認する:例の検証と組み合わせるselect クエリ ステートメントはロックされませんが、sel...
MySQL のバージョン番号は 5.7.28 です。テーブル A には 390 万件のレコードがあり...
現在、プロジェクトの要件により、フォームの送信を制御し、送信前にデータを検証および処理するために j...
最近、問題のある新しい SQL が本番データベースに入力される数を最小限に抑えるために、開発仕様を整...
アリアルArial は、多くの Microsoft アプリケーションとともに配布されるサンセリフ T...
情報を探すインターネットで見つかったいくつかの方法: autocomplete="off&...
目次環境説明Windows 10 に Docker for Windows をインストールするWin...
現在では多くの人がスマートフォンを使用していることを考慮すると、モバイル Web ページの書き方は、...
目次Nginx 負荷分散構成Nginx 負荷分散戦略ポーリング(デフォルト)重さip_ハッシュ公正(...
最近では、多くのウェブサイトでは、ページ上の特定のコンテンツや情報を直接コピーすることは許可されてお...
tomcat はオープンソースの Web サーバーです。Tomcat ベースの Web は実行効率...
構造化テーブル (IExplore のみ) 1) 行ごとにグループ化<thead> .....