当前位置：首页 > JavaScript

js图片实现倒计时

2026-04-04 08:00:42JavaScript

实现图片倒计时的方法

使用Canvas绘制倒计时

通过Canvas动态绘制倒计时数字或图形，结合requestAnimationFrame实现动画效果。

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

function drawCountdown() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.font = '48px Arial';
    ctx.fillStyle = 'red';
    ctx.textAlign = 'center';
    ctx.fillText(count, canvas.width / 2, canvas.height / 2);

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

使用CSS动画和图片序列

预加载一组倒计时数字图片，通过CSS动画切换显示。

<div id="countdownContainer"></div>

const container = document.getElementById('countdownContainer');
const images = Array.from({length: 10}, (_, i) => `num_${i}.png`);

let currentIndex = 9;
function updateCountdown() {
    container.style.backgroundImage = `url(${images[currentIndex]})`;
    if (currentIndex > 0) {
        currentIndex--;
        setTimeout(updateCountdown, 1000);
    }
}
updateCountdown();

使用SVG动画

通过SVG的文本和动画特性实现平滑的倒计时效果。

<svg id="countdownSvg" width="200" height="200">
    <text x="100" y="100" text-anchor="middle" font-size="48" fill="blue">10</text>
</svg>

const svgText = document.querySelector('#countdownSvg text');
let count = 10;

function animateCountdown() {
    svgText.textContent = count;
    if (count > 0) {
        count--;
        setTimeout(animateCountdown, 1000);
    }
}
animateCountdown();

使用第三方库（如GSAP）

借助动画库实现更复杂的倒计时效果。

js图片实现倒计时

import { gsap } from 'gsap';

let count = { value: 10 };
gsap.to(count, {
    value: 0,
    duration: 10,
    onUpdate: () => {
        document.getElementById('countdown').textContent = Math.ceil(count.value);
    }
});