显示倒数计时器的javascript警报框 [英] javascript alert box which shows countdown timer
本文介绍了显示倒数计时器的javascript警报框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何在JavaScript警报框中显示倒数计时器.
How can I display my countdown timer in javascript alert box.
警报框应该只有一个.其中的内容必须更改.
alert box should be only one. The content in it must be changed.
我想在警报框中看到计时器.
I want to saw the timer in alert box.
例如.
这是我的代码.
<html>
<head>
<title></title>
<script>
var end = new Date('04/01/2015');
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
var content = "";
function showRemaining() {
var now = new Date();
var distance = end.getTime() - now.getTime();
if (distance < 0) {
clearInterval(timer);
document.getElementById('countdown').innerHTML = 'EXPIRED!';
return;
}
var days = Math.floor(distance / _day);
var hours = Math.floor((distance % _day) / _hour);
var minutes = Math.floor((distance % _hour) / _minute);
var seconds = Math.floor((distance % _minute) / _second);
document.getElementById('countdown').innerHTML = days + 'days ';
document.getElementById('countdown').innerHTML += hours + 'hrs ';
document.getElementById('countdown').innerHTML += minutes + 'mins ';
document.getElementById('countdown').innerHTML += seconds + 'secs';
}
timer = setInterval(showRemaining, 1000);
</script>
</head>
<body onload="window.alert()">
<div id="countdown"></div>
</body>
</html>
我应该在哪里放置JavaScript警报框. 请引导我朝着这个方向前进.
where should I put my javascript alert box. Please guide me towards this.
谢谢.
推荐答案
只需组成自己的:)
$("#alert-wrapper").css({ 'zoom': 0.8, 'opacity':0 }).animate({ 'zoom': 1, 'opacity':1 },100)
var end = new Date('04/01/2015');
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
var content = "";
function showRemaining() {
var now = new Date();
var distance = end.getTime() - now.getTime();
if (distance < 0) {
clearInterval(timer);
document.getElementById('countdown').innerHTML = 'EXPIRED!';
return;
}
var days = Math.floor(distance / _day);
var hours = Math.floor((distance % _day) / _hour);
var minutes = Math.floor((distance % _hour) / _minute);
var seconds = Math.floor((distance % _minute) / _second);
document.getElementById('countdown').innerHTML = days + 'days ';
document.getElementById('countdown').innerHTML += hours + 'hrs ';
document.getElementById('countdown').innerHTML += minutes + 'mins ';
document.getElementById('countdown').innerHTML += seconds + 'secs';
}
showRemaining(); // adding this so as to immediately show the time after alert is loaded
timer = setInterval(showRemaining, 1000);
#alert-wrapper{
border:1px solid black;
height:120px;
width:300px;
padding:30px;
padding-top:20px;
position:relative;
margin:0 auto;
}
#btn{
position:absolute;
bottom:20px;
right:20px;
width:70px;
height:30px;
border:1px solid grey;
background-color:white;
}
#btn:hover{
border:1px solid black;
}
#btn:active{
background-color:rgb(250,250,250);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="alert-wrapper">
<div id="countdown"></div>
<input type="button" value="OK" id="btn" onclick="$(this).parent().animate({ 'zoom': 0.8, 'opacity':0 }, 100)">
</div>
这篇关于显示倒数计时器的javascript警报框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
