Javascript时钟/时间增量改进

Question

我已经创建了一个时间选择器组件，它可以正常工作。我已经用香草js写了它。我纯粹通过编写jQuery来学习js，并希望看看是否有人会让我知道他们将如何改进代码或仅提供反馈。

这是代码的工作小提琴＆gt; https://jsfiddle.net/mw6pujna/2/

原则是用户可以选择小时（12小时格式）和分钟。会议纪要以15分钟为增量。在加载时，当前时间设置为最接近的15分钟（将来）。

以下是带有html的js以供参考：

JS：

const increment = document.getElementsByClassName('c-time-block__incrementer');
const hours = document.getElementById('hours');
const mins = document.getElementById('minutes');
const buttons = document.getElementsByTagName('button');
const d = new Date();
let h = d.getHours() % 12;
let m = d.getMinutes();

// Set the initial time of the clock to the next 15 minute incrememt and handle hours.
const setInitialTime = (m, h) => {
    if (m > 45){
        m = '00'; 
        h = h + 1;
    } else if (m < 45) {
        m = Math.ceil(m / 15) * 15;
    }
    if(h === 0) {
        h = 12;
    }
    hours.innerHTML = pad(h);
    mins.innerHTML = pad(m);
}

setInitialTime(m,h);

// Check if am/pm and make relevant selector button active
const setInitialPeriod = (h) => {
    h < 12 ? buttons[0].classList.add('selected') : buttons[1].classList.add('selected');
}
setInitialPeriod(h);

// Add click events and pass the id to the counter object
for (let selector of increment) {
    selector.addEventListener('click', () => { 
        if (selector.id === 'hrs-inc' || selector.id === 'min-inc') {
            counter.inc(selector.id);
        } else if (selector.id === 'hrs-dec' || selector.id === 'min-dec') {
            counter.dec(selector.id);
        }

    });
}

// Counter object with the increment and decrement methods
const counter = {
    inc: function(id) {
        switch(id) {
            case 'hrs-inc':
                h = parseInt(hours.innerHTML) + 1;
                h = h % 12;
                if(h === 0) {
                    h = 12;
                }            
                hours.innerHTML = pad(h);
                break;

            case 'min-inc':
                m = parseInt(mins.innerHTML) + 15;
                if (m > 45){
                    m = 0;
                }
                mins.innerHTML = pad(m);
                break;
        }
    },
    dec: function(id) {
        switch(id) {
            case 'hrs-dec':
                h = h - 1;
                if(h < 1) {
                    h = 12;
                }            
                hours.innerHTML = pad(h);
                break;

            case 'min-dec':
                m = parseInt(mins.innerHTML) - 15;
                if (m < 0){
                    m = 45;
                }
                mins.innerHTML = pad(m);
                break;
        }
    },
};

// Padding function to add a leading zero
function pad(n) {
    return (n < 10 && n != "00" || n === 0) ? ("0" + n) : n;
}

HTML：

<div class="c-time-container">
<h1>Select installation time</h1>
<div class="c-time-component">  
    <div class="c-time-block">
        <div id="hrs-inc" class="c-time-block__incrementer">
            <img src="/assets/images/ic_up_arrow_white_64px.svg" alt="Time increment">
        </div>
        <div id="hours" class="c-time-block__number">
        00
        </div>
        <div id="hrs-dec" class="c-time-block__incrementer">
            <img src="/assets/images/ic_down_arrow_white_64px.svg" alt="Time increment">
        </div>
    </div>

    <div class="c-time-block c-time-block--separator">:</div>

    <div class="c-time-block">
        <div id="min-inc" class="c-time-block__incrementer">
            <img src="/assets/images/ic_up_arrow_white_64px.svg" alt="Time increment">
        </div>
        <div id="minutes" class="c-time-block__number">
        00
        </div>
        <div id="min-dec" class="c-time-block__incrementer">
            <img src="/assets/images/ic_down_arrow_white_64px.svg" alt="Time increment">
        </div>
    </div>

    <div class="c-time-block c-time-block--selector">
        <button class="btn c-time-btn">am</button>
        <button class="btn c-time-btn">pm</button>
    </div>
</div>