таймер обратного отсчета на ванила

139
15 сентября 2021, 21:30

Мне нужен таймер обратного отсчета формата д-чч-мм-сс.

По условии нужно сделать плагин это класс CountdownTimer, экземпляр которого создает новый таймер с настройками new CountdownTimer({ selector: '#timer-1', targetDate: new Date('Jul 17, 2019'), });. Вот разметка кода 

class CountdownTimer { 
  constructor(seconds = 0, minutes = 0, hours = 0, days = 0, t, dead = '0') { 
    this.seconds = seconds; 
    this.minutes = minutes; 
    this.hours = hours; 
    this.days = days; 
    this.t = t; 
    // this.dead = dead; 
    this.getTimeRemaining = this.getTimeRemaining.bind(this); 
  } 
 
  getTimeRemaining(endtime) { 
    this.t = Date.parse(endtime) - Date.parse(new Date()); 
    this.seconds = Math.floor((this.t / 1000) % 60); 
    this.minutes = Math.floor((this.t / 1000 / 60) % 60); 
    this.hours = Math.floor((this.t / (1000 * 60 * 60)) % 24); 
    this.days = Math.floor(this.t / (1000 * 60 * 60 * 24)); 
    return { 
      total: this.t, 
      days: this.days, 
      hours: this.hours, 
      minutes: this.minutes, 
      seconds: this.seconds, 
    }; 
  } 
 
  initializeClock(id, endtime) { 
    const clock = document.getElementById(id); 
    const daysSpan = clock.querySelector('[data-value="days"]'); 
    const hoursSpan = clock.querySelector('[data-value="hours"]'); 
    const minutesSpan = clock.querySelector('[data-value="mins"]'); 
    const secondsSpan = clock.querySelector('[data-value="secs"]'); 
 
    const updateClock = () => { 
      const t = this.getTimeRemaining(endtime); 
 
      daysSpan.textContent = t.days; 
      hoursSpan.textContent = ('0' + t.hours).slice(-2); 
      minutesSpan.textContent = ('0' + t.minutes).slice(-2); 
      secondsSpan.textContent = ('0' + t.seconds).slice(-2); 
 
      if (t.total <= 0) { 
        clearInterval(timeinterval); 
      } 
    }; 
 
    updateClock(); 
    const timeinterval = setInterval(updateClock, 1000); 
  } 
} 
 
const clock = new CountdownTimer(); 
const deadLine = '2019/12/10'; 
const deadLineFormat = new Date(Date.parse(deadLine)); 
clock.initializeClock('timer-1', deadLineFormat);
html { 
  box-sizing: border-box; 
  overflow-x: hidden; 
} 
 
*, 
*::before, 
*::after { 
  box-sizing: inherit; 
} 
 
body { 
  margin: 0; 
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, 
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 
  background-color: #fff; 
  color: #212121; 
} 
 
.timer { 
  display: inline-flex; 
 
  width: 500px; 
 
  flex-direction: row; 
  padding: 30px; 
  text-align: center; 
  box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.2); 
  color: #212121; 
  border-radius: 2px; 
} 
 
.field { 
  display: flex; 
  flex-wrap: wrap; 
  width: 100px; 
  margin-left: 4px; 
  margin-right: 4px; 
  text-transform: uppercase; 
  border: 0; 
  background-color: #3f51b5; 
  color: #ffffff; 
  padding: 10px 20px; 
  cursor: pointer; 
  font-size: 12px; 
  border-radius: 2px; 
  font-family: 'Roboto', sans-serif; 
} 
.value { 
  margin-bottom: 15px; 
  font-family: 'Roboto Mono', monospace; 
  font-size: 30px; 
  margin-top: 0; 
  margin-bottom: 24px; 
} 
.label { 
  margin-bottom: 25px; 
  font-family: 'Roboto Mono', monospace; 
  font-size: 20px; 
  margin-top: 0; 
  margin-bottom: 24px; 
} 
.active { 
  background-color: #2196f3; 
}
<div class="timer" id="timer-1"> 
      <div class="field"> 
        <span class="value" data-value="days">11</span> 
        <span class="label">Days</span> 
      </div> 
 
      <div class="field"> 
        <span class="value" data-value="hours">11</span> 
        <span class="label">Hours</span> 
      </div> 
 
      <div class="field"> 
        <span class="value" data-value="mins">11</span> 
        <span class="label">Minutes</span> 
      </div> 
 
      <div class="field"> 
        <span class="value" data-value="secs">11</span> 
        <span class="label">Seconds</span> 
      </div> 
    </div>
