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.
Next Recommended Reading Get And Set Variable Values From One JavaScript File To Another JavaScript File Using Local Storage