当前位置：首页 > JavaScript

js实现六一

2026-01-31 22:31:11JavaScript

JavaScript 实现六一儿童节效果

使用 JavaScript 可以创建动态的六一儿童节庆祝效果，例如动画、互动元素或节日主题的页面装饰。以下是几种常见的实现方式：

创建节日背景动画

通过 Canvas 或 CSS 动画生成节日氛围的背景效果，例如飘落的气球或彩带：

const canvas = document.getElementById('festivalCanvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const balloons = [];
for (let i = 0; i < 30; i++) {
  balloons.push({
    x: Math.random() * canvas.width,
    y: Math.random() * canvas.height,
    radius: Math.random() * 20 + 10,
    color: `hsl(${Math.random() * 360}, 100%, 70%)`,
    speed: Math.random() * 2 + 1
  });
}

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  balloons.forEach(balloon => {
    ctx.beginPath();
    ctx.arc(balloon.x, balloon.y, balloon.radius, 0, Math.PI * 2);
    ctx.fillStyle = balloon.color;
    ctx.fill();
    balloon.y -= balloon.speed;
    if (balloon.y < -balloon.radius) {
      balloon.y = canvas.height + balloon.radius;
      balloon.x = Math.random() * canvas.width;
    }
  });
  requestAnimationFrame(animate);
}
animate();

添加交互式节日元素

js实现六一

创建可点击的节日元素，例如点击出现祝福语的礼物盒：

document.querySelectorAll('.gift-box').forEach(box => {
  box.addEventListener('click', function() {
    const message = document.createElement('div');
    message.className = 'festival-message';
    message.textContent = '六一儿童节快乐！';
    this.appendChild(message);
    setTimeout(() => message.remove(), 2000);
  });
});

节日主题页面装饰

js实现六一

动态添加节日装饰元素到页面：

function addFestivalDecorations() {
  const colors = ['#ff6b6b', '#48dbfb', '#feca57', '#1dd1a1', '#ff9ff3'];
  for (let i = 0; i < 15; i++) {
    const star = document.createElement('div');
    star.className = 'festival-star';
    star.style.left = `${Math.random() * 100}vw`;
    star.style.top = `${Math.random() * 100}vh`;
    star.style.color = colors[Math.floor(Math.random() * colors.length)];
    star.innerHTML = '★';
    document.body.appendChild(star);
  }
}
window.addEventListener('load', addFestivalDecorations);

节日倒计时功能

显示距离六一儿童节的倒计时：

function updateCountdown() {
  const now = new Date();
  const currentYear = now.getFullYear();
  let childrensDay = new Date(currentYear, 5, 1); // 6月1日

  if (now > childrensDay) {
    childrensDay = new Date(currentYear + 1, 5, 1);
  }

  const diff = childrensDay - now;
  const days = Math.floor(diff / (1000 * 60 * 60 * 24));
  document.getElementById('countdown').textContent = 
    `距离六一儿童节还有 ${days} 天`;
}
setInterval(updateCountdown, 1000 * 60 * 60); // 每小时更新一次

这些代码示例可以单独使用或组合在一起，为网站或应用添加六一儿童节的节日氛围。根据具体需求，可以调整颜色、动画效果和交互方式。

标签: js