当前位置：首页 > JavaScript

js图片实现倒计时

2026-03-01 07:23:34JavaScript

使用 JavaScript 实现图片倒计时

通过 JavaScript 和 HTML 结合，可以实现图片倒计时效果。以下是两种常见方法：

js图片实现倒计时

方法一：动态替换图片

创建一个图片数组，根据倒计时时间动态切换图片。

js图片实现倒计时

<img id="countdownImage" src="image5.jpg" alt="Countdown">
<script>
  const images = ["image5.jpg", "image4.jpg", "image3.jpg", "image2.jpg", "image1.jpg"];
  const imgElement = document.getElementById('countdownImage');
  let count = images.length - 1;

  const timer = setInterval(() => {
    if (count >= 0) {
      imgElement.src = images[count];
      count--;
    } else {
      clearInterval(timer);
    }
  }, 1000);
</script>

方法二：Canvas 绘制倒计时

使用 Canvas 在图片上绘制倒计时数字。

<canvas id="countdownCanvas" width="500" height="500"></canvas>
<script>
  const canvas = document.getElementById('countdownCanvas');
  const ctx = canvas.getContext('2d');
  let count = 5;

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

  bgImage.onload = function() {
    drawCountdown();
  };

  function drawCountdown() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(bgImage, 0, 0, canvas.width, canvas.height);

    ctx.fillStyle = 'red';
    ctx.font = 'bold 72px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(count, canvas.width/2, canvas.height/2);

    if (count > 0) {
      count--;
      setTimeout(drawCountdown, 1000);
    }
  }
</script>

方法三：CSS 动画结合

使用 CSS 动画和 JavaScript 控制倒计时显示。

<div class="countdown-container">
  <img src="background.jpg" alt="Background">
  <div class="countdown-number">5</div>
</div>

<style>
  .countdown-container {
    position: relative;
  }
  .countdown-number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 72px;
    color: red;
    font-weight: bold;
  }
</style>

<script>
  const numberElement = document.querySelector('.countdown-number');
  let count = 5;

  const timer = setInterval(() => {
    count--;
    numberElement.textContent = count;
    if (count <= 0) {
      clearInterval(timer);
    }
  }, 1000);
</script>