ページングクリックコントロールを実装するネイティブJS

ページングクリックコントロールを実装するネイティブJS

これは、ネイティブJSを使用してページングクリックコントロールを実装する必要がある面接の質問です。参考までに、具体的な内容は次のとおりです。

1. ホームページ、前のページ、次のページ、最後のページをクリックすると、対応する数字が赤色に変わります。
2. ページ 1 ではホームページや前のページをクリックできません。
3. 10 ページでは次のページをクリックできません。
4. ページ番号を入力してページ番号にジャンプする機能を実装します。

html

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>ページ</title>
    <スタイル>
        *{
            マージン: 0px;
            リストスタイルタイプ: なし;
        }
        ヘッダー、フッター、セクション{
            ボックスのサイズ: 境界線ボックス;
            テキスト配置: 中央;
            パディング: 5px;
        }
        ヘッダー、フッター{
            背景色: アクアマリン;
            フォントサイズ: 25px;
        }
        #コンテンツ{
            ディスプレイ: フレックス;
            flex-direction: 列;
            コンテンツの中央揃え: 中央;
            アイテムの位置を中央揃えにします。
            flex-wrap: nowrap;
            高さ: 500px;
            背景色: アンティークホワイト;
        }
        。コンテンツ{
            境界線: 1px 点線 サドルブラウン;
            最小幅: 700px;
            最小高さ: 440px;
            背景色: ダークシアン;
        }
        #changePage li{
            表示: インラインブロック;
        }
        。今{
            色:赤;
        }
        。隠れる{
            表示: 非表示
        }
    </スタイル>
</head>
<本文>
    <header>これはヘッダーです</header>
    <セクション>
        <div id="コンテンツ">
            <h2>これはコンテンツです</h2>
            <div class="content">
                <p>これはコンテンツです</p>
                <p id="単語"></p>
            </div>
            <div id="ページ変更">
                <ul>
                    <li><button id="homePage" disabled="true">ホーム</button></li>
                    <li><button id="prev" disabled="true">前のページ</button></li>
                    <li id="btns">
                        <button class="now">1</button>
                        <ボタン>2</ボタン>
                        <ボタン>3</ボタン>
                        <ボタン>4</ボタン>
                        <ボタン>5</ボタン>
                        <ボタン>6</ボタン>
                        <ボタン>7</ボタン>
                        <ボタン>8</ボタン>
                        <ボタン>9</ボタン>
                        <ボタン>10</ボタン>
                    </li>
                    <li><button id="next">次のページ</button></li>
                    <li><button id="lastPage">最後のページ</button></li>
                    <li id ​​="enter"><input type="number" value="1" min="1" max="10">
                        <button>OK</button>
                        ページ <span>1</span>
                </ul>
            </div>
        </div>
    </セクション>
    <footer>これはフッターです</footer>
    <script src="js/page.js"></script>
</本文>
</html>

JavaScript

NUM = 1 とします。
 
//メイン関数、イベント関数changepage()をバインドする{
    btns = document.getElementById('changePage');
    element_1 を document.getElementById('btns').children とします。
    // コンソール.log(要素1)
    ホームページを document.getElementById('homePage') にします。
    lastpage = document.getElementById('lastPage'); とします。
    prevpage = document.getElementById('prev'); とします。
    次のページを document.getElementById('next') とします。
    enterpage = document.getElementById('enter').children[1]; とします。
    // console.log(ページを入力)
 
    //4つのボタンをバインドします。homepage.addEventListener('click', () => {
        ホームページ();
    });
    lastpage.addEventListener('クリック', () => {
        最後のページ();
    });
    prevpage.addEventListener('click', () => {
        前ページ();
    });
    nextpage.addEventListener('click', () => {
        次のページ();
    });
    enterpage.addEventListener('click',()=>{
        ページを入力します。
    })
    //デジタルボタンをバインドする for (let i=0; i<10; i++){
        element_1[i].addEventListener('クリック',()=>{
            document.getElementsByClassName('now')[0].classList.remove('now');
            document.getElementById('btns').children[i].classList.add('now');
            数値 = i+1;
        })
    }
 
    //親バブル関数をリッスンし、コンテンツ領域のテキストを制御し、ボタンのステータスを設定します btns.addEventListener('click', () => {
        // コンソール.log(数値)
 
        (数値 === 1)の場合{
            ホームページが無効 = true;
            前ページを無効に = true;
            最終ページが無効 = false;
            次ページが無効です = false;
        }それ以外の場合 (NUM > 1 && NUM < 10 ) {
            ホームページが無効 = false;
            prevpage.disabled = false;
            最終ページが無効 = false;
            次ページが無効です = false;
        }それ以外{
            ホームページが無効 = false;
            前ページを無効にしました = false;
            最終ページが無効 = true;
            次ページを無効にします。
        }
        document.getElementById('enter').children[2].innerText = NUM​​;
        document.getElementById('word').innerText = 'これで ' + NUM + ' 要素になりました';
    });
}
 
