Solved

countdown to day of the week from now

Posted on 2013-12-06
2
432 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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn how to dynamically set the form action using jQuery.
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…

821 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