为什么没有在我的浏览器中显示警报?

时间:2019-03-18 05:25:13

标签: javascript html alert clock

我已经为2020年东京奥运会倒计时创建了代码,我希望结果显示在警报中,但是我似乎无法使其显示。有人可以帮我解决这个问题吗?

        

    <script>
    // Set the date we're counting down to
    var countDownDate = new Date("July 24, 2020 00:00:00").getTime();

    // Update the count down every 1 second
    var x = setInterval(function() {

        // Get todays date and time
        var now = new Date().getTime();

        // Find the distance between now and the count down date
        var distance = countDownDate - now;

        // Time calculations for days, hours, minutes and seconds
        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);

        // Display the result in the element with id="demo"
        document.getElementById("demo").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";

        // If the count down is finished, write some text 
        if (distance < 0) {
        clearInterval(x);
        document.getElementById("demo").innerHTML = "EXPIRED";
        }
        }, 1000);

        //alerting the clock
        alert(days + hours + minutes + seconds);

2 个答案:

答案 0 :(得分:2)

如果将警报放在间隔功能之外,则只需调用一次警报:

// Set the date we're counting down to
var countDownDate = new Date("July 24, 2020 00:00:00").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Display the result in the element with id="demo"
  document.getElementById("demo").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";

  // If the count down is finished, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }

  alert(`${days} days, ${hours} hours, ${minutes} minutes,  ${seconds} seconds until the Tokyo 2020 Olympics`); // this jquery notation makes it easier to write strings depending on variables
  //alert(days + " days, " + hours + " hours, " +  minutes + " minutes, " + seconds + " seconds, until the Tokyo 2020 Olympics");
}, 10000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="demo"></p>

答案 1 :(得分:0)

如果要重复警报,则需要将其放置在间隔函数内(我修改了以下代码以显示所需内容的基本要点):

var countDownDate = new Date("July 24, 2020 00:00:00").getTime();

var x = setInterval(function() {
  var now = new Date().getTime();
  var distance = countDownDate - now;
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
  if (distance < 0) {
    clearInterval(x);
  }
  alert(`${days}${hours}${minutes}${seconds}`);
}, 1000);