我如何使用 javascript 将爆炸 gif 叠加为可调用函数？

Question

我的网站上有一个倒计时器，我希望它在计时器用完时覆盖通用爆炸 GIF。当它用完时，我有一个函数调用，现在我只需要知道该函数中会包含什么。

我对于 JavaScript 和 Web 开发来说真的很陌生，所以我不知道如何去做。

我尝试在网上查找，但我找到的所有文档都没有提供任何帮助或没有任何意义。

这是我到目前为止的代码：

window.onload = function () {
    var time = 299, // your time in seconds here
        display = document.querySelector('#timer');
    startTimer(time, display);
};

function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
        minutes = parseInt(timer / 60, 10)
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;

        if (--timer < 0) {
            
            // This is the part that will call the explosion function.
        }
    }, 1000);
}

Answer 1

定时器设置得很好！要在计时器用完时覆盖爆炸 GIF，您只需在 GIF 中添加一个图像元素，并设置其样式，使其在倒计时达到 0 时出现在内容上。

1. 将爆炸 GIF 添加到 HTML，但首先将其隐藏：

<img id="explosion" src="your-explosion.gif" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:9999;" />

2. 在 JavaScript 中，修改计时器达到 0 的部分以显示 GIF：

if (--timer < 0) {
    document.getElementById('explosion').style.display = 'block';
}

因此，更新后的 startTimer 函数将如下所示：

function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;

        if (--timer < 0) {
            // show the explosion gif
            document.getElementById('explosion').style.display = 'block';
        }
    }, 1000);
}

当计时器达到 0 时，这将使 GIF 占据整个屏幕。请告诉我它是否有效