CODEWITHSUNDEEP
javascriptjqueryhtml
Chobbit
Chobbit

Reputation: 654

Javascript Countdown to show/hide on specified days & hours

Hi I've been trying to take and work with some code that I can get partially working, I want a countdown that we can set an end time it counts down to (obvious is obvious out of the way), we also want to set it to show at only certain times of the day and only certain days of the week.

I've managed to get the below working so we can set a time of the day to show but I can't get it to work so it only shows on the certain specified days. Can anyone help please?

var countdownMessage = "This ends in";
var now = new Date();
var time = now.getTime(); // time now in milliseconds
var countdownEnd = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 12, 59); // countdownEnd 0000 hrs

//////////////////////////* Countdown *///////////////////////////////
function getSeconds() {
  var ft = countdownEnd.getTime() + 86400000; // add one day
  var diff = ft - time;
  diff = parseInt(diff / 1000);
  if (diff > 86400) {
    diff = diff - 86400
  }
  startTimer(diff);
}

var timeInSecs;
var ticker;

function startTimer(secs) {
  timeInSecs = parseInt(secs);
  ticker = setInterval("tick()", 1000);
  tick(); // to start counter display right away
}

function tick() {
  var secs = timeInSecs;
  if (secs > 0) {
    timeInSecs--;
  } else {
    clearInterval(ticker); // stop counting at zero
    //getSeconds();  // and start again if required
  }

  var hours = Math.floor(secs / 3600);
  secs %= 3600;
  var mins = Math.floor(secs / 60);
  secs %= 60;
  var result = ((hours < 10) ? "0" : "") + hours + " hours " + ((mins < 10) ? "0" : "") + mins + " minutes " + ((secs < 10) ? "0" : "") + secs + " seconds";
  document.getElementById("countdown").innerHTML = (countdownMessage) + " " + result;
}


///////////////* Display at certain time of the day *//////////////////

//gets the current time. 
var d = new Date();
if (d.getHours() >= 7 && d.getHours() <= 15) {
  $("#countdown").show();
} else {
  $("#countdown").hide();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body onload="getSeconds()">

  <span id="countdown" style="font-weight: bold;"></span>

</body>

[EDIT]

Just to add to this I tried changing part of the script to this but it didn't work:

$(function() {
$("#countdown").datepicker(
    { beforeShowDay: function(day) {
        var day = day.getDay();
        if (day == 1 || day == 2) {
            //gets the current time. 
            var d = new Date();
            if(d.getHours() >= 7 && d.getHours() <= 10 ){
                $("#countdown").show();
            }
            else {  
                 $("#countdown").hide();
            }
        } else {
            $("#countdown").hide();
        }
    }
});

});

Upvotes: 1

Views: 1077

Answers (1)

Aruna
Aruna

Reputation: 12022

Whatever you did is all good except the setInterval part where you are passing the string value as setInterval("tick()", 1000) instead of a function reference as setInterval(tick, 1000)

Also, I have updated the code as below to check the specific day along with specific hours which you had,

var d = new Date();
var day = d.getDay();

if (day == 0 || day == 6) {
  if (d.getHours() >= 0 && d.getHours() <= 8) {
    $("#countdown").show();
  } else {
    $("#countdown").hide();
  }
}

You can give a try below,

var countdownMessage = "This ends in";
var now = new Date();
var time = now.getTime(); // time now in milliseconds
var countdownEnd = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 12, 59); // countdownEnd 0000 hrs

//////////////////////////* Countdown *///////////////////////////////
function getSeconds() {
  var ft = countdownEnd.getTime() + 86400000; // add one day
  var diff = ft - time;
  diff = parseInt(diff / 1000);
  if (diff > 86400) {
    diff = diff - 86400
  }
  startTimer(diff);
}

var timeInSecs;
var ticker;

function startTimer(secs) {
  timeInSecs = parseInt(secs);
  ticker = setInterval(tick, 1000);
  tick(); // to start counter display right away
}

function tick() {
  var secs = timeInSecs;
  if (secs > 0) {
    timeInSecs--;
  } else {
    clearInterval(ticker); // stop counting at zero
    //getSeconds();  // and start again if required
  }

  var hours = Math.floor(secs / 3600);
  secs %= 3600;
  var mins = Math.floor(secs / 60);
  secs %= 60;
  var result = ((hours < 10) ? "0" : "") + hours + " hours " + ((mins < 10) ? "0" : "") + mins + " minutes " + ((secs < 10) ? "0" : "") + secs + " seconds";
  document.getElementById("countdown").innerHTML = (countdownMessage) + " " + result;
}

$("#countdown").hide();

///////////////* Display at certain time of the day *//////////////////

//gets the current time. 
var d = new Date();
var day = d.getDay();

if (day == 0 || day == 6) {
  if (d.getHours() >= 0 && d.getHours() <= 8) {
    $("#countdown").show();
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body onload="getSeconds()">

  <span id="countdown" style="font-weight: bold;"></span>

</body>

Upvotes: 2

Related Questions