当前位置：首页 > JavaScript

js图片实现倒计时

2026-01-30 16:20:13JavaScript

使用 JavaScript 实现图片倒计时

在网页中实现图片倒计时效果，可以通过动态修改图片的 src 属性或结合 CSS 动画来实现。以下是两种常见的方法：

方法一：动态切换图片源

通过 JavaScript 定时器动态修改图片的 src 属性，实现倒计时效果。

<img id="countdownImage" src="image5.jpg" alt="Countdown">

const countdownImage = document.getElementById('countdownImage');
let count = 5; // 倒计时秒数

const timer = setInterval(() => {
  count--;
  countdownImage.src = `image${count}.jpg`; // 根据倒计时数字切换图片

  if (count <= 0) {
    clearInterval(timer);
    countdownImage.src = 'finalImage.jpg'; // 倒计时结束显示最终图片
  }
}, 1000); // 每秒更新一次

方法二：结合 CSS 动画

通过 CSS 动画控制图片的显示时间，JavaScript 用于触发动画。

<div id="countdownContainer">
  <img class="countdown-img" src="image5.jpg" data-time="5">
  <img class="countdown-img" src="image4.jpg" data-time="4">
  <img class="countdown-img" src="image3.jpg" data-time="3">
  <img class="countdown-img" src="image2.jpg" data-time="2">
  <img class="countdown-img" src="image1.jpg" data-time="1">
  <img class="final-img" src="finalImage.jpg">
</div>

.countdown-img {
  position: absolute;
  opacity: 0;
  animation: fadeInOut 1s forwards;
}

.final-img {
  opacity: 0;
}

@keyframes fadeInOut {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

const container = document.getElementById('countdownContainer');
const images = document.querySelectorAll('.countdown-img');
const finalImage = document.querySelector('.final-img');

images.forEach(img => {
  const delay = parseInt(img.dataset.time) * 1000;
  setTimeout(() => {
    img.style.animation = `fadeInOut 1s forwards`;
  }, (5 - parseInt(img.dataset.time)) * 1000);
});

setTimeout(() => {
  finalImage.style.opacity = '1';
}, 5000); // 5秒后显示最终图片

方法三：Canvas 绘制倒计时

使用 Canvas 动态绘制倒计时数字和图片。

js图片实现倒计时

<canvas id="countdownCanvas" width="400" height="400"></canvas>

const canvas = document.getElementById('countdownCanvas');
const ctx = canvas.getContext('2d');
let count = 5;

const backgroundImage = new Image();
backgroundImage.src = 'background.jpg';

const drawCountdown = () => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);

  ctx.font = 'bold 100px Arial';
  ctx.fillStyle = 'white';
  ctx.textAlign = 'center';
  ctx.fillText(count, canvas.width/2, canvas.height/2);

  count--;

  if (count >= 0) {
    setTimeout(drawCountdown, 1000);
  } else {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    const finalImage = new Image();
    finalImage.src = 'final.jpg';
    finalImage.onload = () => {
      ctx.drawImage(finalImage, 0, 0, canvas.width, canvas.height);
    };
  }
};

backgroundImage.onload = drawCountdown;