重置js倒数计时器

亚历山大·康斯坦丁

我不是 js 开发人员,更多的是平面设计师想要的开发人员,我正在为朋友创建一个网站,我需要在截止日期后重置倒计时。

我在 Codepen 上从 Matt Smith 那里得到了这段代码,它工作得非常好(你可以看看https://m13m.webflow.io/),但不幸的是计时器变为负数,我希望它重复。

我怎么能那样做?

非常感谢!

 <script>
// Original Pen by Matt Smith 
const second = 1000,
      minute = second * 60,
      hour = minute * 60,
      day = hour * 24;

let countDown = new Date('Mar 19, 2022 22:28:00').getTime(),
    x = setInterval(function() {

      let now = new Date().getTime(),
          distance = countDown - now;

      document.getElementById('days').innerText = Math.floor(distance / (day)),
        document.getElementById('hours').innerText = Math.floor((distance % (day)) / (hour)),
        document.getElementById('minutes').innerText = Math.floor((distance % (hour)) / (minute)),
        document.getElementById('seconds').innerText = Math.floor((distance % (minute)) / second);
      
      //do something later when date is reached
      //if (distance < 0) {
      //  clearInterval(x);
      //  'IT'S MY BIRTHDAY!;
      //}

    }, second)
  
</script> 
迈克·洛瑞

你的代码看起来不错。您必须检查距离是否低于 0,然后清除计时器并打印 BDay 文本。

// Original Pen by Matt Smith 
const second = 1000,
      minute = second * 60,
      hour = minute * 60,
      day = hour * 24;

let countDown = new Date('Mar 19, 2022 22:28:00').getTime();
let x = setInterval(function() {
  let now = new Date().getTime();
  let distance = countDown - now;
  if (distance < 0) {    
    document.getElementById('msg').innerHTML = "HAPPY BDAY"    
    clearInterval(x);
    return false;
  }
  document.getElementById('days').innerText = Math.floor(distance / (day));
  document.getElementById('hours').innerText = Math.floor((distance % (day)) / (hour));
  document.getElementById('minutes').innerText = Math.floor((distance % (hour)) / (minute));
  document.getElementById('seconds').innerText = Math.floor((distance % (minute)) / second);
  
  

    }, second)
<div id="days"></div>
<div id="hours"></div>
<div id="minutes"></div>
<div id="seconds"></div>
<div id="msg"></div>

更新(计时器将重新开始)

// Original Pen by Matt Smith 
const second = 1000,
      minute = second * 60,
      hour = minute * 60,
      day = hour * 24;
let round = 1;
const diff = 1; // set timediff in minutes
//let countDown = new Date('Mar 19, 2022 22:28:00').getTime();
let countDown = new Date(new Date().getTime() + diff*60000);
let x = setInterval(function() {
  let now = new Date().getTime();
  let distance = countDown - now;
  if (distance < 0) {    
    countDown = new Date(new Date().getTime() + diff*60000);
    document.getElementById('msg').innerHTML = "HAPPY BDAY" + ' Round => ' + (round++)
  }
  document.getElementById('days').innerText = Math.floor(distance / (day));
  document.getElementById('hours').innerText = Math.floor((distance % (day)) / (hour));
  document.getElementById('minutes').innerText = Math.floor((distance % (hour)) / (minute));
  document.getElementById('seconds').innerText = Math.floor((distance % (minute)) / second);
  
}, second)
<div id="days"></div>
<div id="hours"></div>
<div id="minutes"></div>
<div id="seconds"></div>
<div id="msg"></div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章