StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Go to the following URL:</p> <p><a href="http://www.scottklarr.com/files/binary-clock/clock.htm" rel="nofollow noreferrer">http://www.scottklarr.com/files/binary-clock/clock.htm</a></p> <p>and view the source.</p> <p><strong>Here is a breakdown:</strong></p> <p>This code sets up jQuery and the plugin: </p> <pre><code><head> <link href="binary-clock.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="binary-clock.js"></script> </head> </code></pre> <p>It also references a style sheet, which can be downloaded from <a href="http://www.scottklarr.com/files/binary-clock/clock.css" rel="nofollow noreferrer">http://www.scottklarr.com/files/binary-clock/clock.css</a></p> <p>This code:</p> <pre><code><div id="binaryClock"> <div id="bcHa"> <img src="led0.png" alt="" id="bcHa1" /> <img src="led0.png" alt="" id="bcHa2" /> </div> <div id="bcHb" class="edge"> <img src="led0.png" alt="" id="bcHb1" /> <img src="led0.png" alt="" id="bcHb2" /> <img src="led0.png" alt="" id="bcHb4" /> <img src="led0.png" alt="" id="bcHb8" /> </div> <div id="bcMa"> <img src="led0.png" alt="" id="bcMa1" /> <img src="led0.png" alt="" id="bcMa2" /> <img src="led0.png" alt="" id="bcMa4" /> </div> <div id="bcMb" class="edge"> <img src="led0.png" alt="" id="bcMb1" /> <img src="led0.png" alt="" id="bcMb2" /> <img src="led0.png" alt="" id="bcMb4" /> <img src="led0.png" alt="" id="bcMb8" /> </div> <div id="bcSa"> <img src="led0.png" alt="" id="bcSa1" /> <img src="led0.png" alt="" id="bcSa2" /> <img src="led0.png" alt="" id="bcSa4" /> </div> <div id="bcSb"> <img src="led0.png" alt="" id="bcSb1" /> <img src="led0.png" alt="" id="bcSb2" /> <img src="led0.png" alt="" id="bcSb4" /> <img src="led0.png" alt="" id="bcSb8" /> </div> </div> </code></pre> <p>...is where the actual clock is referenced on the page. It contains div references for all of the image files that comprise the dot elements of the clock. It also contains some CSS class references, so some styling is taking place.</p> <p>This code:</p> <pre><code><script type="text/javascript"> $(document).ready(function() { updateBinaryClock(); }); </script> </code></pre> <p>...waits for the page to fully load in the browser, and then kickstarts the clock plugin.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload