【问题标题】:10 mins countdown timer run continuously for all10 分钟倒计时计时器连续运行
【发布时间】:2021-11-18 16:56:51
【问题描述】:

我正在尝试制作一个 10 分钟的倒数计时器。该计时器应该为每个人持续运行。它不应该总是从 9.59.59 开始。我尝试了很多方法,但都没有成功。所以我需要帮助。

/* return the text name of the day of the week from the day #
*/

function DayNameFromDOW(dDate) {
  var weekday = new Array(7);
  weekday[0] = "Sunday";
  weekday[1] = "Monday";
  weekday[2] = "Tuesday";
  weekday[3] = "Wednesday";
  weekday[4] = "Thursday";
  weekday[5] = "Friday";
  weekday[6] = "Saturday";
  return weekday[dDate.getDay()];
}

function NextWebinarDateandTime() {
  CurDate = new Date();
}

var twoDaysFromNow = new Date().getTime() / 1000 + 86400 * 2 + 1;    
document.addEventListener("DOMContentLoaded", () => {
  NextWebinarDateandTime();    

  var CurrentDayOfWeek = CurDate.getDay();
  var CurrentHours = CurDate.getHours();
  var CurrentMinutes = CurDate.getMinutes();
  var CurrentSeconds = CurDate.getSeconds();

  // what's the first hour of day we want to run a webinar?
  FirstHour = 9;
  LastHour = 11;    

  FirstDOW = 1;
  LastDOW = 1;

  /* set the next webinar to the top of the next hour */
  NextWebinar =
    CurDate.getTime() / 1000 +
    (600 - CurrentMinutes * 60) +
    (60 - CurrentSeconds);

  var nSecsUntilNextWebinar =
    800 - CurrentMinutes * 60 + (60 - CurrentSeconds);

  var d = new Date();

  //  d.setTime(n);
  // new Date(CurDate.getTime());
  document.getElementById("CurDate").innerHTML = CurDate;
  document.getElementById("CurDategetTime").innerHTML = d.getTime();

  document.getElementById(
    "nSecsUntilNextWebinar"
  ).innerHTML = nSecsUntilNextWebinar;
  document.getElementById("nextwebinardateandtime").innerHTML = Date(twoDaysFromNow);    

  // Set up FlipDown
  var flipdown = new FlipDown(NextWebinar)

    // Start the countdown
    .start()

    // Do something when the countdown ends
    .ifEnded(() => {});
});

这是我在 codepen 中的代码: https://codepen.io/themeix/pen/OJjdwJp

【问题讨论】:

  • 浏览器 A 中运行的 Javascript 应该如何影响其他浏览器?为什么你会期望这是可能的?
  • 我主要关心的是这里。每个人都会看到同样的时间,codepen.io/smschk/pen/ZEYoaBQ 他们在那里呆了 1 小时,并且时间相同的时间显示给每个人浏览器刷新
  • 倒计时到一个固定的未来时间点,而不是当前时间 + X。
  • 如果我不使用当前时间,那么每次加载都会从头开始

标签: javascript countdown


【解决方案1】:

你应该倒计时到未来的具体时间,而不是当前时间 + X

看看这个脚本

function getTimeRemaining(endtime){
  const total = Date.parse(endtime) - Date.parse(new Date()); // Convert time variables to miliseconds and substract them.
  const seconds = Math.floor( (total/1000) % 60 );
  const minutes = Math.floor( (total/1000/60) % 60 );
  const hours = Math.floor( (total/(1000*60*60)) % 24 );
  const days = Math.floor( total/(1000*60*60*24) );

  return {
    total,
    days,
    hours,
    minutes,
    seconds
  };
}

const deadline = 'December 31 2021 23:59:59 GMT+0200';
getTimeRemaining(deadline).minutes // You can call your function this way because it return object

【讨论】:

  • 如何解决“那个计时器应该为每个人持续运行。”?
猜你喜欢
  • 1970-01-01
  • 2018-11-09
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多