- Совместимость с XenForo
- 2.0.x
- 2.1.x
- 2.2.x
- 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>