Post
Ask Question

Building Day Countdown Timer Using JavaScript

Introduction

 
In this blog, I have described, how to create a simple count down of days (business days alone) in a page with minimal use of JavaScript and HTML.
 
JavaScript, given below, has three parts-
  • The actual timer, which is triggered every 7 milliseconds, so that you can change as per your wish.
  • myTimerFn() is a function, which sets the start and end dates to get the count down of the business days in between.
  • The actual function, which provides the count of business days for the given start and end dates.
Code
  1. <html>  
  2.   
  3.     <head>  
  4.         <script type="text/JavaScript">  
  5.             //To call a javascript function using timer (part 1)   
  6.             var myVar = setInterval(myTimerFn, 7000);   
  7.             // To call the pass the start and end date to function calculating the business days in between (part 2)   
  8.             function myTimerFn() {   
  9.                 var d = new Date();   
  10.                 var enDate = new Date("09/28/2016");   
  11.             //alert (d.toISOString() + " | " +enDate.toISOString());   
  12.                 document.getElementById("demo").innerHTML = workingDaysBetweenDates(d.toISOString(),enDate.toISOString());   
  13.             }   
  14.             //Function for finding business days between two dates (part 3)   
  15.             function workingDaysBetweenDates(stDate, enDate)   
  16.             {   
  17.                 var startDate = new Date(stDate);   
  18.                 var endDate = new Date(enDate);   
  19.                 // Validate input   
  20.                 if (endDate < startDate)   
  21.                     return 0;   
  22.                 // Calculate days between dates   
  23.                 var millisecondsPerDay=8 6400 * 1000;   
  24.                 // Day in milliseconds   
  25.                 startDate.setHours(0);   
  26.                 // Start just after midnight   
  27.                 startDate.setMinutes(0);   
  28.                 startDate.setSeconds(0);   
  29.                 endDate.setHours(23);   
  30.                 // End just before midnight   
  31.                 endDate.setMinutes(59);   
  32.                 endDate.setSeconds(59);   
  33.                 var diff=e ndDate - startDate;   
  34.                 // Milliseconds between datetime objects   
  35.                 var days=M ath.ceil(diff / millisecondsPerDay);   
  36.                 // alert ( "Days Diff:" + days);   
  37.                 // Subtract two weekend days for every week in between   
  38.                 var weeks=M ath.floor(days / 7);   
  39.                 days=d ays - (weeks * 2);   
  40.                 // Handle special cases   
  41.                 var startDay=s tartDate.getDay();   
  42.                 var endDay=e ndDate.getDay();   
  43.                 // Remove weekend not previously removed.   
  44.                 if (startDay - endDay> 1)   
  45.                     days = days - 2;   
  46.                 // Remove start day if span starts on Sunday but ends before Saturday   
  47.                 if (startDay == 0 && endDay != 6)   
  48.                     days = days - 1   
  49.                 // Remove end day if span ends on Saturday but starts after Sunday   
  50.                 if (endDay == 6 && startDay != 0)   
  51.                     days = days - 1 return days;   
  52.             }    
  53.         
  54.         </script>  
  55.     </head>  
  56.     <div id="demodiv" style="border:1px solid black;background-color:yellow;height:50px;"><strong><span id="demo"></strong> </span>  
  57.         day(s) left </div>  
  58.   
  59. </html> 
Output
 
 
Please let me know, if you have any issues implementing it.