//特定の関数の実装 function homePage() {
    document.getElementsByClassName('now')[0].classList.remove('now');
    document.getElementById('btns').children[0].classList.add('now');
    数値 = 1;   
}
 
関数 lastPage() {
    document.getElementsByClassName('now')[0].classList.remove('now');
    document.getElementById('btns').children[9].classList.add('now');
    数値 = 10;
}
 
関数 nextPage(){
    document.getElementsByClassName('now')[0].classList.remove('now');
    document.getElementById('btns').children[NUM].classList.add('now');
    数値++;
}
 
関数 prevPage(){
    document.getElementsByClassName('now')[0].classList.remove('now');
    document.getElementById('btns').children[NUM-2].classList.add('now');
    数字--;
}
 
//入力関数の実装 function enterPage(){
    document.getElementsByClassName('now')[0].classList.remove('now');
    var page_number = parseInt(document.getElementById('enter').children[0].value);
    // console.log(ページ番号);
    document.getElementById("btns").children[page_number-1].classList.add('now');
    NUM=ページ番号;
}
 
window.onload = changepage();

最終的な実装は次のようになります

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

以下もご興味があるかもしれません:
  • クールなページング効果を実現するネイティブJS
  • ページング効果を実現するネイティブ js
  • ページング効果を実現するためのネイティブJavaScript
  • ネイティブ JS ページング表示効果 (効果を確認するにはページングをクリックします)
  • ネイティブ JS に基づくページング効果を実装するためのサンプル コード

<<:  LinuxでTomcatのポート番号を変更する方法

>>:  Linux リモートログイン実装チュートリアル分析

推薦する

Tomcat の設定と Eclipse での起動方法

目次Tomcat8のインストールと設定方法tomcat ダウンロードTomcat マネージャーを有効...

Vueはスライダードラッグ検証機能の全プロセスを実現します

レンダリング 骨組みを定義し、HTMLとCSSを記述するHTML部分 <テンプレート> ...

シンプルなウェブ計算機を実装するJavaScript

背景私は新しいプロジェクト チームに配属されたので、プロジェクトでは js を使用する必要があります...

Vueでショッピングカートのすべての機能を実装する簡単な方法

主な機能は次のとおりです。製品情報を追加する製品情報を変更する単一の製品を削除する複数の製品を削除す...

データベースの冗長フィールドを合理的に使用する方法

privot は、多対多の関係の中間テーブルです。 PT5 フレームワークは自動的に privot ...

CSS3でアニメーションを実装する3つの方法

これは、面接者の CSS に関する基本的な知識をテストするものです。 CSSでアニメーションを実装す...

DockerコンテナでLNMPをコンパイルする例

目次1. プロジェクトの説明2. Nginxイメージの作成3. MySQLイメージの作成4. PHP...

Mysql 更新マルチテーブル共同更新方法の概要

次に、2 つのテーブルを作成し、一連の SQL 文を実行します。SQL 文の実行後にテーブル内のデー...

Centos7 での NFS サービス構築の紹介

目次1. サーバー2. クライアント3. テストサービス1. サーバー1. YUMソースを使用してN...

Web ページのソース ファイルを表示できない場合はどうすればよいですか?

Q: Outlook または IE のどちらを使用している場合でも、マウスを右クリックすると、ポッ...

HTML4とHTML5の違い: 入力にフォーカス実装コードを追加する方法

html4:コードをコピーコードは次のとおりです。 <フォーム> <p>&l...

Centos7でポートを開く方法

CentOS7 のデフォルトのファイアウォールは iptables ではなく、firewalle で...

Nginx ポート競合を解決するトラブルシューティング方法の例

問題の説明データ転送に Nginx を使用し、フロントエンドとバックエンドが分離された Spring...

MySQL FAQ シリーズ: ibdata1 ファイルのサイズが突然増加しないようにする方法

0. はじめにibdata1 ファイルとは何ですか? ibdata1 は、innodb システム テ...

Vueはカスタム命令を使用してページの下部に透かしを追加します

プロジェクトシナリオプロジェクトの背景全体にカスタム透かしを追加します。透かしのテキスト、フォントの...