Speed up development with full-stack environments for every branch.

Learn More

A versatile JavaScript count down to date utility [time, countdown and timer]

975 Runs 2000 Views 857 Copies

The ByteShopJs.util.datatime.CountDownTimer is a JavaScritp utility that provides a real time, animated count down display to an end date. Options are provided for pre-formatted output or to separate the date data generated by the script from the output format in the browser by using the "NONE" format option. If you want the script to provide pre-formatted output then use the SHORT, MEDIUM or LONG format options. When using the NONE format you must provide CSS rules similar to those provided in the sample main.css file. You can, of course modify these rules to suit your own needs.

Saved

Saved

jlombardo 1

jlombardo
published 3 years ago

<!DOCTYPE html>
<!--
    This is a demo of the ByteShopJs.util.datatime.CountDownTimer that
    provides a real time, animated count down display to an end date. This
    demo separates the date data generated by the script from the output
    format in the browser by using the "NONE" format option. If you want the
    script to provide pre-formatted output then use the SHORT, MEDIUM or
    LONG format options.

    When using the NONE format, as we do here, you must provide CSS rules
    similar to those provided  in the sample main.css file. You can, of
    course modify these rules to suit your own needs.

    Version 1.01
    Author: James G. Lombardo, dba The ByteShop.Net, [email protected]
-->
<html>
  <head>
    <meta charset="utf-8">
    <title>JavaScript Count Down Timer Demo</title>
    <script type="text/javascript" src="js/countDownTimer.js"></script>
    <link rel="StyleSheet" type="text/css" href="css/main.css" media="screen" >
</head>

<body>
    <div id="CountDownTimer">
    	<h2 id="timeToGoHeader">Time to Go to Christmas 2014</h2>
        <!--
            The display element must be identified with the id 'timeToGo'
            to allow the JS function to place the formatted count down data.
            Then you need additional containers for each time value.
        -->
        <div id="timeToGo">
            <ul>
                <li id="days"></li>
                <li id="hours"></li>
                <li id="mins"></li>
                <li id="secs"></li>
            </ul>
        </div>
        <!-- these are optional -->
        <div id="timeToGoLabels">
            <ul>
                <li>Days</li>
                <li>Hours</li>
                <li>Min</li>
                <li>Sec</li>
            </ul>
        </div>

    <!-- 
        The startTime is the number of seconds to go to the end date. This
        is only needed when using the CountDownTimer.startUsingSecondsToEndDate
        function. The value would normally be provided by some other client-
        or server-side script. For example, in JavaServer Faces this might be
        an EL expression.
    -->
        <div id="startTime" style="visibility:hidden;">
                120000
        </div>
    </div>

    <!-- Put this script at bottom so it starts after all the HTML is loaded -->
    <script type="text/javascript">
        e1 = document.getElementById('startTime');
        e2 = document.getElementById('timeToGo');
        startValue = parseInt(e1.innerHTML);

        var counter = new ByteShopJs.util.datetime.CountDownTimer;
        // Use this or use startTime (seconds to go), but not both
        var endDate = new Date("December 25, 2014 00:00:00");
        
        // Use an end date to initialize the counter
        counter.startUsingEndDate(endDate,e2,"NONE");

        // Or, you can pass the number of seconds to an end date
        //counter.startUsingSecondsToEndDate(20000,e2,"NONE");
    </script>
</body>

</html>
Please login/signup to get access to the terminal.

Your session has timed out.

Dismiss (the page may not function properly).