Я пробивала добавить в параметры selector, targetDate что-бы потом сделать const timer = new CountdownTimer({ selector: '#timer-1', targetDate: new Date('Jul 17, 2019'), }); а потом использовать методы предыдущего таймера но у меня ничего не вышло возможно потому что дата Jul 17, 2019? Подскажите пожалуйста еще этот момент.

Answer 1

Не уверен, что вам стоит учить классы, до того как вы поймете как работает this в js

class CountdownTimer { 
  constructor( 
    seconds = 0, 
    minutes = 0, 
    hours = 0, 
    days = 0, 
    t, 
    dead = '0', 
  ) { 
    this.seconds = seconds; 
    this.minutes = minutes; 
    this.hours = hours; 
    this.days = days; 
    this.t = t; 
    this.dead = dead; 
    this.getTimeRemaining = this.getTimeRemaining.bind(this); 
  } 
 
  getTimeRemaining(endtime) { 
    this.t = Date.parse(endtime) - Date.parse(new Date()); 
    this.seconds = Math.floor((this.t / 1000) % 60); 
    this.minutes = Math.floor((this.t / 1000 / 60) % 60); 
    this.hours = Math.floor((this.t / (1000 * 60 * 60)) % 24); 
    this.days = Math.floor(this.t / (1000 * 60 * 60 * 24)); 
    return { 
      total: this.t, 
      days: this.days, 
      hours: this.hours, 
      minutes: this.minutes, 
      seconds: this.seconds, 
    }; 
  } 
 
  initializeClock(id, endtime) { 
    const clock = document.getElementById(id); 
    const daysSpan = clock.querySelector('[data-value="days"]'); 
    const hoursSpan = clock.querySelector('[data-value="hours"]'); 
    const minutesSpan = clock.querySelector('[data-value="mins"]'); 
    const secondsSpan = clock.querySelector('[data-value="secs"]'); 
 
    const updateClock = () => { 
      const t = this.getTimeRemaining(endtime); 
 
      daysSpan.textContent = t.days; 
      hoursSpan.textContent = ('0' + t.hours).slice(-2); 
      minutesSpan.textContent = ('0' + t.minutes).slice(-2); 
      secondsSpan.textContent = ('0' + t.seconds).slice(-2); 
 
      if (t.total <= 0) { 
        clearInterval(timeinterval); 
      } 
    } 
 
    updateClock(); 
    const timeinterval = setInterval(updateClock, 1000); 
  } 
} 
 
const clock = new CountdownTimer(); 
const deadLine = '2019/12/10'; 
const deadLineFormat = new Date(Date.parse(deadLine)); 
clock.initializeClock('timer-1', deadLineFormat);
html { 
  box-sizing: border-box; 
  overflow-x: hidden; 
} 
 
*, 
*::before, 
*::after { 
  box-sizing: inherit; 
} 
 
body { 
  margin: 0; 
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 
  background-color: #fff; 
  color: #212121; 
} 
 
.timer { 
  display: inline-flex; 
  width: 500px; 
  flex-direction: row; 
  padding: 30px; 
  text-align: center; 
  box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.2); 
  color: #212121; 
  border-radius: 2px; 
} 
 
.field { 
  display: flex; 
  flex-wrap: wrap; 
  width: 100px; 
  margin-left: 4px; 
  margin-right: 4px; 
  text-transform: uppercase; 
  border: 0; 
  background-color: #3f51b5; 
  color: #ffffff; 
  padding: 10px 20px; 
  cursor: pointer; 
  font-size: 12px; 
  border-radius: 2px; 
  font-family: 'Roboto', sans-serif; 
} 
 
.value { 
  margin-bottom: 15px; 
  font-family: 'Roboto Mono', monospace; 
  font-size: 30px; 
  margin-top: 0; 
  margin-bottom: 24px; 
} 
 
.label { 
  margin-bottom: 25px; 
  font-family: 'Roboto Mono', monospace; 
  font-size: 20px; 
  margin-top: 0; 
  margin-bottom: 24px; 
} 
 
.active { 
  background-color: #2196f3; 
}
<div class="timer" id="timer-1"> 
  <div class="field"> 
    <span class="value" data-value="days">11</span> 
    <span class="label">Days</span> 
  </div> 
 
  <div class="field"> 
    <span class="value" data-value="hours">11</span> 
    <span class="label">Hours</span> 
  </div> 
 
  <div class="field"> 
    <span class="value" data-value="mins">11</span> 
    <span class="label">Minutes</span> 
  </div> 
 
  <div class="field"> 
    <span class="value" data-value="secs">11</span> 
    <span class="label">Seconds</span> 
  </div> 
</div>

Answer 2

