2

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

По условии нужно сделать плагин это класс 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? Подскажите пожалуйста еще этот момент.

2 ответа 2

2

Не уверен, что вам стоит учить классы, до того как вы поймете как работает 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>

0
0

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.