Solved

countdown to day of the week from now

Posted on 2013-12-06
2
414 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
Comment Utility
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
Comment Utility
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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

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 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)

772 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now