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

Question

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

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

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

例子link

Answer 1

无法使用警告对话框来执行您想要的操作。 window.alert 只能显示静态文本，必须由用户操作才能消失（即他们必须单击 "OK"）

但是，您可以做的是在页面上放置一个 "blanket"，它本质上是一个 <div> 标签，样式为 CSS，全宽和全高，固定位置，以及高于页面上所有内容的 z-index。您还可以选择应用不透明度设置，使页面仍然可见。此毯子可防止用户与页面元素进行交互。

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

您可以使用 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);
}

更进一步，您应该 disable/enable 背景内容取决于是否显示覆盖。

工作示例here

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

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

Can I use a JavaScript Alert box to show a countdown timer?

javascript

alert