Question

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

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

可以使用alert框来实现吗？

示例链接here

Answer 1

无法使用警告对话框执行所需操作。 window.alert只能显示静态文本，并且必须在用户离开之前对其进行操作（即他们必须点击“确定”）

但是，您可以做的是在页面上放置一个“毯子”，它基本上是一个<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);
}

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

工作示例here

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

2 个答案: