我可以使用 JavaScript 警报框来显示倒数计时器吗？

Question

我想在alert框中显示count down timer 。

当页面加载时，应该会出现警报，倒计时。
当它达到零时，警报应自动消失，用户可以继续查看页面。

这可以使用alert框来实现吗？

示例链接在这里

Answer 1

无法使用警报对话框执行所需的操作。 window.alert只能显示静态文本，并且在消失之前必须由用户操作（即，他们必须单击“确定”）

但是，您可以做的是在页面上放置一个“毯子”，该毯子实际上是一个<div>标记，其样式为CSS，该宽度和高度，固定位置和z-index值均高于页面上的所有内容。 （可选）您还可以应用不透明度设置，以使页面仍然可见。 此毯子可防止用户与页面元素进行交互。

最重要的是，您可以放置​​另一个<div> ，它具有更高的z索引，您可以在其中放置计时器元素。

您可以使用setInterval Javascript方法更新计时器，并且在达到0时，它可以删除覆盖层和计时器div，并停止并清除间隔计时器。

希望这可以帮助！

Answer 2

您应该使用div覆盖页面内容，直到倒计时结束。

将新的div附加到页面上，然后将其display CSS属性更改为none以在五秒钟后将其隐藏。
下面的HTML和CSS仅作为示例，它们显然表示您自己的当前内容。

可以这样做-

HTML只是为了举例。

<div id="examplecontent"></div>

CSS

#examplecontent {
    height: 100vh;
    width: 100vw;
    background-color: #000;
}

JavaScript的

window.onload = Show_Countdown;
var counter = 5;

function Show_Countdown() {

    var countDown_overlay = 'position:absolute;' +
        'top:50%;' +
        'left:50%;' +
        'background-color:white;' +
        'z-index:1002;' +
        'overflow:auto;' +
        'width:400px;' +
        'text-align:center;' +
        'height:400px;' +
        'margin-left:-200px;' +
        'margin-top:-200px';

    $('body').append('<div id="overLay" style="' + countDown_overlay + '"><span id="time"></span></div>');

    var timer = setInterval(function () {
        document.getElementById("time").innerHTML = counter;
        counter = (counter - 1);

        if (counter < 0) 
        {            
            clearInterval(timer);
            document.getElementById("overLay").style.display = 'none';
        }

    }, 1000);
}

要更进一步，您应该根据是否显示叠加层来禁用/启用背景内容。

这里的工作示例

Answer 3

我能够做到这样......

// 1. Display an alert dialog with the content: "Warning! This message will self-destruct in"
alert("Warning! This message will self-destruct in")

// 2. Display a "3... 2... 1..." countdown using 3 alert dialog boxes
alert("3...")
alert("2...")
alert("1...")

// 3. This statement selects the <h1> element and replaces its text with "BOOM!".
document.querySelector("h1").textContent = "🔥BOOM!🔥";

// 4. Log "Message destroyed!" to the console