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 仮想マシンのインストールとネットワーク構成のグラフィックチュートリアル

推薦する

HTML入力ドロップダウンメニューを実装する方法

コードをコピーコードは次のとおりです。 <html> <ヘッド> <m...

Dockerコンテナのインポ​​ートとエクスポートに関するチュートリアル

背景Docker の人気は、コンテナの共有と移植が容易であることと密接に関係しています。ユーザーは、...

【Webデザイン】E-WebTemplates の美しい海外の Web ページ テンプレート (FLASH+PSD ソース ファイル+HTML) を共有します

これらはすべて海外のE-WebTemplates WebサイトからのWebページテンプレートであり、...

Ubuntuのバックアップ方法(4種類)のまとめ

方法1:リスピンを使用するには、次の手順に従ってください。 sudo add-apt-reposit...

ウェブページ HTML 順序付きリスト ol と順序なしリスト ul

データを整理するためのリストWeb ページの表示を制御する多数の HTML タグを学習した後、読者は...

MySQL タイムブラインドインジェクションの 5 つの遅延方法

MySQL タイム ブラインド インジェクションの 5 つの遅延方法 (PWNHUB の予期しない解...

CSSインジェクションの知識の要約

最近のブラウザでは、CSS 内で JavaScript を実行することはできなくなりました。以前は、...

CSS3 でシンプルな白い雲が浮かぶ背景効果を実現

これは非常にシンプルな純粋な CSS3 の白い雲の浮遊する背景効果です。浮かぶ白い雲の特殊効果は、C...

docker nginxコンテナの起動とローカルへのマウントの詳細な説明

まず、nginx コンテナ内の構造:コンテナを入力します: docker exec -it b511...

iconfontアイコンライブラリをvueに導入するエレガントな実践記録

目次序文SVGを生成するSVGスプライトの紹介プロジェクトアイコンを取得するプロジェクトのセットアッ...

HTML テーブル マークアップ チュートリアル (39): ヘッダーの明るい境界線の色属性 BORDERCOLORLIGHT

テーブル ヘッダーでは、明るい境界線の色を個別に定義できます。基本的な構文<TH ボーダーカラ...

BootStrap グリッド間に隙間を残す解決策

目次[例を見る]: 【本来の効果は以下の通り】理由は次のとおりです。 【解決】:要約するBootSt...

VueはAmapを使用して都市の位置特定を実現

この記事では、Amapを使用して都市の位置特定を実現するVueの具体的なコードを参考までに共有します...

シンプルな画像切り替えを実現するJavaScript

この記事では、JavaScriptで簡単な画像切り替えを実現するための具体的なコードを参考までに紹介...

Node.js の fs モジュールと Path モジュールのメソッドの詳細な説明

概要:ファイルシステム モジュールは、標準の POSIX ファイル I/O 操作セットをラップしたシ...