【问题标题】:How do I display the output of a countdown timer script in HTML code如何在 HTML 代码中显示倒数计时器脚本的输出
【发布时间】:2023-04-08 18:56:01
【问题描述】:

我试图弄清楚如何在另一个脚本中显示我在网上找到的这个计时器脚本的输出。这是我找到的计时器脚本:

    // 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>

【问题讨论】:

  • 你知道如何使用命令document.getElementById("demo")吗?事实上,描述告诉你如何使用它。
  • @KNVB,我这样做了,但没有出现我使用
    id="demo"

标签: javascript html css shopify countdown


【解决方案1】:

好吧,我假设您在“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",不确定它是否与默认背景颜色同步。如果可能是白色,请尝试设置不同的颜色。

【讨论】:

  • 成功了!删除另一个 id = "demo" 解决了问题!!我的颜色仍然是“白色”。 @Deepak
  • 有没有办法也可以在倒计时的左侧添加文字?
  • 肯定有。使用您的脚本,例如: document.getElementById("demo").innerHTML = "Your content here..." + days + "d" + hours + "h"
  • 效果很好,再次感谢!!
【解决方案2】:

答案是:

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

【讨论】:

  • 我也试过了,所以我的栏会循环显示我输入的各种文本,当它到达 id="demo" 的脚本时,什么也没有出现。我把字体颜色设置为白色,所以它应该显示一些东西。我应该把脚本放在我试图显示文本的地方吗? @KNVB。我试图放置 id=demo 的地方也在脚本中
  • 它对你有用吗?
  • 我的解决方案和Deepak一样。
  • 不同之处在于我仍然有 2 id = "demo" 在你的。但本质上是一样的
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多