javascript - 如何使用 javascript 在我的网站上添加倒计时？

Question

所以我想在我的网站上添加一个倒计时。这是我到目前为止所拥有的。问题是它没有向 html 显示 javascript 编码。也许javascript编码有问题，因为我认为它与html文件无关。

    const countdown = () => {
      const countDate = new Date("November 7, 2021 00:00:00").getTime();
      const now = new Date().getTime();
      const gap = countDate - now;
    
      const second = 1000;
      const minute = second * 60;
      const hour = minute * 60;
      const day = hour * 24;
    
      const textDay = Math.floor(gap / day);
      const textHour = Math.floor((gap % day) / hour);
      const textMinute = Math.floor((gap % hour) / minute);
      const textSecond = Math.floor((gap % minute) / second);
    
    
           document.querySelector('.day').innerText = textDay;
           document.querySelector('.hour').innerText = textHour;
           document.querySelector('.minute').innerText = textMinute;
           document.querySelector('.second').innerText = textSecond;
    };
    
    setInterval(countdown, 1000);

   <section class="coming-soon">
              <div>
                <h3>Bis zum EMS...</h3>
                <div class="countdown">
                  <div class="container-day">
                    <h4 class="day">Time</h4>
                    <h4>Day</h4>
                  </div>
                  <div class="container-hour">
                    <h4 class="hour">Time</h4>
                    <h4>Hour</h4>
                  </div>
                  <div class="container-minute">
                    <h4 class="minute">Time</h4>
                    <h4>Minute</h4>
                  </div>
                  <div class="container-second">
                    <h4 class="second">Time</h4>
                    <h4>Second</h4>
                  </div>
                </div>
              </div>
            </section>

它不起作用，但我还没弄清楚为什么。sm可以帮忙吗？

标签： javascripthtmlcss

Answer 1

这是从我在网站上使用的示例中提取的示例。它使用 jQuery、moment js、moment timezone 和 moment timezone 来处理数据。 https://jsfiddle.net/mdzLhvqw/1/

<div class="timer"></div>
<script>
$(function(){
  let end=moment("2021-11-07T00:00:00").tz('America/New_York');
  let timer=setInterval(function(){
    let now=moment().tz('America/New_York');
    let diff=moment.duration(end.diff(now));
    let days=diff.get("days")<1?'':(diff.get("days")>1?diff.get("days")+'days ':diff.get("days")+"day ");
    let hr=diff.get("hours")<2?diff.get("hours")+'hr ':diff.get("hours")+'hrs ';
    let mn=diff.get("minutes")<2?diff.get("minutes")+"min ":diff.get("minutes")+"mins ";
    let sec=diff.get("seconds")<2?diff.get("seconds")+"sec":diff.get("seconds")+"secs";
    $(".timer").text(days+hr+mn+sec);
    if(now>=end){
      clearInterval(timer);
    }
  },1000);
});
</script>