Odliczanie do Nowego Roku – gadżet na stronę

Prosty skrypt wyświetlający ile czasu zostało do danej daty. W tym wypadku do Nowego 2025 Roku.

Oczywiście można znaleźć inne zastosowania. Wystarczy zmienić tło i zrobić drobne modyfikacje w kodzie.

Pełną instrukcję znajdziecie na dole strony.

Odliczanie

Jak wstawić gadżet na własną stronę?

Można to zrobić ręcznie lub pobrać gotowca i go edytować jak dusza zapragnie.

Tworzymy odpowiednie pliki:

index.html
style.css
script.js

Potrzebna będzie jeszcze grafika w temacie odliczania jako tło.

Aby zmienić datę do odliczania należy edytować w pliku script.js linijkę: let endDate = new Date(2025, 0, 1, 00, 00);
Oraz w pliku index.html odpowiednie nagłówki oraz tło.

index.html

<!DOCTYPE html>
<html lang="pl">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Nowy rok za:</title>
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600;800&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
  <div class="heading">
    <h3>Do Nowego Roku zostało</h3>
    <h1>2025</h1>
  </div>
  <div class="countdown">
    <div class="box"> <span class="num" id="day-box">00</span> <span class="text">Dni</span> </div>
    <div class="box"> <span class="num" id="hr-box">00</span> <span class="text">Godzin</span> </div>
    <div class="box"> <span class="num" id="min-box">00</span> <span class="text">Minut</span> </div>
    <div class="box"> <span class="num" id="sec-box">00</span> <span class="text">Sekund</span> </div>
  </div>
</div>
<script src="script.js"></script>
</body>
</html>

style.css

:root {
  --color-white: #ffffff;
  --color-black: #202020;
  --color-glass: rgba(255, 255, 255, 0.05);
  --color-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  color: var(--color-white);
}
body {
  background: url(nowy_rok.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
  background-size: cover;
}
.wrapper {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  font-size: 16px;
}
.heading {
  text-align: center;
  margin-bottom: 4em;
}
.heading h1 {
  text-shadow: var(--color-shadow);
  font-size: 6.2em;
  font-weight: 800;
  letter-spacing: 0.15em;
}
.heading h3 {
  font-size: 1.8em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
  background-color: var(--color-glass);
  backdrop-filter: blur(12px);
  box-shadow: var(--color-shadow);
  padding: 8px 30px;
  display: inline-block;
}
.countdown {
  width: 95vw;
  display: flex;
  justify-content: space-around;
  gap: 10px;
}
.box {
  width: 28vmin;
  height: 29vmin;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  position: relative;
}
span.num {
  background-color: var(--color-glass);
  backdrop-filter: blur(12px);
  height: 100%;
  width: 100%;
  display: grid;
  place-items: center;
  font-size: 4em;
  box-shadow: var(--color-shadow);
  border-radius: 0.1em;
}
span.num:after {
  content: "";
  position: absolute;
  background-color: var(--color-glass);
  height: 100%;
  width: 50%;
  left: 0;
}
span.text {
  font-size: 1em;
  background-color: var(--color-white);
  color: var(--color-black);
  display: block;
  width: 80%;
  position: relative;
  text-align: center;
  bottom: 20px;
  padding: 0.7em 0;
  font-weight: 600;
  border-radius: 0.3em;
  box-shadow: var(--color-shadow);
}

script.js

// www.skrip.pl
let dayBox = document.getElementById("day-box");
let hrBox = document.getElementById("hr-box");
let minBox = document.getElementById("min-box");
let secBox = document.getElementById("sec-box");
let endDate = new Date(2025, 0, 1, 00, 00);
let endTime = endDate.getTime();

function countdown() {
  let todayDate = new Date();
  let todayTime = todayDate.getTime();
  let remainingTime = endTime - todayTime;
  let oneMin = 60 * 1000;
  let oneHr = 60 * oneMin;
  let oneDay = 24 * oneHr;

  let addZeroes = (num) => (num Odliczanie zakończone. Wprowadź nową datę`;
  } else {
    let daysLeft = Math.floor(remainingTime / oneDay);
    let hrsLeft = Math.floor((remainingTime % oneDay) / oneHr);
    let minsLeft = Math.floor((remainingTime % oneHr) / oneMin);
    let secsLeft = Math.floor((remainingTime % oneMin) / 1000);

    dayBox.textContent = addZeroes(daysLeft);
    hrBox.textContent = addZeroes(hrsLeft);
    minBox.textContent = addZeroes(minsLeft);
    secBox.textContent = addZeroes(secsLeft);
  }
}

let i = setInterval(countdown, 1000);
countdown();
5;yCode}</span>`;
});

Top Stories

Jak nie zostać ofiarą oszustów. Sposób na rozpoznanie fałszywego maila

Wangiri scam – jak nie zostać ofiarą

Statystyki wyszukiwarki PornHub za 2024 rok

Odliczanie do Nowego Roku 2026 – gadżet na stronę.

Oczywiście można znaleźć inne zastosowania.