我可以使用 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