この記事は主に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 ツールをインストールしてもインストール ファイルが表示されない問題を解決する方法
サーバーの画像が他のウェブサイトからホットリンクされると、サーバーの帯域幅とアクセス速度に影響します...
この記事では、reduce()、filter()、map()、every()、some()、spre...
この記事では、タブ切り替えを実装するためのVueの具体的なコードを例として紹介します。具体的な内容は...
VNodeとはvue.js には VNode クラスがあり、これを使用してさまざまな種類の vnod...
聞く: CSS を使用してハイパーリンクのスタイルを設定しましたが、ホバーしても機能しません。なぜこ...
<br />友人と話し合っていたとき、フレームワークのレイヤー設計の中で最も核となるのは...
シェル スクリプトで電子メールを作成する必要がある場合は、コマンド ラインから電子メールを送信する知...
方法1: SET PASSWORDコマンドを使用する mysql> username@loca...
この記事では、効率を向上させ、時間を節約することを願って、最も効果的な 6 つの方法を紹介します。 ...
アイデア: 最初にランダムに並べ替えてからグループ化します。 1. テーブルを作成します。 テーブル...
letter-spacing プロパティ: 文字間のスペース (文字間隔) を増減します。このプロ...
この記事では、棒グラフの動的な表示を実現するためのvue echartsの具体的なコードを参考までに...
Docker プロセス、メモリ、カップ消費量を表示dockerコンテナを起動し、dockerinsp...
MySQL はハッシュ インデックスと Btree インデックスをサポートしています。 InnoDB...
目次バインディングクラスインラインスタイルのバインディングバインディングクラス方法1:オブジェクト構...