Search code examples
javascripthtmlwordpresstimercountdown

Countdown timer for WordPress -- not working

I am trying to setup a countdown timer that is reoccurring and goes every Sunday and counts down till 9:30am and then 11am...and I found the following code, but I can't seem to get it working. The HTML loads, but the JavaScript isn't...any ideas/help? It's a WP site and I just placed the JS in the JS section and then dropped the HTML...but nothing other than the HTML shows...

Sorry, don't have a lot of coding experience. Thank you so much--I really appreciate any help! (Code from @wssupport)

<script>
var curday;
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;
}
</script>

Call getSeconds() function to start timer with body onload

<body onload="getSeconds();">
    
    </body>

HTML

<h6>Live in <span class="days" id="days"></span><span class="smalltext"> days,</span>
<span class="hours" id="hours"></span><span class="smalltext"> hours,</span>
<span class="minutes" id="minutes"></span><span class="smalltext"> minutes</span>
</h6>
Solution

  • You forgot the <span id="seconds"></span>

    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;
}
    Call getSeconds() function to start timer with body onload

<body onload="getSeconds();">


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

</body>