Created
January 8, 2010 16:59
-
-
Save cange/272186 to your computer and use it in GitHub Desktop.
Simple analog clock with second hand (my Google friday experiment) CSS3, HTML5, jQuery basics
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var Application = $.inherit({ | |
| __constructor: function(){ | |
| this._initClock(); | |
| }, | |
| _initClock: function(){ | |
| if($.browser.msie || $.browser.opera){ | |
| return false; | |
| } | |
| var elements = { | |
| second: $('#clock #second'), | |
| minute: $('#clock #minute'), | |
| hour: $('#clock #hour') | |
| }, | |
| time = {second:0,minute:0}; | |
| setInterval(function(){ | |
| var now = new Date(); | |
| if(time.minute == 0){ | |
| setRotate(elements.hour,now.getHours()); | |
| } | |
| if(time.second == 0){ | |
| time.minute = now.getMinutes(); | |
| setRotate(elements.minute,time.minute); | |
| } | |
| setRotate(elements.second, time.second = now.getSeconds()); | |
| }, 1000); | |
| function setRotate(element, unit){ | |
| var angle = (Math.round(3.6*(100*unit/60))-180), | |
| rotate = 'rotate('+angle+'deg)'; | |
| // runs only in webkit or gecko browser | |
| if($.browser.webkit){ | |
| element.css({'-webkit-transform':rotate}); | |
| } else if($.browser.mozilla && $.browser.version >= 1.9 ){ | |
| element.css({'-moz-transform':rotate}); | |
| } | |
| } | |
| } | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> | |
| <title>jQuery | HTML5 | CSS3 Experiments</title> | |
| <link href="/stylesheets/style.css" rel="stylesheet" type="text/css" /> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>Clock with jQuery, HTML5 and CSS3</h1> | |
| </header> | |
| <div id="clock"> | |
| <div id="hour"><div></div></div> | |
| <div id="minute"><div></div></div> | |
| <div id="second"><div></div></div> | |
| <div class="dot">.</div> | |
| </div> | |
| <script type="text/javascript" src="javascripts/jquery/jquery-1.4.js"></script> | |
| <script type="text/javascript" src="javascripts/jquery/jquery.inherit-1.1.1.js"></script> | |
| <script type="text/javascript" src="javascripts/app/Application.js"></script> | |
| <script type="text/javascript"> | |
| $(document).ready(function(){ | |
| window.app = new Application(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #clock { | |
| /* background-image: url(/images/clockface.jpg);*/ | |
| position: absolute; | |
| width: 600px; | |
| height: 600px; | |
| top: 100px; | |
| left: 100px; | |
| } | |
| #clock #hour, | |
| #clock #minute, | |
| #clock #second { margin-top: 300px; } | |
| #clock #hour div, | |
| #clock #minute div, | |
| #clock #second div { | |
| background-color: #dfdfdf; | |
| width: 2px; | |
| position: absolute; | |
| height: 200px; | |
| top: 0px; | |
| left: 300px; | |
| margin-left: -1px; | |
| -moz-box-shadow: 0 0 2px #333; | |
| -webkit-box-shadow: 0 0 2px #333; | |
| } | |
| #clock #second div { margin-top: -30px; } | |
| #clock #minute div { | |
| background-color: #777; | |
| width: 8px; | |
| height: 150px; | |
| margin-left: -4px; | |
| } | |
| #clock #hour div { | |
| background-color: #444; | |
| width: 10px; | |
| height: 100px; | |
| margin-left: -5px; | |
| } | |
| #clock .dot { | |
| font-size: 160px; | |
| left: 280px; | |
| line-height: 0; | |
| position: absolute; | |
| top: 255px; | |
| text-shadow: 0 0 20px #000; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment