Таймер обратного отсчета до нового 2023 года

Разработка Таймер обратного отсчета до нового 2023 года

Нет прав для скачивания
Таймер обратного отсчета до нового 2023 года.
Пишем HTML код:
HTML:
<div class="container">
  <div class="countdown">
    <header>
      <p>С новым годом</p>
    </header>
    <ul>
      <li style="background: #EF2F3C">
        <span></span>
        <p>Дней</p>
      </li>
      <li style="background: #FFFFFF">
        <span></span>
        <p style="color: #18315A">Часов</p>
      </li>
      <li style="background: #276FC1">
        <span></span>
        <p>Минут</p>
      </li>
      <li style="background: #E59A02">
        <span></span>
        <p>Секунд</p>
      </li>
    </ul>
  </div>
</div>

<div class="balloon red"></div>
<div class="balloon blue"></div>
<div class="balloon yellow"></div>
<div class="balloon white"></div>
Пишем наш стиль:
CSS:
@import url("https://fonts.googleapis.com/css?family=Oswald&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #18315A;
  font-family: "Oswald";
  overflow: hidden;
}

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container .countdown {
  color: #ffffff;
  width: 60%;
}
.container .countdown header {
  padding: 20px;
}
.container .countdown header p {
  font-size: 42px;
  text-align: center;
}
.container .countdown ul {
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}
.container .countdown ul li {
  text-align: center;
  width: 100%;
  padding: 15px 0;
  margin: 0 5px;
  border-radius: 5px;
}
.container .countdown ul li span {
  font-size: 32px;
  color: #18315A;
  font-weight: bold;
}
.container .countdown ul li p {
  font-size: 24px;
  color: #ffffff;
}

.balloon {
  position: absolute;
  width: 50px;
  height: 60px;
  border-radius: 45%;
  z-index: -1;
}
.balloon::before {
  content: "";
  width: 5px;
  height: 50px;
  background: #000000;
  position: absolute;
  left: calc(50% - 2.5px);
  top: 100%;
  z-index: -1;
}
.balloon::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  left: calc(50% - 5px);
  top: 100%;
}
.balloon.red::after {
  background: #EF2F3C;
}
.balloon.red {
  background: #EF2F3C;
}
.balloon.white::after {
  background: #FFFFFF;
}
.balloon.white {
  background: #FFFFFF;
}
.balloon.blue::after {
  background: #276FC1;
}
.balloon.blue {
  background: #276FC1;
}
.balloon.yellow {
  background: #E59A02;
}
.balloon.yellow::after {
  background: #E59A02;
}

@media (max-width: 770px) {
  .countdown > ul {
    margin: auto;
    width: 60% !important;
    flex-direction: column !important;
  }
  .countdown > ul li {
    margin: 5px 0 !important;
    padding: 10px 0 !important;
  }
}
Пишем jquery:
JavaScript:
let timeElements = document.querySelectorAll('.countdown>ul>li');

function getRemainTime(deadline) {
  let now = new Date(),
      remainTime = (new Date(deadline) - now + 1000) / 1000,
      remainSeconds = ('0' + Math.floor(remainTime % 60)).slice(-2),
      remainMinutes = ('0' + Math.floor(remainTime / 60 % 60)).slice(-2),
      remainHours = ('0' + Math.floor(remainTime / 3600 % 24)).slice(-2),
      remainDays = Math.floor(remainTime / (3600 * 24));
 
  timeElements[0].firstElementChild.innerHTML = remainDays;
  timeElements[1].firstElementChild.innerHTML = remainHours;
  timeElements[2].firstElementChild.innerHTML = remainMinutes;
  timeElements[3].firstElementChild.innerHTML = remainSeconds;
}

setInterval(() => getRemainTime('Jan 1 2023 00:00:00 GMT-0300'), 1000)

// Balloons

window.onload = () => {
  console.log(Math.random() * 100)
  document.querySelector('.blue').style = `left: ${Math.random () * 90}%; top: ${Math.random() * 90}%`;
  document.querySelector('.red').style = `left: ${Math.random () * 90}%; top: ${Math.random() * 90}%`;
  document.querySelector('.white').style = `left: ${Math.random () * 90}%; top: ${Math.random() * 90}%`;
  document.querySelector('.yellow').style = `left: ${Math.random () * 90}%; top: ${Math.random() * 90}%`;
  goUp()
};

let balloons = document.querySelectorAll('.balloon');

function goUp() {
  balloons.forEach(index => {
    let ypos = parseInt(index.style.top.slice(0, index.style.top.length - 1));
    let xpos = parseInt(index.style.left.slice(0, index.style.left.length - 1));
    if (ypos > -110) {
      ypos -= 1;
      index.style = `top: ${ypos}%; left: ${xpos}%;`;
    } else {
      ypos = Math.random() * (200 - 100) + 100;
      xpos = Math.random() * 90;
      index.style = `top: ${ypos}%; left: ${xpos}%;`;
    }
  })
 
  requestAnimationFrame(goUp)
}
Смотрим наш результат:
dfr5.gif
Автор
baltun
Скачиваний
0
Просмотры
780
Первый выпуск
Обновление
Рейтинг
0.00 звёзд Оценок: 0

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

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