当前位置：首页 > JavaScript

js实现六一

2026-04-05 14:47:48JavaScript

JavaScript 实现六一儿童节效果

通过 JavaScript 可以创建各种有趣的六一儿童节特效，以下是一些常见的实现方法：

彩色气球动画

js实现六一

function createBalloons() {
  const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff'];
  const container = document.body;

  for(let i=0; i<20; i++) {
    const balloon = document.createElement('div');
    balloon.style.width = '30px';
    balloon.style.height = '40px';
    balloon.style.backgroundColor = colors[Math.floor(Math.random()*colors.length)];
    balloon.style.borderRadius = '50%';
    balloon.style.position = 'absolute';
    balloon.style.left = Math.random()*window.innerWidth + 'px';
    balloon.style.bottom = '-50px';
    container.appendChild(balloon);

    animateBalloon(balloon);
  }
}

function animateBalloon(balloon) {
  let pos = -50;
  const id = setInterval(() => {
    if(pos > window.innerHeight) {
      clearInterval(id);
      balloon.remove();
    } else {
      pos += 2;
      balloon.style.bottom = pos + 'px';
      balloon.style.left = parseFloat(balloon.style.left) + Math.sin(pos/50) + 'px';
    }
  }, 20);
}

儿童节祝福弹窗

js实现六一

function showChildrensDayMessage() {
  const modal = document.createElement('div');
  modal.style.position = 'fixed';
  modal.style.top = '50%';
  modal.style.left = '50%';
  modal.style.transform = 'translate(-50%, -50%)';
  modal.style.padding = '20px';
  modal.style.backgroundColor = '#fff4e6';
  modal.style.border = '3px solid #ff9900';
  modal.style.borderRadius = '10px';
  modal.style.zIndex = '1000';
  modal.style.textAlign = 'center';

  const message = document.createElement('h2');
  message.textContent = '六一儿童节快乐！';
  message.style.color = '#ff6600';

  const closeBtn = document.createElement('button');
  closeBtn.textContent = '关闭';
  closeBtn.style.marginTop = '15px';
  closeBtn.style.padding = '5px 15px';
  closeBtn.style.backgroundColor = '#ff9900';
  closeBtn.style.border = 'none';
  closeBtn.style.borderRadius = '5px';

  closeBtn.addEventListener('click', () => {
    document.body.removeChild(modal);
  });

  modal.appendChild(message);
  modal.appendChild(closeBtn);
  document.body.appendChild(modal);
}

糖果雨效果

function createCandyRain() {
  const candies = ['🍭', '🍬', '🍫', '🍡', '🍪'];
  const container = document.body;

  setInterval(() => {
    const candy = document.createElement('div');
    candy.textContent = candies[Math.floor(Math.random()*candies.length)];
    candy.style.position = 'absolute';
    candy.style.top = '-30px';
    candy.style.left = Math.random()*window.innerWidth + 'px';
    candy.style.fontSize = (20 + Math.random()*20) + 'px';
    container.appendChild(candy);

    let pos = -30;
    const fall = setInterval(() => {
      if(pos > window.innerHeight) {
        clearInterval(fall);
        candy.remove();
      } else {
        pos += 5;
        candy.style.top = pos + 'px';
      }
    }, 30);
  }, 300);
}

使用方法