HTML、CSS、JS を使用してシンプルな Web 計算機を作成する方法は? コンピュータには次の機能があります。
コンピュータ全体のフレーム: /*div スタイルを設定する*/ #表示div{ 境界線: 実線 1px; 境界線の半径: 5px; 幅: 350ピクセル; 高さ: 400px; テキスト配置: 中央; margin: auto;/*中央に設定*/ 上マージン: 50x; 背景色: rgb(214, 219, 190); } 入力ボックス: /*入力ボックスのスタイルを設定する*/ 入力[タイプ=テキスト]{ 上マージン: 20px; 幅: 290ピクセル; 高さ: 40px; フォントサイズ: 20px; } 入力ボタン: /*ボタンのスタイルを設定する*/ 入力[type=button]{ 幅: 60ピクセル; 高さ: 60px; 上マージン: 20px; 左マージン: 5px; 右マージン: 5px; フォントサイズ: 30px; フォントの太さ: 太字; フォントファミリー: "楷書"; } js コードを使用して、対応するビジネス ロジック操作を実行します。 <!--js コードを宣言--> <スクリプト> 関数テスト(btn){ //ボタンオブジェクトを取得します。var number = btn.value; //対応するビジネスロジックスイッチ(番号)を実行します{ ケース "=": document.getElementById("input").value を eval(document.getElementById("input").value); 壊す; ケース「c」: document.getElementById("入力").value=""; 壊す; デフォルト: //ボタンの値を入力ボックスに割り当てます。 document.getElementById("input").value+=number; 壊す; } } </スクリプト> コンピュータの組版に HTML を使用する: <本文> <div id="showdiv"> <input type="text" id="input" readonly="読み取り専用"><br> <input type="button" value="1" onclick="テスト(これ)"> <input type="button" value="2" onclick="test(this)"> <input type="button" value="3" onclick="テスト(これ)"> <input type="button" value="4" onclick="test(this)"><br> <input type="button" value="5" onclick="テスト(これ)"> <input type="button" value="6" onclick="テスト(これ)"> <input type="button" value="7" onclick="テスト(これ)"> <input type="button" value="8" onclick="test(this)"><br> <input type="button" value="9" onclick="test(this)"> <input type="button" value="+" onclick="テスト(これ)"> <input type="button" value="-" onclick="test(this)"> <input type="button" value="*" onclick="test(this)"><br> <input type="button" value="0" onclick="テスト(this)"> <input type="button" value="/" onclick="test(this)"> <input type="button" value="c" onclick="test(this)"> <input type="button" value="=" onclick="test(this)"> </div> </本文> 全体のコード: <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta http-equiv="X-UA-compatible" content="IE=edge"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <スタイル> /*div スタイルを設定する*/ #表示div{ 境界線: 実線 1px; 境界線の半径: 5px; 幅: 350ピクセル; 高さ: 400px; テキスト配置: 中央; margin: auto;/*中央に設定*/ 上マージン: 50x; 背景色: rgb(214, 219, 190); } /*入力ボックスのスタイルを設定する*/ 入力[タイプ=テキスト]{ 上マージン: 20px; 幅: 290ピクセル; 高さ: 40px; フォントサイズ: 20px; } /*ボタンのスタイルを設定する*/ 入力[type=button]{ 幅: 60ピクセル; 高さ: 60px; 上マージン: 20px; 左マージン: 5px; 右マージン: 5px; フォントサイズ: 30px; フォントの太さ: 太字; フォントファミリー: "楷書"; } </スタイル> <!--js コードを宣言--> <スクリプト> 関数テスト(btn){ //ボタンオブジェクトを取得します。var number = btn.value; //対応するビジネスロジックスイッチ(番号)を実行します{ ケース "=": document.getElementById("input").value を eval(document.getElementById("input").value); 壊す; ケース「c」: document.getElementById("入力").value=""; 壊す; デフォルト: //ボタンの値を入力ボックスに割り当てます。 document.getElementById("input").value+=number; 壊す; } } </スクリプト> <title>ドキュメント</title> </head> <本文> <div id="showdiv"> <input type="text" id="input" readonly="読み取り専用"><br> <input type="button" value="1" onclick="テスト(これ)"> <input type="button" value="2" onclick="test(this)"> <input type="button" value="3" onclick="テスト(これ)"> <input type="button" value="4" onclick="test(this)"><br> <input type="button" value="5" onclick="テスト(これ)"> <input type="button" value="6" onclick="テスト(これ)"> <input type="button" value="7" onclick="テスト(これ)"> <input type="button" value="8" onclick="test(this)"><br> <input type="button" value="9" onclick="test(this)"> <input type="button" value="+" onclick="テスト(これ)"> <input type="button" value="-" onclick="test(this)"> <input type="button" value="*" onclick="test(this)"><br> <input type="button" value="0" onclick="テスト(this)"> <input type="button" value="/" onclick="test(this)"> <input type="button" value="c" onclick="test(this)"> <input type="button" value="=" onclick="test(this)"> </div> </本文> </html> 結果: フロントエンド Web コンピューターの作り方を学んだはずです。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: VMWare 仮想マシン 15.X LAN ネットワーク構成チュートリアル図
>>: MySQLにおける区切り文字の定義と機能の詳細な説明
プロジェクトでは、現在地の緯度経度を取得したり、場所を検索して緯度経度情報を取得したりする必要があり...
jQuery を使用してフェードインとフェードアウト効果を完成させる前に、まずいくつかのコードを理解...
SVG は、さまざまな利点があるため、近年広く使用されています。残念ながら、WeChat ミニプログ...
MySQL パーティションテーブルの概要MySQL の人気が高まるにつれて、MySQL に保存される...
序文この記事では、主にWeb開発のためのクロスドメインソリューションを紹介し、参考と学習のために共有...
<br />原文: http://jorux.com/archives/what-is-...
最近、お客様から支援の依頼を受けました。管理されている通信コンピュータ ルームから、サーバーの 1 ...
目次1. 環境整備1.1 オペレーティング システムのバージョン1.2 ディスク容量1.3 ファイア...
シナリオ会社のプロジェクトはDockerでデプロイされています。原因不明ですが、コンテナが時々停止し...
なぜ?最も簡単に言えば、ピクセルは均等ではないということです。携帯電話に表示される写真はとても繊細に...
背景数日前、MySql でページングを行っていたときに、ページングに制限 0,10 を使用するとデー...
1. Pythonは起動時に自動的に実行されますPython の自己起動スクリプトがauto.pyで...
ajax の parsererror エラー (バックグラウンドからフロントエンドに送信される js...
目次JS スリーマウンテンズ同期 非同期同期と非同期の違い範囲、終了関数スコープチェーンブロックスコ...
目次1. グローバル beforeEach 1. グローバル beforeEach 2. 実装2. ...