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における区切り文字の定義と機能の詳細な説明
実験環境: MYSQL 5.7.22バイナリログを有効にするログ形式 MIXED実験プロセス: 1....
Linux で Ctrl+c、Ctrl+d、Ctrl+z はどういう意味ですか? Ctrl+c と ...
目次1. 基本的な文法2. 条件式によるフィルタリング3. 論理式によるフィルタリング4. あいまい...
毎回インストールチュートリアルを探すのは面倒なので、後で確認できるように手順をバックアップします。解...
通常、ターミナルでコマンドを実行する場合、別のコマンドの入力を開始する前に、現在のコマンドが終了する...
最近、ポーターを学んでいます。こんなに強力なものがあったなんて、今まで知らなかった気がします。クラス...
目次インストールコンポーネントのインポート基本的な使い方保存したマークダウンまたは HTML テキス...
この記事では、MySQL 5.7.24のインストールと設定のチュートリアルを参考までに紹介します。具...
1. <div></div> と <span></spa...
MongoDB はクロスプラットフォームであり、Windows と Linux の両方にインストール...
最近、WeChatアプレットを書いていたとき、WeChatアプレットではすべてのリクエストインターフ...
序文Oracle であれ MySQL であれ、新バージョンで導入された新機能は、一方では製品の機能性...
現在、CSS プリプロセッサは Web 開発の標準となっています。 プリプロセッサの主な利点の 1 ...
イベント応答の更新: 要求されたときのみ更新1. JS HTML DOM または jQuery を介...
目次クロスドメインの理由JSONP Nginxソリューションバックエンドソリューションクロスドメイン...