www.webdeveloper.com
Results 1 to 6 of 6

Thread: Cant understand how to work with dates in Javascript

  1. #1
    Join Date
    Oct 2012
    Posts
    10

    Cant understand how to work with dates in Javascript

    I am trying to create simple webpage that would show how much time is left till main holidays. I finally got the code to properly calculate the amount of days, but hours, minutes and seconds is still off! I cant understand what I am doing wrong. Please help. Also, later on, I want to add some sort of an interval method that would make the time left decrease every second and dynamically refresh. Any ideas how that can be accomplished?

    This is my html file:
    Code:
    <!DOCTYPE html>
    <html>
    
       <head>
       <!--
          
    
          
    
          Filename:         events.htm
          Supporting files: banner2.png, dates.js,  
                            modernizr-1.5.js, styles.css
    
       -->
    
          <meta charset="UTF-8" />
          <title>Upcoming Holidays</title>
          <script src="modernizr-1.5.js" type="text/javascript" ></script>
          <link href="styles.css" rel="stylesheet" type="text/css" />
    	  <script src="dates.js" type="text/javascript" ></script>
    	  
    	  
    	  
    	  <script type="text/javascript">     //because months is array month must be one less. (start from zero)
    		  function showCountdown() {
    		  var today = new Date();
    		  var date1 = new Date(); //thanksgiving 
    		  date1.setFullYear(2013,10,28,24,00,00,00); 
    		  alert(date1);
    		  var date2 = new Date(2013,11,25,24,00,00); //christmas
    		  
    		  var date3 = new Date(2013,11,31,24); //new year
    		  var date4 = new Date(2014,6,4,24); //independance day
    		  var date5 = new Date(2014,8,1,24,00,00); //labor day
    		  
    		  document.eventform.thisDay.value = showDateTime(today);
    		  document.eventform.count1.value = changeYear(today,date1);
    		  document.eventform.count2.value = changeYear(today,date2);
    		  document.eventform.count3.value = changeYear(today,date3);
    		  document.eventform.count4.value = changeYear(today,date4);
    		  document.eventform.count5.value = changeYear(today,date5);
    		  
    		  document.eventform.count1.value = countdown(today,date1);
    		  document.eventform.count2.value = countdown(today,date2);
    		  document.eventform.count3.value = countdown(today,date3);
    		  document.eventform.count4.value = countdown(today,date4);
    		  document.eventform.count5.value = countdown(today,date5);
    		  
    		  
    		  
    		  
    		
    		  
    		  
    		  }
    	  
    	  
    	  </script>
       </head>
    
       <body onload="showCountdown()">
    		
          <form name="eventform" id="eventform" action="">
    
          <header>
             
             <img src="banner2.png" alt="" />
          </header>
    
          <nav class="horizontal">
             <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Helpful Links</a></li>
                <li><a href="#">Recommended Books</a></li>
                <li><a href="#">About Us</a></li>
    			<li><a href="#">Contact Info</a></li>
               
             </ul>
          </nav>
    
          <nav class="vertical">
             <h1>Links</h1>
             <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Guessing Game</a></li>
                <li><a href="#">Tic-Tac-Toe</a></li>
                <li><a href="#">Music</a></li>
                <li><a href="#">Tech Quiz</a></li>
                <li><a href="#">Coming Holidays</a></li>
               
                
             </ul>
          </nav>
    
          <section id="main">
             <h1>Countdown to Upcoming Holidays</h1>
    
             <p>
                Current Date and Time 
               <input name="thisDay" id="thisDay" readonly="readonly" size="30" />
             </p>
             <table>
                <thead>
                <tr>
                   <th class="colhead">Event</th>
                   <th class="colhead">Starting Time</th>
                   <th class="colhead">Countdown to Event</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                   <td>
                      Thanksgiving
                   </td>
                   <td>
                      Nov 28 at 12:00 a.m.
                   </td>
                   <td>
                      <input name="count1" id="count1" size="33" />
                   </td>
                </tr>
                <tr>
                   <td>
                      Christmas
                   </td>
                   <td>
                      Dec 25 at 12:00 a.m.
                   </td>
                   <td>
                      <input name="count2" id="count2" size="33" />
                   </td>
                </tr>
                <tr>
                   <td>
                      New Year
                   </td>
                   <td>
                      Dec 31 at 12:00 a.m.
                   </td>
                   <td>
                      <input name="count3" id="count3" size="33" />
                   </td>
                </tr>
                <tr>
                   <td>
                      Independance Day
                   </td>
                   <td>
                      July 4 at 12:00 a.m.
                   </td>
                   <td>
                      <input name="count4" id="count4" size="33" />
                   </td>
                </tr>
                <tr>
                   <td>
                      Labor Day
                   </td>
                   <td>
                      Sep 1 at 12:00 a.m.
                   </td>
                   <td>
                      <input name="count5" id="count5" size="33" />
                   </td>
                </tr>
                
                </tbody>
             </table>
    
          </section>
    
    
          <footer>
             <address>
                Major Holidays in United States
             </address>
          </footer>
    
          </form>
    
       </body>
    
    </html>

    And this is the javascript code:

    Code:
    /*
         
    
       Function List:
       showDateTime(time)
          Returns the date in a text string formatted as:
          mm/dd/yyyy at hh:mm:ss am
    
       changeYear(today, holiday)
          Changes the year value of the holiday object to point to the
          next year if it has already occurred in the present year
    
       countdown(stop, start)
          Displays the time between the stop and start date objects in the
          text format:
          dd days, hh hrs, mm mins, ss secs
    */
    
    function showDateTime(time) {
       date = time.getDate();
       month = time.getMonth()+1;
       year = time.getFullYear();
    
       second = time.getSeconds();
       minute = time.getMinutes();
       hour = time.getHours();
    
       ampm = (hour < 12) ? " a.m." : " p.m.";
       hour = (hour > 12) ? hour - 12 : hour;
       hour = (hour == 0) ? 12 : hour;
    
       minute = minute < 10 ? "0"+minute : minute;
       second = second < 10 ? "0"+second : second;
    
       return month + "/" + date + "/" + year + " at " + hour + ":" + minute + ":" + second + ampm;
    }
    
    
    function changeYear(today,holiday)  {
    	var year = today.getFullYear();
    	holiday.setFullYear(year);
    		if(holiday < today) {
    		year = year + 1;
    		holiday.setFullYear(year);
    		}
    		
    	return year;
    }
    
    
    
    
    function countdown(start,stop) {     
    
    
    var time = stop - start;
    
    
    // display days rounded to the next lowest integer
    var days = (time) / (1000*60*60*24);
    days = Math.floor(days);
    
    // calculate the hours left in the current day
    var hours = days * 24;
    
    
    // calculate the minutes left in the current hour
    var minutes = (Math.floor(hours))*60;
    // display minutes rounded to the next lowest integer
    
    // calculate the seconds left in the current minute
    var seconds = (Math.floor(minutes))*60;
    // display seconds rounded to the next lowest integer
    seconds = Math.floor(seconds);
    
    
    return days + " days " +  hours + " hours "+ minutes + " minutes "+ seconds + " seconds ";
                  
                
    
    
    }

  2. #2
    Join Date
    Oct 2012
    Posts
    10
    This is the css code so you can see how the whole thing looks:

    Code:
    /*
      
    
       Filename:         styles.css
       Supporting Files: 
    
    */
    
    
    /* Display HTML5 structural elements as blocks */
    
    article, aside, figure, figcaption, footer, hgroup, header, 
    section, nav {
       display: block;
    }
    
    
    /* Set the default page element styles */
    
    body {
       margin: 0px auto;
       min-width: 900px;
       max-width: 1100px;
    
       background-color: rgba(185, 211, 238, 0.5);
    }
    
    body * {
    
       font-family: Verdana, Geneva, sans-serif;
       font-size: 100%;
       font-weight: inherit;
       line-height: 1.2em;
       margin: 0px;
       padding: 0px;
       text-decoration: none;
       vertical-align: baseline;
    
    }
    
    
    
    /* Header styles */
       
    header {
       position: relative;
       width: 100%;
       
    }
    
    header > h1 {
       position: absolute;
       top: 15px;
       right: 50px;
       text-align: middle;
       
       font-size: 3.1em;
       letter-spacing: 0.15em;
       font-family: 'Times New Roman', serif;
    
       
    }
    
    
    header img {
       width: 100%;
       height: 370px;
    }
    
    /* Navigation lists */
    
    
    nav.horizontal {
       width: 100%;
       position: relative;
       top: -50px;
    }
    
    nav.horizontal ul {
       margin: 0px;
    }
    
    nav.horizontal ul li {
       display: block;
       float: left;
       height: 50px;
       width: 20%;
    }
    
    nav.horizontal ul li a {
       background-color: rgb(159,182,205);/* this is color of the background of horizontal links */
       background-color: rgba(159,182,205, 0.2);
       display: block;
       font-family: 'Trebuchet MS', Helvetica, sans-serif;
       line-height: 50px;
       color: rgb(241, 241, 241);
       color: rgba(255, 255, 255, 0.8);
       text-align: center;
       text-shadow: black 2px 1px 0px;
       font-size: 1em;
    }
    
    nav.horizontal ul li a:hover {
       background-color: rgb(211, 155, 41);
       background-color: rgba(0,104,139, 0.4);
    
    }
    
    
    
    
    
    /* Vertical navigation list styles */
    
    
    nav.vertical {
       float: left;
       width: 20%;
       margin-top: -55px;
       height: 430px;
       background-color: rgb(255, 211, 55);
       background-color: rgba(83,134,139, 0.7);
    }
    
    nav.vertical h1 {
       color: white;
       color: rgba(255, 255, 255, 0.7);
       text-shadow: rgba(192, 145, 0, 0.8) 2px 2px 5px;
    
       font-size: 1.35em;
       letter-spacing: 3px;
       text-align: center;
       padding: 10px;
       margin: 0px 0px 15px 0px;
       background-color: rgb(233, 177, 0);
       background-color: rgba(0,104,139, 0.5);  /*this is just for heading of vertical list */
    }
    
    nav.vertical ul {
       list-style: none;
    }
    
    nav.vertical ul li {
       font-size: 1em;
       letter-spacing: 3px;
    }
    
    
    nav.vertical ul li a {
       display: block;
       padding-left: 30px;
       height: 32px;
       line-height: 45px;
       width: auto;
       color: rgb(51, 51, 51);
    }
    
    nav.vertical ul li a:hover {
       background-color: rgb(221, 165,0);
       background-color: rgba(0,104,139, 0.45);  /* this is hover background  color of vertical list  */
    }
    
    
    /* Middle section styles */
    
    section#main {
       float: left;
       height: 430px;
       width: 80%;
       margin-top: -55px;
       background-color: rgb(122,197,205);
       background-color: rgba(83,134,139, 0.6);
    }
    
    section#main h1 {
       font-size: 1.7em;
       color: black;
       text-align: center;
       margin: 15px;
       letter-spacing: 5px;
    }
    
    section#main p {
       text-align: center;
    }
    
    
    /* Table Styles */
    
    table {
       margin: 20px auto;
    }
    
    thead {
       margin: 0px 0px 10px 0px;
       width: 90%;
    }
    
    thead th {
       color: white;
       background-color: black;
       letter-spacing: 2px;
    }
    
    
    td, th {
       vertical-align: top;
       font-size: 0.9em;
       padding: 5px;
    }
    
    
    /* Page footer styles */
    
    footer {
       clear: left;
       display: block;
    }
    
    footer address {
       display: block;
       font-style: normal;
       text-align: center;
       font-size: 10px;
       line-height: 20px;
       height: 20px;
       background-color: rgb(51, 51, 51);
       color: white;
    }
    
    form {
       background-color: white;
       -moz-box-shadow: rgb(101, 101, 101) -20px 0px 20px,
                   rgb(101, 101, 101) 20px 0px 20px;
       -webkit-box-shadow: rgb(101, 101, 101) -20px 0px 20px,
                   rgb(101, 101, 101) 20px 0px 20px;
       box-shadow: rgb(101, 101, 101) -20px 0px 20px,
                   rgb(101, 101, 101) 20px 0px 20px;
    }

  3. #3
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    Right, did this completely for the fun of it:

    index.html
    Code:
    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8" />
    		<title>Holiday Countdown</title>
    	</head>
    	<body>
    
    		<script type="text/javascript">
    
    			(function(holidays)
    			{
    				var displays = [], base, i, months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    
    				document.write('<div id="Holidays"></div>');
    				base = document.getElementById('Holidays');
    
    				for (i = 0; i < holidays.length; ++i) {
    					base.appendChild(document.createElement('h3')).innerHTML = holidays[i][2] + ' (' + months[holidays[i][0] - 1] + ' ' + holidays[i][1] + ')';
    					displays[i] = base.appendChild(document.createElement('div'));
    				}
    
    				function update()
    				{
    					var now = new Date(), then, i, next_year,
    					t, d, h, m, s;
    
    					for (i = 0; i < holidays.length; ++i) {
    						then = new Date(now.getFullYear(), holidays[i][0] - 1, holidays[i][1]); next_year = false;
    						if (then.getTime() - now.getTime() < 0) {then = new Date(now.getFullYear() + 1, holidays[i][0] - 1, holidays[i][1]); next_year = true;}
    
    						t = ((then.getTime() - now.getTime()) / 1000) | 0;
    						h = t % 86400; d = (t - h) / 86400; //Days
    						m = h % 3600;  h = (h - m) / 3600;  //Hours
    						s = m % 60;    m = (m - s) / 60;    //Minutes & Seconds
    
    						displays[i].innerHTML = d + ' days, ' + h + ' hours, ' + m + ' minutes, ' + s + ' seconds';
    						displays[i].style.color = next_year ? '#f00' : '';
    					}
    				}
    				setInterval(update, 1000); update();
    
    			}([
    
    				//Month, Day, Name
    
    				[ 7,  4, 'Independance Day'],
    				[ 9,  1, 'Labor Day'],
    				[11, 28, 'Thanksgiving'],
    				[12,  2, 'bionoids Birthday'],
    				[12, 25, 'Christmas'],
    				[ 1,  1, 'New Year']
    
    			]));
    
    		</script>
    
    	</body>
    </html>
    Output

    Code:
    Independance Day (Jul 4)
    
    228 days, 13 hours, 28 minutes, 19 seconds
    
    Labor Day (Sep 1)
    
    287 days, 13 hours, 28 minutes, 19 seconds
    
    Thanksgiving (Nov 28)
    
    10 days, 13 hours, 28 minutes, 19 seconds
    
    bionoids Birthday (Dec 2)
    
    14 days, 13 hours, 28 minutes, 19 seconds
    
    Christmas (Dec 25)
    
    37 days, 13 hours, 28 minutes, 19 seconds
    
    New Year (Jan 1)
    
    44 days, 13 hours, 28 minutes, 19 seconds
    Note: Countdowns that appear red are going to occur the following year.
    Last edited by bionoid; 11-17-2013 at 02:43 AM.
    JavaScript: Learn | Validate | Compact | bionoid

  4. #4
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,264
    Bravo Bionoid ! Your are born on the anniversary of Austerlitz Battle...

  5. #5
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    lol 007Julien. A piece of history I wasn't aware of.
    I'm sure I'm way taller than Napoleon though
    Last edited by bionoid; 11-17-2013 at 05:54 AM.
    JavaScript: Learn | Validate | Compact | bionoid

  6. #6
    Join Date
    Oct 2012
    Posts
    10
    bionoid, thank you, but you did this your way. A lot of stuff you did, I haven't learned yet or don't understand. I was hoping you could tell me what was wrong with MY code, and why it wasn't doing what I needed it to do. I wanted to know why my code doesn't calculate days, hours and minutes properly.
    Last edited by ibex333; 11-17-2013 at 06:48 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles