您的位置：首页 > Web前端 > JavaScript

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

2015-10-30 10:45 901 查看

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

up
vote-1down
votefavorite

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

javascript alertdialog

shareimprove
this question

edited Apr
22 at 14:14

Sheepy

4,3361235

asked Apr 22 at 13:19

Yuvaraj

76

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 vote3down
voteaccepted

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!

shareimprove
this answer

answered Apr 22 at 13:27

Niraj Bhawnani

8414

add
a comment

up vote0down
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

shareimprove
this answer

answered Apr 22 at 13:40

piggy

17312

add
a comment

Your Answer

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

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