1

Подскажите как обернуть в красный цвет каждую цифру в таймере? Спасибо

https://jsfiddle.net/s7p0yeam/7/

document.addEventListener('DOMContentLoaded', () => {
  const newYear = new Date('Aug 22 2022 00:00:00');

  const daysVal = document.querySelector('.time-count__days .time-count__val');
  const hoursVal = document.querySelector('.time-count__hours .time-count__val');
  const minutesVal = document.querySelector('.time-count__minutes .time-count__val');

  function declOfNum(number, titles) {
let cases = [2, 0, 1, 1, 1, 2];
return titles[(number % 100 > 4 && number % 100 < 20) ? 2 : cases[(number % 10 < 5) ? number % 10 : 5]];
  }

  const timeCount = () => {
let now = new Date();
let leftUntil = newYear - now;

let days = Math.floor(leftUntil / 1000 / 60 / 60 / 24);
let hours = Math.floor(leftUntil / 1000 / 60 / 60) % 24;
let minutes = Math.floor(leftUntil / 1000 / 60) % 60;

daysVal.textContent = days;
hoursVal.textContent = hours;
minutesVal.textContent = minutes;
  };

  timeCount();
  setInterval(timeCount, 1000);
});
.time-count__content{
  display: flex;
}

.time-count__item{
  margin: 0px 60px 0px 0px;
}

.time-count__val{
  background: red;
  color: #ffffff;
  text-align: center;
  font-size: 40px;
}
<div class="timer__time-count">
  <h2 class="time-count__title">До окончания акции осталось:</h2>
  <div class="time-count__content">
<div class="time-count__item time-count__days">
  <div class="time-count__val">00</div>
  <div class="time-count__text">дни</div>
</div>
<div class="time-count__item time-count__hours">
  <div class="time-count__val">00</div>
  <div class="time-count__text">часы</div>
</div>
<div class="time-count__item time-count__minutes">
  <div class="time-count__val">00</div>
  <div class="time-count__text">минуты</div>
</div>
  </div>
</div>

2
  • Они и так в красном, не? Или подскажите подробнее как вы хотите.
    – eccs0103
    5 авг 2022 в 20:48
  • что-бы каждая цифра была в красном, например 1 отдельно в красном, 5 отдельно так каждую, сейчас цифры у дней, часов и минут вместе и оборачиваются в бэграунд тоже вместе, а надо что-бы раздельно
    – tiptop88
    5 авг 2022 в 21:01

1 ответ 1

2

Решение

Могу предложить такой вариант:

document.addEventListener('DOMContentLoaded', () => {
  const newYear = new Date('Aug 22 2022 00:00:00');

  const daysVal = document.querySelector('.time-count__days .time-count__val');
  const hoursVal = document.querySelector('.time-count__hours .time-count__val');
  const minutesVal = document.querySelector('.time-count__minutes .time-count__val');

  const timeCount = () => {
    let now = new Date();
    let leftUntil = newYear - now;

    let days = Math.floor(leftUntil / 1000 / 60 / 60 / 24);
    let hours = Math.floor(leftUntil / 1000 / 60 / 60) % 24;
    let minutes = Math.floor(leftUntil / 1000 / 60) % 60;

    daysVal.innerHTML = days.toString().replace(/\d/gi, (substring) => `<span>${substring}</span>`);
    hoursVal.innerHTML = hours.toString().replace(/\d/gi, (substring) => `<span>${substring}</span>`);
    minutesVal.innerHTML = minutes.toString().replace(/\d/gi, (substring) => `<span>${substring}</span>`);
  };

  timeCount();
  setInterval(timeCount, 1000);
});
.time-count__content {
  display: flex;
}

.time-count__item {
  margin: 0px 60px 0px 0px;
}

.time-count__val>* {
  background: red;
  color: #ffffff;
  text-align: center;
  font-size: 40px;
  margin: 0 2px;
}
<div class="timer__time-count">
  <h2 class="time-count__title">До окончания акции осталось:</h2>
  <div class="time-count__content">
    <div class="time-count__item time-count__days">
      <div class="time-count__val">00</div>
      <div class="time-count__text">дни</div>
    </div>
    <div class="time-count__item time-count__hours">
      <div class="time-count__val">00</div>
      <div class="time-count__text">часы</div>
    </div>
    <div class="time-count__item time-count__minutes">
      <div class="time-count__val">00</div>
      <div class="time-count__text">минуты</div>
    </div>
  </div>
</div>

Ваш ответ

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

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