ページングクリックコントロールを実装するネイティブ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();

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