ネイティブJSは非常に見栄えの良いカウンターを実装します

今日は、ネイティブ JS で実装された見栄えの良いカウンターを紹介します。効果は次のとおりです。

以下はコード実装です。コピーして貼り付け、収集していただいて結構です。

<!DOCTYPE html>
<html lang="ja">
 
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ネイティブ JS で見栄えの良いカウンターを実装</title>
    <スタイル>
        * {
            フォント ファミリ: 'Microsoft YaHei'、サンセリフ;
            ボックスのサイズ: 境界線ボックス;
            マージン: 0;
            パディング: 0;
        }
 
        体 {
            ディスプレイ: フレックス;
            コンテンツの中央揃え: 中央;
            アイテムの位置を中央揃えにします。
            最小高さ: 100vh;
            背景: #000d0f;
        }
 
        。容器 {
            位置: 相対的;
            幅: 80ピクセル;
            高さ: 50px;
            境界線の半径: 40px;
            境界線: 2px実線 rgba(255, 255, 255, 0.2);
            遷移: 0.5秒;
        }
 
        .コンテナ:ホバー{
            幅: 120ピクセル;
            境界線: 2px実線 rgba(255, 255, 255, 1);
        }
 
        .コンテナ .next {
            位置: 絶対;
            上位: 50%;
            右: 30px;
            表示: ブロック;
            幅: 12px;
            高さ: 12px;
            上境界線: 2px 実線 #fff;
            左境界線: 2px 実線 #fff;
            zインデックス: 1;
            変換: translateY(-50%) 回転(135度);
            カーソル: ポインタ;
            遷移: 0.5秒;
            不透明度: 0;
        }
 
        .container:hover .next {
            不透明度: 1;
            右: 20px;
        }
 
        .コンテナ.前{
            位置: 絶対;
            上位: 50%;
            左: 30px;
            表示: ブロック;
            幅: 12px;
            高さ: 12px;
            上境界線: 2px 実線 #fff;
            左境界線: 2px 実線 #fff;
            zインデックス: 1;
            変換: translateY(-50%) 回転(315度);
            カーソル: ポインタ;
            遷移: 0.5秒;
            不透明度: 0;
        }
 
        .container:hover .prev {
            不透明度: 1;
            左: 20px;
        }
 
        #ボックススパン{
            位置: 絶対;
            表示: なし;
            幅: 100%;
            高さ: 100%;
            テキスト配置: 中央;
            行の高さ: 46px;
            色: #00deff;
            フォントサイズ: 24px;
            フォントの太さ: 700;
            ユーザー選択: なし;
        }
 
        #ボックス span:n番目の子(1) {
            表示: 初期;
        }
    </スタイル>
</head>
 
<本文>
    <div class="コンテナ">
        <div class="next" onclick="nextNum()"></div>
        <div class="prev" onclick="prevNum()"></div>
        <div id="ボックス">
            <span>0</span>
        </div>
    </div>
 
    <スクリプト>
        var 数値 = document.getElementById('box')
        (i = 0; i < 100; i++ とします) {
            span = document.createElement('span') とします。
            span.textContent = i
            数値.appendChild(スパン)
        }
        num = numbers.getElementsByTagName('span') とします。
        インデックスを0にする
 
        関数 nextNum() {
            num[インデックス].style.display = 'なし'
            インデックス = (インデックス + 1) % 数値の長さ
            num[index].style.display = '初期'
        }
        関数 prevNum() {
            num[インデックス].style.display = 'なし'
            インデックス = (インデックス - 1 + 数値の長さ) % 数値の長さ
            num[index].style.display = '初期'
        }
    </スクリプト>
</本文>
 
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

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