粒粒皆浪漫！用 HTML+CSS+JS 打造唯美的粒子倒计时特效

前端

2023-11-04 23:58:21

迷人粒子倒计时：打造令人难忘的在线体验

在现代数字世界中，创造令人难忘且引人入胜的在线体验至关重要。使用迷人的粒子效果和倒计时，你可以让你的网站或应用程序脱颖而出，为用户留下深刻印象。

粒子的魔力：营造迷人氛围

想象一个充满闪烁粒子的网页背景，它们在屏幕上优雅地漂浮，营造出一种如梦似幻的氛围。这种效果不仅美观，而且可以激发情感反应，提升用户的体验。

要实现这一效果，可以使用 JavaScript 创建粒子，赋予它们大小、颜色和速度等属性。通过控制这些参数，你可以创建出从微妙闪烁到充满活力的动态显示效果。

倒计时的力量：激发期待感

对于即将到来的活动、产品发布或任何特别时刻，倒计时可以有效地建立期待感和兴奋感。通过在网页上显示一个实时倒计时，你可以让用户知道他们期待已久的事件何时到来。

实现倒计时功能可以使用 JavaScript，通过跟踪当前日期和时间以及目标日期和时间之间的差异来计算剩余时间。然后，你可以将剩余时间分解为天、时、分和秒，并将其显示在网页上。

融合粒子与倒计时：双重魅力

当粒子效果与倒计时结合时，创造出的效果令人惊叹。闪烁的粒子营造出一种充满活力的气氛，而倒计时则激发期待和悬念感。这种组合创造了一个引人入胜的体验，让用户不断回到你的网站或应用程序以追踪最新进展。

代码示例：立即动手

要自己体验粒子倒计时的魔力，你可以使用以下代码示例：

<!-- HTML 结构 -->
<div id="particle-countdown">
  <div id="particles"></div>
  <div id="countdown"></div>
</div>

<!-- CSS 效果 -->
#particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
}

<!-- JavaScript 逻辑 -->
const particles = [];
let canvas, ctx;

function init() {
  canvas = document.getElementById("particles");
  ctx = canvas.getContext("2d");

  // 创建粒子
  for (let i = 0; i < 100; i++) {
    particles.push({
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height,
      radius: Math.random() * 5 + 1,
      color: `hsl(${Math.random() * 360}, 50%, 50%)`,
      speed: Math.random() * 5 + 1,
    });
  }

  // 渲染粒子
  render();
}

const countdownDate = new Date("2023-12-31T23:59:59");

function updateCountdown() {
  const now = new Date();
  const timeLeft = countdownDate - now;

  const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
  const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);

  document.getElementById("days").textContent = days;
  document.getElementById("hours").textContent = hours;
  document.getElementById("minutes").textContent = minutes;
  document.getElementById("seconds").textContent = seconds;
}

setInterval(updateCountdown, 1000);