logo标签列表

JavaScript警告框显示倒计时计时器。

javascriptjqueryalert
3

如何在JavaScript警告框中显示倒计时器。

警告框应该只有一个。其中的内容必须更改。

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

例如：

enter image description here

这是我的代码：

<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弹出框放在哪里？请指导我。

提前致谢。

您无法更改普通“alert()”对话框的内容。 - Pointy
你好，谢谢 Pointy。我应该怎么做才能改变它呢？ - Jimmy
您可以使用自己的代码或某些框架来创建自己的“模态”对话框。 - Pointy
3个回答
1
Bootstrap只是众多支持自定义对话框的框架之一。 - Pointy
嗨，感谢D4V1D。所以没有可能更新弹出框。感谢您的反馈。我将尝试使用Bootstrap模态框。 - Jimmy
不，没有。尝试一下“bootstrap”，它是一个非常好的框架。如果有帮助的话，请随意接受我的答案。 - D4V1D
是的，我刚刚编辑了我的回答。那是写错了。谢谢。 - Jimmy
1

自己编一个吧 :)

$("#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>

谢谢nicael，看起来正是我想要的东西。点个赞。 - Jimmy
我原本想只用JavaScript，但是使用jQuery也可以。 - Jimmy
@James Fine。我只是用 jQuery 来制作动画 :) 你试过点击按钮了吗？ - nicael
是的，我尝试了一下，看起来很不错。我之前不知道animate，谢谢你的指导。 :) - Jimmy
0

$(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 -->

谢谢odedta。这非常有帮助。 - Jimmy
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接