Solved

countdown to day of the week from now

Posted on 2013-12-06
2
429 Views
Last Modified: 2013-12-30
I'd like to create a countdown timer that takes today and counts down to a certain day and time each week.  Most code I've found sets a date in the future and counts to it.  What I can't figure out is how to convert that date to just get to the day of the week.

for instance, we have a service every saturday at 5:00 pm.  I'd like the counter to set that as its end time and go.

Here is the counter code I am using with jquery

It's using a jquery plugin from

http://www.jqueryscript.net/time-clock/Extremely-Lightweight-jQuery-Countdown-Timer-Plugin-downCount.html

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="jquery.downCount.js"></script> 
<script class="source" type="text/javascript">
        $('.countdown').downCount({
            date: '09/09/2013 12:00:00',
            offset: +10
        }, function () {
            alert('WOOT WOOT, done!');
        });
    </script> 

Open in new window


If there's a better method to use, i'm open to that as well.
0
Comment
Question by:axessJosh
2 Comments
 
LVL 14

Accepted Solution

by:
quizwedge earned 500 total points
ID: 39702808
The trick is to figure out when the next Saturday at 5PM is and use that date. Using the jQuery plug in you linked to, you can do this as follows. *

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery downCount Plugin Example</title>
</head>
<body>
<div class="countdown">
  <span class="days">00</span>&nbsp;
  <span class="days_ref">days</span>&nbsp;
  <span class="hours">00</span>&nbsp;
  <span class="hours_ref">hours</span>&nbsp;
  <span class="minutes">00</span>&nbsp;
  <span class="minutes_ref">minutes</span>&nbsp;
  <span class="seconds">00</span>
  <span class="seconds_ref">seconds</span>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="jquery.downCount.js"></script> 
<script class="source" type="text/javascript">
  //get the current date
  var countdownDate = new Date();

  //if it's Saturday and it's after 5PM, then pretend it's Sunday
  if (countdownDate.getDay() == 6 && countdownDate.getHours() > 17) {
    countdownDate.setDate(countdownDate.getDate() + 1); 
  }

  //Find the next Saturday (this is why we pretended it is Sunday)
  countdownDate.setDate(countdownDate.getDate() + (6 - countdownDate.getDay())); 

  //Format the date for the counter
  countdownDate = (countdownDate.getMonth() + 1) + '/' + countdownDate.getDate() + '/' + countdownDate.getFullYear() + ' 17:00:00';

  $('.countdown').downCount({
      date: countdownDate,
      offset: -8
  }, function () {
      alert('WOOT WOOT, done!');
  });
</script> 
</body>
</html>

Open in new window


* A few things to note about this.
1. Set the offset to your current offset for UTC. It's quite possible that you'll need to update this for daylight savings time.

2. This code assumes that the person viewing the web page is in the same timezone as you. Javascript uses the computer's local time so if they're one hour ahead, it will throw off the calculation.
0
 
LVL 9

Expert Comment

by:Sar1973
ID: 39704320
If you want to calculate the number of days between now and a future date with (fYear, fMonth, fDay):
<script type="text/javascript">
//Set the two dates
var fDate=new Date(fYear, fMonth, fDay) //in JS months are between 0-11
today=new Date();
var myMs=1000*60*60*24; //calculate milliseconds in 1 day
document.write(Math.ceil((today.getTime()-fDate.getTime())/(myMs))+
" days from now to fDate."); //spots the difference between the two dates in days
</script>

Open in new window

Refer to http://www.w3schools.com/jsref/jsref_obj_date.asp for the functions used.
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question