Make countdown timer go till 9:30am, then 11am and then reset to next Sunday-CodePudding

I have the following code, but want to adjust so that we can have the countdown for two different times.

var secTime;
var ticker;

function getSeconds() {
  var nowDate = new Date();
  var dy = 1; //Sunday through Saturday, 0 to 6
  var countertime = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 21, 0, 0); //20 out of 24 hours = 8pm

  var curtime = nowDate.getTime(); //current time
  var atime = countertime.getTime(); //countdown time
  var diff = parseInt((atime - curtime) / 1000);
  if (diff > 0) {
    curday = dy - nowDate.getDay()
  } else {
    curday = dy - nowDate.getDay() - 1
  } //after countdown time
  if (curday < 0) {
    curday  = 7;
  } //already after countdown time, switch to next week
  if (diff <= 0) {
    diff  = (86400 * 7)
  }
  startTimer(diff);
}

function startTimer(secs) {
  secTime = parseInt(secs);
  ticker = setInterval("tick()", 1000);
  tick(); //initial count display
}

function tick() {
  var secs = secTime;
  if (secs > 0) {
    secTime--;
  } else {
    clearInterval(ticker);
    getSeconds(); //start over
  }

  var days = Math.floor(secs / 86400);
  secs %= 86400;
  var hours = Math.floor(secs / 3600);
  secs %= 3600;
  var mins = Math.floor(secs / 60);
  secs %= 60;

  //update the time display
  document.getElementById("days").innerHTML = curday;
  document.getElementById("hours").innerHTML = ((hours < 10) ? "0" : "")   hours;
  document.getElementById("minutes").innerHTML = ((mins < 10) ? "0" : "")   mins;
  document.getElementById("seconds").innerHTML = ((secs < 10) ? "0" : "")   secs;
}

<body onl oad="getSeconds();">


  <h6>Live in <span  id="days"></span><span > days,</span>
    <span  id="hours"></span><span > hours,</span>
    <span  id="minutes"></span><span > minutes</span>
    <span  id="seconds"></span><span > seconds</span>
  </h6>

</body>

But I want to have the countdown go to 9:30am and then as soon as it hits 9:30am, it starts counting down till 11am. After that reset and go to the next Sunday. How would I accomplish this?

CodePudding user response：

for simplicity we'll assume it is turned on a weekday. so we just need to count to target date1, then target date2.

var secTime;
var ticker;

var mode = "weekday"; // or "sunday" depending on a function yet to be written

function getSeconds() {
  var nowDate = new Date();
  var dy = 1; //Sunday through Saturday, 0 to 6
  if (mode == "weekday") {
    var countertime = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 09, 30, 00);
  }
  if (mode == "sunday") {
    var countertime = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 11, 00, 00);
  }

  if (mode == "sunday") {
    mode = "weekday"
  } else {
    mode = "sunday"
  }

  var curtime = nowDate.getTime(); //current time
  var atime = countertime.getTime(); //countdown time
  var diff = parseInt((atime - curtime) / 1000);
  if (diff > 0) {
    curday = dy - nowDate.getDay()
  } else {
    curday = dy - nowDate.getDay() - 1
  } //after countdown time
  if (curday < 0) {
    curday  = 7;
  } //already after countdown time, switch to next week
  if (diff <= 0) {
    diff  = (86400 * 7)
  }
  startTimer(diff);
}

function startTimer(secs) {
  secTime = parseInt(secs);
  ticker = setInterval(tick, 1000);
  tick(); //initial count display
}

function tick() {
  var secs = secTime;
  if (secs > 0) {
    secTime--;
  } else {
    clearInterval(ticker);
    getSeconds(); //start over
  }

  var days = Math.floor(secs / 86400);
  secs %= 86400;
  var hours = Math.floor(secs / 3600);
  secs %= 3600;
  var mins = Math.floor(secs / 60);
  secs %= 60;

  //update the time display
  document.getElementById("days").innerHTML = curday;
  document.getElementById("hours").innerHTML = ((hours < 10) ? "0" : "")   hours;
  document.getElementById("minutes").innerHTML = ((mins < 10) ? "0" : "")   mins;
  document.getElementById("seconds").innerHTML = ((secs < 10) ? "0" : "")   secs;
}

<body onl oad="getSeconds();">


  <h6>Live in <span  id="days"></span><span > days,</span>
    <span  id="hours"></span><span > hours,</span>
    <span  id="minutes"></span><span > minutes</span>
    <span  id="seconds"></span><span > seconds</span>
  </h6>

</body>