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

以下もご興味があるかもしれません: