Solved

countdown to day of the week from now

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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
how can display objects ? 3 18
Angular 2 - Issue in page Layout 2 46
alert before form submission 6 27
window.setInterval not firing 7 29
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
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 …
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…

930 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

12 Experts available now in Live!

Get 1:1 Help Now