Submit your widget

clocks, timers, and stopwatches epiClock jQuery Plugin

Created 13 years ago   Views 16009   downloads 3439    Author garside
clocks, timers, and stopwatches epiClock jQuery Plugin
View DemoDownload
128
Share |

The epiClock jQuery Plugin allows users to easily create dynamically updating clocks, timers, and stopwatches. Each clock can be styled with custom CSS or images to achieve the proper effect on your page. Users can format the output in any way they desire, as the clock takes formatting strings in a manner similar to that of PHP's date() function.

This is a quick-start guide designed to get your using epiclock with as little effort as possible. If all you want to do is display a countdown clock on your page, this is all you will need:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
        <head>
                <title></title>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                
                <link media="screen" rel="stylesheet" type="text/css" href="epiclock/stylesheet/jquery.epiclock.css"/>
                
                <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
                <script type="text/javascript" src="epiclock/javascript/jquery.dateformat.min.js"></script>
                <script type="text/javascript" src="epiclock/javascript/jquery.epiclock.min.js"></script>
                <script type="text/javascript">

                    //  The startup code
                    jQuery(function ()
                    {
                        jQuery('#clock').epiclock();
                    });

                </script>
        </head>
        <body>
            <div id="clock"></div>
        </body>
</html>

 

Here's a checklist of the important pieces epiclock needs to function

  1. jQuery 1.4.2+
  2. The jquery.epiclock.min.js script.
  3. The jquery.epiclock.css file.
  4. An HTML element to contain the clock (<div id="clock"></div>)
  5. The startup code.
Tag: clocks, timers