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 仮想マシンのインストールとネットワーク構成のグラフィックチュートリアル
コードをコピーコードは次のとおりです。 <html> <ヘッド> <m...
背景Docker の人気は、コンテナの共有と移植が容易であることと密接に関係しています。ユーザーは、...
これらはすべて海外のE-WebTemplates WebサイトからのWebページテンプレートであり、...
方法1:リスピンを使用するには、次の手順に従ってください。 sudo add-apt-reposit...
データを整理するためのリストWeb ページの表示を制御する多数の HTML タグを学習した後、読者は...
MySQL タイム ブラインド インジェクションの 5 つの遅延方法 (PWNHUB の予期しない解...
最近のブラウザでは、CSS 内で JavaScript を実行することはできなくなりました。以前は、...
これは非常にシンプルな純粋な CSS3 の白い雲の浮遊する背景効果です。浮かぶ白い雲の特殊効果は、C...
まず、nginx コンテナ内の構造:コンテナを入力します: docker exec -it b511...
目次序文SVGを生成するSVGスプライトの紹介プロジェクトアイコンを取得するプロジェクトのセットアッ...
テーブル ヘッダーでは、明るい境界線の色を個別に定義できます。基本的な構文<TH ボーダーカラ...
目次[例を見る]: 【本来の効果は以下の通り】理由は次のとおりです。 【解決】:要約するBootSt...
この記事では、Amapを使用して都市の位置特定を実現するVueの具体的なコードを参考までに共有します...
この記事では、JavaScriptで簡単な画像切り替えを実現するための具体的なコードを参考までに紹介...
概要:ファイルシステム モジュールは、標準の POSIX ファイル I/O 操作セットをラップしたシ...