Display 12-hour and 24-hour time

后端 未结 5 1551
猫巷女王i
猫巷女王i 2021-02-14 10:30

I want to make a webpage that displays the current time. When the \"12-hour format\" button is clicked, the time in 12-hour time will display in the div area. When the \"24-hour

5条回答
  •  逝去的感伤
    2021-02-14 11:15

    Since deadline at work is coming and right now is really just around the corner, I have decided to answer this 5 years old question.

    Most people recommended using Moment.js library, which is really fine, because in most cases there is no point in reinventing the wheel and trusting a library with 9,897,199 weekly npm downloads is without any doubts a sane choice.

    However, since the only answer providing solution based on OP's code seems to have some bugs in it; I would like to humbly propose my solution:

    const FORMATS = {
      TwelveHours: 12,
      TwentyFourHours: 24
    }
    
    class Clock {
      format = FORMATS.TwentyFourHours;
    
      constructor(clockDivId) {
        this.clockDivId = clockDivId;
    
        this.clockInterval = setInterval(() => {
          document.getElementById(clockDivId).innerHTML = this.getCurrentTime().format(this.format);
        }, 500)
      }
    
      getCurrentTime() {
        let today = new Date();
        return new Time(today.getHours(), today.getMinutes(), today.getSeconds());
      }
    
      switchTo12HourFormat() {
        this.format = FORMATS.TwelveHours
      }
    
      switchTo24HourFormat() {
        this.format = FORMATS.TwentyFourHours
      }
    
      destroy() {
        clearInterval(this.clockInterval);
      }
    
    }
    
    class Time {
    
      constructor(hours, minutes, seconds) {
        this.hours = hours;
        this.minutes = minutes;
        this.seconds = seconds;
      }
    
      format(type) {
        switch (type) {
          case FORMATS.TwentyFourHours: {
            return this.print(this.hours)
          }
          case FORMATS.TwelveHours: {
            let tag = this.hours >= 12 ? 'p.m' : 'a.m';
            let hours = this.hours % 12;
            if (hours == 0) {
              hours = 12;
            }
            return this.print(hours) + ' ' + tag;
          }
    
        }
    
      }
    
      //private
      to2Digits(number) {
        return number < 10 ? '0' + number : '' + number;
      }
    
      print(hours) {
        return this.to2Digits(hours) + ':' + this.to2Digits(this.minutes) + ':' + this.to2Digits(this.seconds);
      }
    
    }
    
    let clock = new Clock("clock");
    
    
    
      Clock
    
    
    
      

    Oh no, oh forking no! I have written "print" instead of "this.print" and I've run it in Google Chrome.

    Basically UI got blocked by print dialog and I've lost all the code and had to write it again and now I am going home to enjoy some sleep and maybe, maybe one episode of HIMYM.

提交回复
热议问题