Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="//rawgit.com/JohnRDOrazio/jQuery-Clock-Plugin/master/jqClock.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
  <h1>Example page for dynamic jquery clock plugin</h1>
  <h2>Clock with default options</h2>
  <div class="jqclock_container">
    <div class="jqclockwrapper">
      <div class="myjqclock" id="clock1">This div will be turned into a dynamic clock</div>
    </div>
    <div class="controlgroup">
    <button class="clockStop">STOP</button>
    <button class="clockDestroy" id="destroyclock1">DESTROY</button>
    </div>
  </div>
​
  <h2>Clock that uses Italian language for the calendar, and string literals in the time</h2>
  <div class="jqclock_container"> 
    <div class="jqclockwrapper">
      <div class="myjqclock" id="clock2">This div will be turned into a dynamic clock</div>
    </div>
    <div class="controlgroup">
    <button class="clockStop">STOP</button>
    <button class="clockDestroy" id="destroyclock2">DESTROY</button>
    </div>
    <!--
    <button id="clock2_lang2fr" style="top:90%;">Switch lang to French!</button>
    -->
  </div>
​
  <h2>Clock that formats the date in a custom manner: {short day}, {short month} {date}{ordinal suffix}, {year} ({day of the week} - {day of the year} | {week of the year} | {leap year} )</h2>
  <div class="jqclock_container">
    <div class="jqclockwrapper">
      <div class="myjqclock" id="clock3">This div will be turned into a dynamic clock</div>
    </div>
    <div class="controlgroup">
    <button class="clockStop">STOP</button>
    <button class="clockDestroy" id="destroyclock3">DESTROY</button>
    </div>
  </div>
​
  <h2>Clock without calendar, using 24 hour format and displaying milliseconds, timezone, daylight savings time (if applicable) and swatch time, updating every 50 ms</h2>
  <div class="jqclock_container">
    <div class="jqclockwrapper">
      <div class="myjqclock" id="clock4">This div will be turned into a dynamic clock</div>
    </div>
    <div class="controlgroup">
    <button class="clockStop">STOP</button>
    <button class="clockDestroy" id="destroyclock4">DESTROY</button>
    </div>
  </div>
​
  <h2>Clock with custom timestamp (14 days, 3 hours and 14 seconds ahead) and shortened Day of the Week</h2>
  <div class="jqclock_container">
    <div class="jqclockwrapper">
      <div class="myjqclock" id="clock5">This div will be turned into a dynamic clock</div>
    </div>
    <div class="controlgroup">
    <button class="clockStop">STOP</button>
    <button class="clockDestroy" id="destroyclock5">DESTROY</button>
    </div>
  </div>
​
  <h2>Two identical clocks sharing the same class</h2>
  <div class="jqclock_container">
    <div class="jqclockwrapper">
      <div class="myjqclock jqclock_noid">This div will be turned into a dynamic clock</div>
      <div class="myjqclock jqclock_noid">This div will be turned into a dynamic clock</div>
    </div>
    <div class="controlgroup">
    <button class="clockStop">STOP</button>
    <button class="clockDestroy" id="destroyclock6">DESTROY</button>
    </div>
  </div>
  
  <h2>The advantage of this clock plugin is that it can also handle a server timestamp! See an example of this here: <a href="https://www.johnromanodorazio.com/jQueryClock.php">https://www.johnromanodorazio.com/jQueryClock.php</a>.</h2>
  
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
lwangamanpro
0viewers