Объявление с обратным отсчетом для темного стиля

XenForo 2.х.х Объявление с обратным отсчетом для темного стиля 1.0.0

Нет прав для скачивания
Объявление с обратным отсчетом до нового года для темного стиля.
Совместимость с XenForo
  1. 2.0.x
  2. 2.1.x
  3. 2.2.x
  4. 2.3.x
Создаем наше объявление по ссылке admin.php?notices и добавляем туда наш код(на всякий случай скачал картинки которые участвую в коде), путь к картинкам пропишите свой смотря куда вы их выложите:
HTML:
<div class="container">
    <h1>Осталось до нового 2025 года.</h1>
    <div class="cd_timer">
      <div class="cd_container">
        <div class="time day">100</div>
        <span class="time_text">Дней</span>
      </div>
      <div class="cd_container">
        <div class="time hour">50</div>
        <span class="time_text">Часов</span>
      </div>
      <div class="cd_container">
        <div class="time minute">30</div>
        <span class="time_text">Минут</span>
      </div>
      <div class="cd_container">
        <div class="time second">30</div>
        <span class="time_text">Секунд</span>
      </div>
    </div>
  </div>
<style>
    .notice-content {
    background: url(/disp/e29ccc95910113.5face8c671539.gif) no-repeat left -185px, url(/disp/0c0c5895910113.5fb0c66b4bc1d.gif) no-repeat right center;
    background-color: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 345px;
    font-family: 'Poppins';
    color: #fff;
    font-size: 10px;
}
.cd_timer {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    position: absolute;
    top: 30%;
    left: 25%;
}

.cd_container .time {
  font-weight: bold;
  padding: 1rem 2rem;
  font-size: 3rem;
  border: 4px solid #01dfcc;
  border-radius: 1rem;
  margin: 0 1rem;
}

.cd_container span {
  font-size: 1rem;
  font-weight: bold;
  color: #ccc;
}
</style>
<script>
const newYear = "12/31/2024";

const daysEl = document.querySelector('.day');
const hourEl = document.querySelector('.hour');
const minuteEl = document.querySelector('.minute');
const secondEl = document.querySelector('.second');

function timeCountDown() {
  const nowDate = new Date();
  const newYearDate = new Date(newYear);
  const totalSeconds = (newYearDate - nowDate) / 1000;

  const days = Math.floor(totalSeconds / 3600 / 24);
  const hours = Math.floor(totalSeconds / 3600) % 24;
  const minutes = Math.floor(totalSeconds / 60) % 60;
  const seconds = Math.floor(totalSeconds) % 60;

  daysEl.innerHTML = formatTime(days);
  hourEl.innerHTML = formatTime(hours);
  minuteEl.innerHTML = formatTime(minutes);
  secondEl.innerHTML = formatTime(seconds);
}

function formatTime(time) {
  return time > 10 ? time : `0${time}`;
}

timeCountDown()
setInterval(timeCountDown, 1000);
</script>
Получается такой результат:
dsf35.gif
Автор
baltun
Скачиваний
0
Просмотры
141
Первый выпуск
Обновление
Рейтинг
0.00 звёзд Оценок: 0

Ещё ресурсы от baltun

Назад
Верх Низ