I want to restart countdown twice a day at my desired time

Question

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 11AM PST after 4PM PST of clock time and after 11AM it should reset and show countdown for 4PM and after 4PM PST it should reset and show countdown for 11PM PST

Here is my countdown code.

// 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

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 :

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>

version 2 perpetual 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 * 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

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