HTML CSS および JavaScript を使用して、プラス、マイナス、ゼロの 3 つのボタンを備えたシンプルなカウンターを実装します。これらのボタンは、それぞれ 1 を加算、1 を減算、ゼロに戻す操作を実装します。まずは効果図を見てみましょう。 HTMLコード <div class="body"> <div class="text"> <font>カウンター</font> </div> <div class="count"> <span id="demo" class="ft"> 2 </span> </div> <div class="btn"> <button type="button" click="add()" class="btn1">+</button> <button type="button" click="zero()" class="btn2">ゼロ</button> <button type="button" click="sub()" class="btn1">-</button> </div> </div> CSSコード 。体 { 幅: 300ピクセル; 高さ: 500px; 背景色: #211d5a; 境界線の半径: 20px; ディスプレイ: フレックス; flex-direction: 列; アイテムの位置を中央揃えにします。 } 。文章 { フォントサイズ: 24px; 色: 白; 上マージン: 60px; テキストシャドウ: 2px 2px 2px #fff; } .count { 位置: 相対的; 幅: 200ピクセル; 高さ: 200px; 上マージン: 60px; 境界線: 10px 実線; 境界線の色: rgb(79, 59, 156); 境界線の半径: 50%; ディスプレイ: フレックス; } .ft { フォントサイズ: 100px; 色: #fff; /*左: 50%; 左マージン: -102px; 上マージン: 40px;*/ マージン: 自動; } .btn{ 幅: 220ピクセル; ディスプレイ: フレックス; /*フレックス方向: 行;*/ コンテンツの両端揃え: スペースの間; 上マージン: 60px; } .btn1 { 幅: 50px; 高さ: 30px; 境界線: 0px; 境界線の半径: 4px; 背景色: rgb(79, 59, 156); フォントサイズ: 20px; 色: #efdaff; } .btn2 { 幅: 50px; 高さ: 30px; 境界線: 0px; 境界線の半径: 4px; 背景色: rgb(79, 59, 156); フォントサイズ: 22px; 色: #efdaff; } ヒント: フレキシブル ボックス表示: フレックス レイアウト + マージン: 自動により、完璧な中央配置を実現できます。 JSコード <スクリプト> var counter = document.getElementById("demo").innerHTML; 関数add(){ カウンター++; document.getElementById("デモ").innerHTML = counter; } 関数sub() { if(カウンター == 0) { カウンター = 0; } それ以外 { カウンタ - ; document.getElementById("デモ").innerHTML = counter; } } 関数ゼロ() { カウンター = 0; document.getElementById("デモ").innerHTML = counter; } </スクリプト> 上記のコードで効果が得られます。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL テーブルを作成するためによく使用される SQL ステートメントの概要
>>: VMware CentOS 仮想マシンのインストールとネットワーク構成のグラフィックチュートリアル
背景データ ウェアハウス モデリングでは、何ら処理されていない元のビジネス レイヤー データは OD...
Mac を返却して以来、元のラップトップは使用されていません。このラップトップの構成は非常に良好で...
VMware Toolsをインストールすると、仮想マシンホスト間で①テキストをコピーして貼り付けるこ...
目次序文1. MySQLはSSL構成を有効にする1.1 SSLが有効になっているかどうかを確認する1...
ステップ 1: メモ帳を使用して、MySQL インストール ディレクトリの「my.ini」ファイルを...
この記事では、スローモーションアニメーション効果を実現するためのJavaScriptの具体的なコード...
jQueryを使用してフォーム検証を実装します。参考までに、具体的な内容は次のとおりです。登録.ht...
目次1. typeof演算子2. インスタンスオブ演算子3. typeof と instanceof...
<br />これは、Steven D が書いた Web フロントエンド開発デザインの基本...
目次1. はじめに2. フィルター() 3. マップ() 4. ソート() 5. 減らす() 6. ...
目次ブール型数値型文字列型文字列と数値を連結する未定義およびnull配列型タプル型列挙型あらゆるタイ...
負荷分散とは負荷分散は主に、専用のハードウェア デバイスまたはソフトウェア アルゴリズムによって実現...
RHEL8/CentOS8 に基づく一般的な nmcli コマンド # IP を表示する (ifco...
簡単に言うと、srcは「このリソースをロードしたい」という意味で、hrefは「このリソースに関連付け...
今日、MySQLサービス1067エラー問題に遭遇しました。システムアカウントを使用するように設定して...