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

最新推荐文章于 2023-07-09 10:02:37 发布

jfkidear

最新推荐文章于 2023-07-09 10:02:37 发布

阅读量833

点赞数

分类专栏： web

web 专栏收录该内容

81 篇文章 0 订阅

订阅专栏

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

up vote -1 down vote favorite

I would like to display a count down timer in an alert box.

When the page loads, the alert should appears, counting down.
When it reaches zero, the alert should disappear automatically, and the user can proceed to view the page.

Can this be achieved using an alert box?

Example link here

edited Apr 22 at 14:14

Sheepy
4,336 12 35

asked Apr 22 at 13:19

Yuvaraj
7 6

What have you tried? What approach have you looked into? – AmmarCSE Apr 22 at 13:21

Well you can not use an alert to start if that is what you want to happen. – epascarello Apr 22 at 13:21

countdown time run in alert to view the page – Yuvaraj Apr 22 at 13:23

I'd look into an overlay div to display countdown over the top of the page content, which can be hidden after countdown finishes. Alert cannot do what you are asking for. – piggy Apr 22 at 13:24

then what is the way to solve this problem – Yuvaraj Apr 22 at 13:24

add a comment

2 Answers

active oldest votes

up vote 3 down vote accepted

It is not possible to use an alert dialog to do what you want. window.alert can only display static text and must be actioned by the user before it will go away (i.e. they must click on "OK")

However, what you can do instead is to put a "blanket" over the page which is essentially a <div>tag styled with CSS to full width and height, fixed position, and a z-index higher than everything on the page. Optionally you can also apply an opacity setting so the page is still visible. This blanket prevents users from interacting with page elements.

On top of that you can put another <div> which has an even higher z-index in which you can place your timer element.

You can update your timer with the setInterval Javascript method, and upon reaching 0, it can remove the blanket and timer div and stop and clear the interval timer.

Hope this helps!

answered Apr 22 at 13:27

Niraj Bhawnani
84 1 4

add a comment

up vote 0 down vote

You should use a div to overlay your page content until the countdown has ended.

Append the new div to the page, and then change it's display CSS property to none to hide it after five seconds.
HTML and CSS below are just for example, they represent your own current content, obviously.

It can be done like this -

HTML Just for example's sake.

<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);
}

To go a bit further, you should disable/enable your background content dependant on whether the overlay is displayed.

Working example here

answered Apr 22 at 13:40

piggy
173 12

add a comment

jfkidear

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Can I use a JavaScript Alert box to show a countdown timer?

Can I use a JavaScript Alert box to show a countdown timer?up vote-1down votefavoriteI would like to display a count down timer in an alert box.When t
复制链接

扫一扫