I Want To Restart Countdown Twice A Day At My Desired Time

I made a javascript countdown, it works well. But I want it to restart twice a day as I ship my orders twice a day. 1- 11AM PST 2- 4PM PST I want it to show countdown time for 11A

Solution 1:

In my opinion, there are 2 or 3 obscure points in your request, as for example the passage of 11 to 16 erases the value 'EXPIRED' of the display. There is also the question of whether this script runs continuously or if it is restarted each morning (this is the option I chose) if it runs continuously it assumes that the countdown is restarted from 16h on that of 11h the next morning?

Here is the first proposal :

constCountDown = [ { 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 * 60letJustNow       = newDate() 
  , idx_CountDown = -1
  , refTimeLeft   = 0CountDown.forEach( (Cd, idx)=>
  {
    Cd.time = newDate()

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

    letTimeLeft = JustNow - Cd.timeCd.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(_=>
    {
    letJustNow  = newDate()
      , 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><pid="c11">until 11h : <span></span></p><pid="c16">until 16h : <span></span></p>

version 2perpetual with only 1 countdown

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 * 60letJustNow       = newDate() 
  , idx_CountDown = -1
  , refTimeLeft   = 0// prepare CountDowns for the dayCountDown.forEach( (Cd, idx)=>
  {
    Cd.time = newDate()
    Cd.time.setHours( Cd.target[0] )
    Cd.time.setMinutes( Cd.target[1] )
    Cd.time.setSeconds( Cd.target[2] )

    letTimeLeft = JustNow - Cd.timeif (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(_=>
  {
  letJustNow  = newDate()
    , 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><pid="count-element"><span></span><span></span></p>

Solution 2:

You can do the following logic,

• here there are two functions
• first function will contain your logic for doing the countdown
• second function will add 11 hours to current date and then call the first function
• When first function (11 hrs countdown) is finished, it will again call the second function and so on

---

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

functiondoCountDown(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)
}

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