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

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

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

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

例如。

这是我的代码。

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

我应该在哪里放置我的javascript警告框。 请指导我这个。

提前致谢。

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

Answer 2

您无法动态更改alert()的内容。

使用bootstrap模式代替例子（你也可以使用jQuery UI ）。

Answer 3

 $(document).ready(function() { $('#myModal').modal(); var myVar=setInterval(function(){myTimer()},1000); function myTimer() { var d = new Date(); document.getElementById("demo").innerHTML = d.toLocaleTimeString(); } }); 

    
 
 
 
 × 
Modal title
 
 
 
 
 
 Close Save changes