Web Analytics Made Easy -
StatCounter Need Timer - CodingForum

Announcement

Collapse
No announcement yet.

Need Timer

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Need Timer

    Hey everyone. I am a complete javascript newbie for starters. I am wanting to create a countdown timer to a certain date down to the second. If any of you have seen Eon8, something exactly like that. Grabs the current date and time and then shows the countdown appropriately. Here is a link to it on archive.org. http://web.archive.org/web/200602170.../www.eon8.com/


    Thanks in advance guys!

  • #2
    Why not just use their code????

    They are using a pair of artificial dates, not using the current time at all, but that's an easy fix to make.

    Admittedly, the code is a bit clumsy, but it at least works.

    Oh, heck. Let's rewrite it:
    Code:
    <script type="text/javascript">
    // use any date you want.  
    // Form is [b]new Date(year,month,day,hour,minute,second)[/b]
    // month is 0 through 11, *NOT* 1 through 12.
    var TARGET = new Date( 2010, 0, 1, 0, 0, 0 ); // happy new year
    
    function countdown( )
    {
        var now = new Date();
        var secs = Math.floor( TARGET.getTime() - now.getTime() ) / 1000;
        if ( secs < 0 ) secs = 0;
        var days = Math.floor( secs / 86400 ); // seconds per day
        secs = secs % 86400
        var hrs = Math.floor( sec/3600 );
        secs = secs % 3600;
        mins = Math.floor( secs/60);
        secs = secs % 60;
        var pretty = "";
        if ( days > 0 ) pretty = days + "days: ";
        pretty += hrs + " hours: ";
        pretty += (mins < 10 ? "0" : "") + mins + " mins: ";
        pretty += (secs < 10 ? "0" : "") + secs + " mins: ";
        document.getElementById("TheTime").innerHTML = pretty;
    }
    </script>
    ...
    <body onload="setInterval('countdown( )',1000);">
    ...
    <!-- put this anywhere on your page with any styles you want -->
    <span id="TheTmie"></span>
    
    ...
    </body>
    Untested, but it's nearly identical with that other code so should be fine.
    Be yourself. No one else is as qualified.

    Comment


    • #3
      I copy/pasted that and corrected the span id after I spotted that, but still not getting any display. any thoughts?

      Code:
      <html>
      <head>
      <script type="text/javascript">
      // use any date you want.  
      // Form is new Date(year,month,day,hour,minute,second)
      // month is 0 through 11, *NOT* 1 through 12.
      var TARGET = new Date( 2010, 0, 1, 0, 0, 0 ); // happy new year
      
      function countdown( )
      {
          var now = new Date();
          var secs = Math.floor( TARGET.getTime() - now.getTime() ) / 1000;
          if ( secs < 0 ) secs = 0;
          var days = Math.floor( secs / 86400 ); // seconds per day
          secs = secs % 86400
          var hrs = Math.floor( sec/3600 );
          secs = secs % 3600;
          mins = Math.floor( secs/60);
          secs = secs % 60;
          var pretty = "";
          if ( days > 0 ) pretty = days + "days: ";
          pretty += hrs + " hours: ";
          pretty += (mins < 10 ? "0" : "") + mins + " mins: ";
          pretty += (secs < 10 ? "0" : "") + secs + " mins: ";
          document.getElementById("TheTime").innerHTML = pretty;
      }
      </script>
      </head>
      <body onload="setInterval('countdown( )',1000);">
      <span id="TheTime"></span>
      </body>
      </html>

      Comment


      • #4
        Well, I did say untested.

        A couple of typos (by me).
        Code:
        <html>
        <head>
        <script type="text/javascript">
        // use any date you want.  
        // Form is new Date(year,month,day,hour,minute,second)
        // month is 0 through 11, *NOT* 1 through 12.
        var TARGET = new Date( 2010, 0, 1, 0, 0, 0 ); // happy new year
        
        function countdown( )
        {
            var now = new Date();
            var secs = [COLOR="Red"]Math.floor( ( TARGET.getTime() - now.getTime() ) / 1000 );[/COLOR]
            if ( secs < 0 ) secs = 0;
            var days = Math.floor( secs / 86400 ); // seconds per day
            secs = secs - 86400 * days;
            var hrs = Math.floor( [B][COLOR="Red"]secs[/COLOR][/B]/3600 );
            secs = secs % 3600;
            mins = Math.floor( secs/60);
            secs = secs % 60;
            var pretty = "";
            if ( days > 0 ) pretty = days + " days: ";
            pretty += hrs + " hours: ";
            pretty += (mins < 10 ? "0" : "") + mins + " mins: ";
            pretty += (secs < 10 ? "0" : "") + secs + " secs";
            document.getElementById("TheTime").innerHTML = pretty;
        }
        </script>
        </head>
        <body onload="setInterval('countdown( )',1000);">
        <span id="TheTime"></span>
        </body>
        </html>
        In the first red line, I was missing a pair of parentheses.

        In the second one, I had "sec" instead of "secs".

        You can, of course, change "days: " to just "d:" or whatever you want. Ditto for the others. I ensure that minutes and seconds have a leading zero, but that is also optional with you.
        Be yourself. No one else is as qualified.

        Comment

        Working...
        X