Analog clock using canvas
Forked from venkatgan's Pen Analog Clock.
Forked from venkatgan's Pen Analog Clock.
Forked from venkatgan's Pen Analog Clock.
Forked from venkatgan's Pen Analog Clock.
Created
March 11, 2015 22:57
-
-
Save karna41317/1ce1e1edbcf0e7671409 to your computer and use it in GitHub Desktop.
Analog Clock
This file contains 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
| <html> | |
| <head> | |
| <script type="text/javascript" src="/Jquery/min.js"></script> | |
| <script type="text/javascript" src="clock.js"></script> | |
| <link rel="stylesheet" href="clock.css"> | |
| <title>Analog Clock</title> | |
| </head> | |
| <body> | |
| <center> | |
| <canvas height="400px" width="400px"> | |
| </canvas> | |
| <div><b></b><b></b><b></b><b></b></div> | |
| </center> | |
| </body> | |
| </html> |
This file contains 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
| $(document).ready(function () | |
| { | |
| clock() | |
| }) | |
| function clock() | |
| { | |
| set=1 | |
| setInterval(function (){ | |
| var dt=new Date() | |
| var hrs=dt.getHours() | |
| var tz="AM" | |
| if (hrs>12) | |
| { | |
| hrs=hrs-12 | |
| tz="PM" | |
| } | |
| var min=dt.getMinutes() | |
| var sec=dt.getSeconds() | |
| $("div b:nth-child(1)").text(hrs) | |
| $("div b:nth-child(2)").text(min) | |
| $("div b:nth-child(3)").text(sec) | |
| $("div b:nth-child(4)").text(tz) | |
| if (sec==0 && set%2!=0) | |
| { | |
| sec=60 | |
| } | |
| drawClock(hrs*30+(min/2),min*6,sec*6) | |
| if (sec==60 ||sec==0) | |
| { | |
| set++ | |
| } | |
| },1000) | |
| } | |
| function drawClock(hd,md,sd) | |
| { | |
| var canvasTag=$("canvas")[0] | |
| var canvas = canvasTag.getContext("2d"); | |
| canvas.clearRect(0,0,400,400) | |
| canvas.lineWidth=15; | |
| //canvas.lineCap="round"; | |
| canvas.strokeStyle="#87D37C"; | |
| canvas.beginPath(); | |
| if (set%2==0) | |
| { | |
| canvas.arc(200, 200, 120, 0, sd * Math.PI/180,true); | |
| } | |
| else | |
| { | |
| canvas.arc(200, 200, 120, 0, sd * Math.PI/180); | |
| } | |
| canvas.stroke(); | |
| canvas.closePath(); | |
| canvas.strokeStyle="#4ECDC4"; | |
| canvas.beginPath(); | |
| canvas.arc(200, 200, 100, 0, md * Math.PI/180); | |
| canvas.stroke(); | |
| canvas.closePath(); | |
| canvas.strokeStyle="#6C7A89"; | |
| canvas.beginPath(); | |
| canvas.arc(200, 200, 80, 0, hd * Math.PI/180); | |
| canvas.stroke(); | |
| } |
This file contains 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
| canvas | |
| { | |
| transform: rotate(-90deg); | |
| background-image: url('https://docs.zoho.com/viewembeddoc.do?docId=34tnzdaf04f4666624ebea695e8902684d2ee&ftype=image&imgWidth=770&imgHeight=515&version=1.0'); | |
| background-size: 103% 109%; | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| background-position-x: -1px; | |
| background-position-y: -16px; | |
| } | |
| div b | |
| { | |
| font-size:20px; | |
| font-family: sans-serif; | |
| } | |
| div b:nth-child(1) | |
| { | |
| color:#6C7A89; | |
| } | |
| div b:nth-child(1):after,div b:nth-child(2):after | |
| { | |
| content:" : "; | |
| } | |
| div b:nth-child(3):after | |
| { | |
| content:" "; | |
| } | |
| div b:nth-child(2) | |
| { | |
| color:#4ECDC4; | |
| } | |
| div b:nth-child(3) | |
| { | |
| color:#87D37C; | |
| } | |
| div b:nth-child(4) | |
| { | |
| font-weight: 400; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment