A cool count down timer sourcecode !

Discussion in 'Javascript' started by HeroinNO.4@gmail.com, Oct 30, 2006.

  1. Guest

    Copy the code below and save in a .htm file, for example : 1.htm, then
    run it in browser, you'll see a cool count down timer ! If it doesn't
    work, you may open http://www.fillweb.com in IE and View->Source, and
    the latest version of count down timer will show you !

    <html>
    <head>
    <meta http-equiv="Content-Language" content="en-us">
    <meta http-equiv="Content-Type" content="text/html;
    charset=windows-1252">
    <title>Welcome to Fillweb home page</title>
    <meta name="keywords" content="fillweb, form filler, fill forms
    automatically, account logon login, single sign on, fill web forms,
    fill online forms automatically, form filling software, ai web
    automatic auto fill out forms fill in forms">
    <script language="JavaScript">
    <!--
    var timerID;
    var timerRunning = false;
    var today = new Date();
    var startday = new Date();
    var secPerDay = 0;
    var minPerDay = 0;
    var hourPerDay = 0;
    var secsLeft = 0;
    var secsRound = 0;
    var secsRemain = 0;
    var minLeft = 0;
    var minRound = 0;
    var minRemain = 0;
    var timeRemain = 0;
    /* This function will stop the clock */
    function stopclock()
    {
    if(timerRunning)
    clearTimeout(timerID);
    timerRunning = false;
    }
    /* This function will start the clock */
    function startclock()
    {
    stopclock();
    countdown();
    }
    function startclock_cn()
    {
    stopclock();
    showtime_cn();
    }
    /* This function will display the count-up */
    function countdown()
    {
    startday = new Date("November 01, 2006 00:00 GMT");
    startday.setYear("2006");
    today = new Date();
    secsPerDay = 1000 ;
    minPerDay = 60 * 1000 ;
    hoursPerDay = 60 * 60 * 1000;
    PerDay = 24 * 60 * 60 * 1000;
    /* Seconds */
    secsLeft = (startday.getTime() - today.getTime()) / minPerDay;
    secsRound = Math.round(secsLeft);
    secsRemain = secsLeft - secsRound;
    secsRemain = (secsRemain < 0) ? secsRemain = 60 - ((secsRound -
    secsLeft) * 60) : secsRemain = (secsLeft - secsRound) * 60;
    secsRemain = Math.round(secsRemain);
    /* Minutes */
    minLeft = ((startday.getTime() - today.getTime()) /
    hoursPerDay);
    minRound = Math.round(minLeft);
    minRemain = minLeft - minRound;
    minRemain = (minRemain < 0) ? minRemain = 60 - ((minRound -
    minLeft) * 60) : minRemain = ((minLeft - minRound) * 60);
    minRemain = Math.round(minRemain - 0.495);
    /* Hours */
    hoursLeft = ((startday.getTime() - today.getTime()) / PerDay);
    hoursRound = Math.round(hoursLeft);
    hoursRemain = hoursLeft - hoursRound;
    hoursRemain = (hoursRemain < 0) ? hoursRemain = 24 -
    ((hoursRound - hoursLeft) * 24) : hoursRemain = ((hoursLeft -
    hoursRound) * 24);
    hoursRemain = Math.round(hoursRemain - 0.5);
    /* Days */
    daysLeft = ((startday.getTime() - today.getTime()) / PerDay);
    daysLeft = (daysLeft - 0.5);
    daysRound = Math.round(daysLeft);
    daysRemain = daysRound;
    /* Time */
    if (daysRemain == 1)
    {
    day_rem = " day, "
    }
    else
    {
    day_rem = " days, "
    }
    if (hoursRemain == 1)
    {
    hour_rem = " hour, "
    }
    else
    {
    hour_rem = " hours, "
    }
    if (minRemain == 1)
    {
    min_rem = " minute, "
    }
    else
    {
    min_rem = " minutes, "
    }
    if (secsRemain == 1 || secsRemain == 0)
    {
    sec_rem = " second"
    }
    else
    {
    sec_rem = " seconds"
    }
    timeRemain = "Fillweb is coming in " + daysRemain + day_rem +
    hoursRemain + hour_rem + minRemain +
    min_rem + secsRemain + sec_rem;
    document.counter.face.value = timeRemain;
    timerID = setTimeout("countdown()",1000);
    timerRunning = true;
    }
    //-->
    </script>
    </head>
    <body onLoad="startclock()" bgcolor="#000000">
    <div align="center">
    <table border="0" width="700" height="333" cellspacing="2">
    <tr>
    <td background="images/milkyway.jpg"></td>
    </tr>
    <tr>
    <td align="center" height="18" valign="bottom">
    <form name="counter" style="position: relative">
    <input type="text" name="face" size="100" value="A browser
    supporting JavaScript 1.1+ is needed." style="border:1px solid
    #000000; background-color:#000000; font-size:9pt; color:#FFFFFF;
    text-align:center; position:relative; ">
    </form>
    </td>
    </tr>
    </table>
    </div>
    <script src="http://www.google-analytics.com/urchin.js"
    type="text/javascript">
    </script>
    <script type="text/javascript">
    _uacct = "UA-859503-1";
    urchinTracker();
    </script>
    </body>
    </html>
     
    , Oct 30, 2006
    #1
    1. Advertising

  2. RobG Guest

    wrote:

    > Copy the code below and save in a .htm file, for example : 1.htm, then
    > run it in browser, you'll see a cool count down timer !


    Cool? It's verbose and pollutes the global space unnecessarily with 18
    global variables where 1 will suffice. You'll find stuff on
    calculating date differences here:

    <URL: http://www.merlyn.demon.co.uk/js-date1.htm#diff >

    Here's another version that doesn't make any allowance for summer time,
    but maybe it's not needed:


    <title>Simple Countdown</title>
    <script type="text/javascript">

    var diffClock = (function()
    {
    // Private variables
    var startDate;
    var clockEl;
    var timerRef;

    // Private methods
    function addS(n){
    return (n==1)? '':'s';
    }

    function addZ(n){
    return (n < 10)? '0'+n : ''+n;
    }

    function diffDays(d1, d2){
    var days = d2-d1; // Difference in milliseconds

    if (days < 0){
    return null;
    }
    var ms = days % 1000; // remainder ms
    days = (days - ms) / 1000;
    var secs = days % 60; // remainder seconds
    days = (days - secs) / 60;
    var mins = days % 60; // remainder minutes
    days = (days - mins) / 60;
    var hrs = days % 24; // remainder hours
    days = (days - hrs) / 24; // days is now whole days
    return [days, hrs, mins, secs, ms];
    }

    // Public methods
    return {
    // Start clock
    start : function(el, d)
    {
    this.stop();
    if (typeof el != 'object') return;
    clockEl = el;
    startDate = d;
    this.run();
    },

    // Run the clock
    run : function(){
    var diff = diffDays(new Date(), startDate);
    if (diff != null){
    clockEl.innerHTML = 'Diff: '
    + diff[0] + ' day' + addS(diff[0]) + ', '
    + diff[1] + ' hour' + addS(diff[1]) + ', '
    + diff[2] + ' minute' + addS(diff[2]) + ' and '
    + addZ(diff[3]) + ' second' + addS(diff[3]) + '.';

    // Schedule next update just after next full second
    var runIn = 1050 - (new Date().getTime() % 1000);
    timerRef = setTimeout('diffClock.run();', runIn);
    } else {
    this.stop();
    }
    },

    // Stop the clock
    stop : function(){
    if (timerRef && clearTimeout){
    clearTimeout(timerRef);
    timerRef = null;
    }
    }
    }
    })();

    window.onload = function(){
    diffClock.start(document.getElementById('clock'),
    new Date('2006/11/29 17:05:13'));
    }

    </script>
    <div>Days until 2006/11/29 17:05:13
    <div id="clock"></div>

    <button id="button" onclick="diffClock.stop();">Stop</button>


    --
    Rob
     
    RobG, Oct 30, 2006
    #2
    1. Advertising

  3. Randy Webb Guest

    said the following on 10/29/2006 11:33 PM:
    > Copy the code below and save in a .htm file, for example : 1.htm, then
    > run it in browser, you'll see a cool count down timer ! If it doesn't
    > work, you may open http://www.fillweb.com in IE and View->Source, and
    > the latest version of count down timer will show you !


    Looks like an overly bloated count down timer. You may want to look into
    padding your numbers though, when it goes from a single digit to double
    digits (or vice versa) everything jumps because of the difference in
    string length.

    --
    Randy
    Chance Favors The Prepared Mind
    comp.lang.javascript FAQ - http://jibbering.com/faq
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
     
    Randy Webb, Oct 31, 2006
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Tony Arcieri
    Replies:
    14
    Views:
    486
    Tony Arcieri
    Dec 9, 2010
  2. Tony Arcieri
    Replies:
    0
    Views:
    431
    Tony Arcieri
    Dec 14, 2010
  3. Replies:
    1
    Views:
    134
    Randy Webb
    Oct 31, 2006
  4. Replies:
    1
    Views:
    1,071
    Evertjan.
    Nov 11, 2006
  5. Replies:
    2
    Views:
    164
    Dr J R Stockton
    Nov 17, 2006
Loading...

Share This Page