カウンター台

16551 ワード

<div>
      <div>정식 출시까지</div>
      <div>
        <span=><span ref="day">0</span></span>
        <span>:</span>

        <span> <span ref="hour">0</span>시간</span>
        <span>:</span>

        <span> <span ref="min">0</span></span>
        <span>:</span>

        <span> <span ref="sec">0</span></span>
      </div>
    </div> 
mounted() {
    setInterval(this.dDayCounter, 1000);
  },
    
methods: {
 dDayCounter() {
      const curr = new Date();
      const utc = curr.getTime() + curr.getTimezoneOffset() * 60 * 1000;
      const KR_TIME_DIFF = 9 * 60 * 60 * 1000;
      const kr_curr = new Date(utc + KR_TIME_DIFF);

      const now = kr_curr.getTime(); //한국표준시간기준 현재시간
      const open = new Date(2021, 9, 21, 8, 0, 0).getTime(); //오픈시간

      if (now < open) {
        let day, hour, min, sec;
        let distance = open - now;

        day = Math.floor(distance / (1000 * 60 * 60 * 24));
        hour = Math.floor(
          (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
        );
        min = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        sec = Math.floor((distance % (1000 * 60)) / 1000);

        if (min < 10) {
          min = "0" + min;
        }
        if (sec < 10) {
          sec = "0" + sec;
        }
        this.$refs.day.innerText = day;
        this.$refs.hour.innerText = hour;
        this.$refs.min.innerText = min;
        this.$refs.sec.innerText = sec;
      } else {
        //오픈 시간 이후
        this.$refs.day.innerText = "0";
        this.$refs.hour.innerText = "00";
        this.$refs.min.innerText = "00";
        this.$refs.sec.innerText = "00";
      }
    }
},