我想在我想要的时间每天两次重新开始倒计时

Question

我做了一个javascript倒计时，效果很好。但我希望它每天重新启动两次，因为我每天运送两次订单。 太平洋标准时间上午 1 点至上午 11 点 太平洋标准时间下午 2-4 点

我希望它在时钟时间太平洋标准时间下午 4 点之后显示太平洋标准时间上午 11 点的倒计时时间，并且在上午 11 点之后它应该重置并显示下午 4 点的倒计时，并且在太平洋标准时间下午 4 点之后它应该重置并显示太平洋标准时间晚上 11 点的倒计时

这是我的倒计时代码。

// Set the date we're counting down to
var countDownDate = new Date("July 26, 2019 11:00:00").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);
    
  // Output the result in an element with id="demo"
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";
    
  // If the count down is over, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);

<p id="demo"></p>

Answer 1

在我看来，您的请求中有 2 或 3 个模糊点，例如 11 到 16 的段落会删除显示的值“EXPIRED”。还有一个问题是这个脚本是连续运行还是每天早上重新启动（这是我选择的选项）如果它连续运行它假设倒计时从第二天早上11点开始从16点开始？

这是第一个提案：

const CountDown = [ { elm: document.querySelector('#c11 span'), target:[11,00,00], time:0 }
                  , { elm: document.querySelector('#c16 span'), target:[16,00,00], time:0 }
                  ]
  ,   one_Sec   = 1000
  ,   one_Min   = one_Sec * 60
  ,   one_Hour  = one_Min * 60 


let JustNow       = new Date() 
  , idx_CountDown = -1
  , refTimeLeft   = 0

CountDown.forEach( (Cd, idx)=>
  {
    Cd.time = new Date()

    Cd.time.setHours( Cd.target[0] )
    Cd.time.setMinutes( Cd.target[1] )
    Cd.time.setSeconds( Cd.target[2] )

    let TimeLeft = JustNow - Cd.time

    Cd.elm.textContent = (TimeLeft<0) ? 'not yet' : 'EXPIRED'

    if ( TimeLeft < 0 && (TimeLeft > refTimeLeft || refTimeLeft === 0 ))
    {
      idx_CountDown = idx
      refTimeLeft   = TimeLeft
    }
  })

if (refTimeLeft < 0)
  {
  let timerInterval = setInterval(_=>
    {
    let JustNow  = new Date()
      , TimeLeft = JustNow - CountDown[idx_CountDown].time
      , TimeLPlus = Math.abs( TimeLeft )
      ,  Hrs     = ('0' + Math.floor(TimeLPlus / one_Hour)).slice(-2)
      ,  Mns     = ('0' + Math.floor((TimeLPlus % one_Hour) / one_Min)).slice(-2)
      ,  Scs     = ('0' + Math.floor((TimeLPlus % one_Min) / one_Sec)).slice(-2)

    if (TimeLeft>=0) 
      {
      CountDown[idx_CountDown].elm.textContent = 'EXPIRED'
      if (++idx_CountDown>=CountDown.length)
        { clearInterval(timerInterval) }
      }
    else
      {
      CountDown[idx_CountDown].elm.textContent = `${Hrs}h ${Mns}m ${Scs}s`
      }  
    }
    , one_Sec)
  }

<h4>CountDowns</h4>

<p id="c11">until 11h : <span></span> </p>
<p id="c16">until 16h : <span></span> </p>

第 2 版 只有 1 个倒计时的永久版本

const lib_Count = document.querySelector('#count-element span:nth-child(1)')
  ,   val_Count = document.querySelector('#count-element span:nth-child(2)')
  ,   CountDown = [ { target:[11,00,00], time:0, lib : 'until 11h : ' }
                  , { target:[16,00,00], time:0, lib : 'until 16h : ' }
  /* Add any time you need ---> , { target:[20,00,00], time:0, lib : 'until 20h : ' }  ---- */
                  ]
  ,   one_Sec   = 1000
  ,   one_Min   = one_Sec * 60
  ,   one_Hour  = one_Min * 60 

let JustNow       = new Date() 
  , idx_CountDown = -1
  , refTimeLeft   = 0

// prepare CountDowns for the day
CountDown.forEach( (Cd, idx)=>
  {
    Cd.time = new Date()
    Cd.time.setHours( Cd.target[0] )
    Cd.time.setMinutes( Cd.target[1] )
    Cd.time.setSeconds( Cd.target[2] )

    let TimeLeft = JustNow - Cd.time

    if (TimeLeft>=0) 
      {
      Cd.time.setDate(Cd.time.getDate() + 1)
      TimeLeft = JustNow - Cd.time
      }

    if (TimeLeft > refTimeLeft || refTimeLeft === 0 )
      {
      idx_CountDown         = idx
      refTimeLeft           = TimeLeft
      lib_Count.textContent = Cd.lib
      val_Count.textContent = ''
      }
  })

setInterval(_=>
  {
  let JustNow  = new Date()
    , TimeLeft = JustNow - CountDown[idx_CountDown].time
    , TimeLPlus = Math.abs( TimeLeft )
    ,  Hrs     = ('0' + Math.floor(TimeLPlus / one_Hour)).slice(-2)
    ,  Mns     = ('0' + Math.floor((TimeLPlus % one_Hour) / one_Min)).slice(-2)
    ,  Scs     = ('0' + Math.floor((TimeLPlus % one_Min) / one_Sec)).slice(-2)

  if (TimeLeft>=0) 
    {
    CountDown[idx_CountDown].time.setDate(CountDown[idx_CountDown].time.getDate() + 1)

    idx_CountDown = (idx_CountDown +1) % CountDown.length
    lib_Count.textContent = CountDown[idx_CountDown].lib
    val_Count.textContent = ''
    }
  else
    {
    val_Count.textContent = `${Hrs}h ${Mns}m ${Scs}s`
    }  
  }
  , one_Sec )

<h4>CountDown</h4>

<p id="count-element"><span></span><span></span> </p>

Answer 2

你可以做如下逻辑，

• 这里有两个函数
• 第一个函数将包含您的倒计时逻辑
• 第二个函数会将当前日期加上 11 小时，然后调用第一个函数
• 当第一个函数（11 小时倒计时）完成后，会再次调用第二个函数，以此类推

---

// set the current date and time
var currentCountDown = // current date

// call nextCountDown and pass current date which will set the countdown for 
// next 11 hours
nextCountDown(currentCountDown)

function doCountDown(countDownDate) {
    // put the above code in this function
    // If the count down is over, call nextCountDown to start the countdown 
    // for next interval 
    nextCountDown(countDownDate)
}

function nextCountDown(countDownDate){
    // add 11 hours to countDownDate
    newCountDownDate = countDownDate + 11 hours
    // call doCountDown() by passing the new date
    doCountDown(newCountDownDate)
}