function getTimeRemaining(endtime) { 
  const t = Date.parse(endtime) - Date.parse(new Date()); 
  const seconds = Math.floor((t / 1000) % 60); 
  const minutes = Math.floor((t / 1000 / 60) % 60); 
  const hours = Math.floor((t / (1000 * 60 * 60)) % 24); 
  const days = Math.floor(t / (1000 * 60 * 60 * 24)); 
  return { 
    'total': t, 
    'days': days, 
    'hours': hours, 
    'minutes': minutes, 
    'seconds': seconds 
  }; 
} 
 
function initializeClock(id, endtime) { 
  const clock = document.getElementById(id); 
  const daysSpan = clock.querySelector('[data-value="days"]'); 
  const hoursSpan = clock.querySelector('[data-value="hours"]'); 
  const minutesSpan = clock.querySelector('[data-value="mins"]'); 
  const secondsSpan = clock.querySelector('[data-value="secs"]'); 
 
  function updateClock() { 
    const t = getTimeRemaining(endtime); 
 
    daysSpan.textContent = t.days; 
    hoursSpan.textContent = ('0' + t.hours).slice(-2); 
    minutesSpan.textContent = ('0' + t.minutes).slice(-2); 
    secondsSpan.textContent = ('0' + t.seconds).slice(-2); 
 
    if (t.total <= 0) { 
      clearInterval(timeinterval); 
    } 
  } 
 
  updateClock(); 
  const timeinterval = setInterval(updateClock, 1000); 
} 
 
const deadLine = '2019/12/10'; 
const deadLineFormat = new Date(Date.parse(deadLine)); 
initializeClock('timer-1', deadLineFormat);
html { 
  box-sizing: border-box; 
  overflow-x: hidden; 
} 
 
*, 
*::before, 
*::after { 
  box-sizing: inherit; 
} 
 
body { 
  margin: 0; 
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, 
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 
  background-color: #fff; 
  color: #212121; 
} 
.timer { 
  display: inline-flex; 
 
  width: 500px; 
 
  flex-direction: row; 
  padding: 30px; 
  text-align: center; 
  box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.2); 
  color: #212121; 
  border-radius: 2px; 
} 
 
.field { 
  display: flex; 
  flex-wrap: wrap; 
  width: 100px; 
  margin-left: 4px; 
  margin-right: 4px; 
  text-transform: uppercase; 
  border: 0; 
  background-color: #3f51b5; 
  color: #ffffff; 
  padding: 10px 20px; 
  cursor: pointer; 
  font-size: 12px; 
  border-radius: 2px; 
  font-family: 'Roboto', sans-serif; 
} 
.value { 
  margin-bottom: 15px; 
  font-family: 'Roboto Mono', monospace; 
  font-size: 30px; 
  margin-top: 0; 
  margin-bottom: 24px; 
} 
.label { 
  margin-bottom: 25px; 
  font-family: 'Roboto Mono', monospace; 
  font-size: 20px; 
  margin-top: 0; 
  margin-bottom: 24px; 
} 
.active { 
  background-color: #2196f3; 
}
 <div class="timer" id="timer-1"> 
      <div class="field"> 
        <span class="value" data-value="days">11</span> 
        <span class="label">Days</span> 
      </div> 
 
      <div class="field"> 
        <span class="value" data-value="hours">11</span> 
        <span class="label">Hours</span> 
      </div> 
 
      <div class="field"> 
        <span class="value" data-value="mins">11</span> 
        <span class="label">Minutes</span> 
      </div> 
 
      <div class="field"> 
        <span class="value" data-value="secs">11</span> 
        <span class="label">Seconds</span> 
      </div> 
    </div>

READ ALSO
Как сравнивать 3 элементы в if else?
javascript

Как сравнивать 3 элементы в if else?

Я хочу написать функцию, которая будет сравнивать 3 элемента: если A = B = C, то выполнить какую-то функцию

 129
Правильно написание кода [закрыт]
javascript

Правильно написание кода [закрыт]

Хотите улучшить этот вопрос? Переформулируйте вопрос так, чтобы на него можно было дать ответ, основанный на фактах и цитатах

 101
Правильное использование return
javascript

Правильное использование return

Не понимаю, почему когда я вызываю функцию в данном случае, то получаю undefinedФункция получает массив и выводит индекс того элемента, у которого...

 74
Выдвижное меню на мобильной версии лагает:(
javascript

Выдвижное меню на мобильной версии лагает:(

Подскажите как устранить глюк у выдвижного меню? Как только загрузился сайт и ты первый раз тапаешь по иконке, она как-то прерывисто раздвигает...

 93