javascript 显示倒数计时器的警告框

Question

如何在 javascript 警告框中显示我的倒数计时器。

警告框应该只有一个。里面的内容一定要改。

我想在警告框中看到计时器。

例如。

这是我的代码。

<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 警告框放在哪里。请指导我。

提前致谢。

Answer 1

没有办法您可以动态更改 alert() 的内容。

使用bootstrap modals instead for exemple (you could also use jQuery UI).

Answer 2

$(document).ready(function() {
    $('#myModal').modal();  
    var myVar=setInterval(function(){myTimer()},1000);

    function myTimer() {
        var d = new Date();
        document.getElementById("demo").innerHTML = d.toLocaleTimeString();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
          <div id="demo"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Answer 3

自己编:)

$("#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 显示倒数计时器的警告框

javascript alert box which shows countdown timer

javascript

jquery

alert