Clock 类时间滴答显示

123 阅读1分钟
class Clock {
    constructor({ template }) {
        this.template = template;

    }
    render() {
        let date = new Date();
        let hours = date.getHours();
        if (hours < 10) {
            hours = '0' + hours;

        }
        let mins = date.getMinutes();
        if (mins < 10) {
            mins = '0' + mins;
        }
        let second = date.getSeconds();
        if (second < 10) {
            second = '0' + second;
        }
        let output = this.template.replace('h', hours).replace('m', mins).replace('s', second);
        let ele = document.getElementById('timer');
        if (!ele) {
            ele = document.createElement('div');
            ele.setAttribute('id', 'timer');

        }
        ele.innerHTML = '当前时间:'+ output;
        document.body.insertBefore(ele, document.body.firstChild);

    }
    stop() {
        clearInterval(this.timer);
    }
    start() {
        this.render();
        this.timer = setInterval(() => this.render(), 1000);

    }
}

let clock = new Clock({ template: 'h:m:s' });
clock.start();