JSはシンプルなカウンターを実装します

JSはシンプルなカウンターを実装します

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScriptはカウンターの基本メソッドを実装します
  • JavaScript を使って簡単なカウンターを作成する方法
  • カウンターはJavaScriptの下では1秒ごとに自動的に1ずつ増加します
  • JAVASCRIPTを使用してカウンターを書くのを手伝ってください
  • ネイティブJSは非常に見栄えの良いカウンターを実装します

<<:  MySQL テーブルを作成するためによく使用される SQL ステートメントの概要

>>:  VMware CentOS 仮想マシンのインストールとネットワーク構成のグラフィックチュートリアル

推薦する

Meituan DBデータをデータウェアハウスに同期するアーキテクチャと実践

背景データ ウェアハウス モデリングでは、何ら処理されていない元のビジネス レイヤー データは OD...

VMWare を使用して Windows 上で Linux 環境を構築する手順 (画像とテキスト)

Mac を返却して以来、元のラップトップは使用されていません。このラップトップの構成は非常に良好で...

CentOS 8 仮想マシンから Windows 10 ホスト フォルダーにアクセスする方法の簡単な分析

VMware Toolsをインストールすると、仮想マシンホスト間で①テキストをコピーして貼り付けるこ...

MySQL構成SSL証明書ログインの実装

目次序文1. MySQLはSSL構成を有効にする1.1 SSLが有効になっているかどうかを確認する1...

Windows システムの MySQL が中国語を入力および表示できない問題の解決方法

ステップ 1: メモ帳を使用して、MySQL インストール ディレクトリの「my.ini」ファイルを...

スローモーションアニメーション効果を実現するJavaScript

この記事では、スローモーションアニメーション効果を実現するためのJavaScriptの具体的なコード...

jQueryはフォーム検証を実装する

jQueryを使用してフォーム検証を実装します。参考までに、具体的な内容は次のとおりです。登録.ht...

データ型の判断における js typeof と instanceof の違いと、その開発と使用について

目次1. typeof演算子2. インスタンスオブ演算子3. typeof と instanceof...

ウェブタイポグラフィにおける致命的な意味的ミス 10 選

<br />これは、Steven D が書いた Web フロントエンド開発デザインの基本...

JavaScript配列の一般的なメソッドの概要

目次1. はじめに2. フィルター() 3. マップ() 4. ソート() 5. 減らす() 6. ...

TypeScriptの基本型の詳細な説明

目次ブール型数値型文字列型文字列と数値を連結する未定義およびnull配列型タプル型列挙型あらゆるタイ...

Nginx ロードバランシングとは何か、そしてそれをどのように設定するか

負荷分散とは負荷分散は主に、専用のハードウェア デバイスまたはソフトウェア アルゴリズムによって実現...

CentOS8でのnmcliの使い方の詳しい説明

RHEL8/CentOS8 に基づく一般的な nmcli コマンド # IP を表示する (ifco...

HTML における src と href の違いについての簡単な説明

簡単に言うと、srcは「このリソースをロードしたい」という意味で、hrefは「このリソースに関連付け...

MySQL サービス 1067 エラーの解決策: mysql 実行可能ファイルのパスを変更する

今日、MySQLサービス1067エラー問題に遭遇しました。システムアカウントを使用するように設定して...