<div id="clock"></div>

#clock { font-size: 50px; font-family: Arial, sans-serif; text-align: center; margin: 100px; }

function updateClock() {
    const now = new Date();
    const hours = now.getHours().toString().padStart(2, '0');
    const minutes = now.getMinutes().toString().padStart(2, '0');
    const seconds = now.getSeconds().toString().padStart(2, '0');
    document.getElementById('clock').innerText = `${hours}:${minutes}:${seconds}`;
  }
  // Обновляем часы каждую секунду
  setInterval(updateClock, 1000);
  // Запускаем обновление сразу, чтобы избежать задержки в отображении времени
  updateClock();

body {
    transition: background-color 0.5s ease;
    margin: 0;
    height: 100vh;
}

function changeBackground() {
  const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
  document.body.style.backgroundColor = randomColor;
}
document.body.addEventListener('click', changeBackground);

.particle {
    position: absolute;
    background-color: #3498db;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    animation: explode 1s linear;}
@keyframes explode { to { transform: scale(2); opacity: 0; }}

document.addEventListener("mousedown", (e) => e.preventDefault());
document.addEventListener("click", (e) => {
  const p = document.createElement("div");
  Object.assign(p.style, { left: `${e.clientX}px`, top: `${e.clientY}px` });
  p.className = "particle";
  document.body.appendChild(p);
  setTimeout(() => p.remove(), 1000); });