如何在 HTML 代码中显示倒数计时器脚本的输出

Question

我想弄清楚如何显示我在另一个脚本中在线找到的这个计时器脚本的输出。这是我找到的计时器脚本：

    // Set the date we're counting down to
    var countDownDate = new Date("Jan 5, 2022 15:37:25").getTime();
    
    // Update the count down every 1 second
    var x = setInterval(function() {
    
      // Get today's 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);

    <!-- Display the countdown timer in an element -->
    <p id="demo"></p>

我希望能够在我放置“我想在此处显示计时器”的位置显示计时器。

  <div class="flash-infos">   
    <div class="flash-info">
      <font color="white"; font size = 2; ><b>"I want to display the timer here"</b></font> <center>
    </div>    
  </div>

Answer 1

答案是：

<b id="memo"></b>

Answer 2

好的，我假设您在“p”标签和“font”标签中使用了 id="demo"。所以前者优先。只需在此处保留 id="demo"：

 <div class="flash-infos">   
    <div class="flash-info">
      <font font size = 2; ><b id="demo"></b></font> <center>
    </div>    
  </div>

并删除您在 HTML 的其他部分使用的任何其他 id="demo"。请注意，我已经删除了 color="white"，不确定它是否与默认背景颜色同步。如果可能是白色，请尝试设置不同的颜色。

如何在 HTML 代码中显示倒数计时器脚本的输出

How do I display the output of a countdown timer script in HTML code

html

javascript

css

countdown

shopify