In a bad mood, the game doesn't want to play. Make a little thing to solve the problem:
This clock is implemented through the Canvas of HTML5. You can refer to the link address for relevant technologies.
There is nothing to do next. The above link provides a detailed description, with a picture showing the truth ~~
The following code is used:
001 002 003 <title> HTML5 Test </title>
004 <script type = "application/x-javascript">
005 var panel, ctx, img;
006 var pw, ph, ox, oy;
007 function init (){
008 panel = document. getElementById ("panel ");
009 pw = panel. width;
010 ph = panel. height;
011 ox = pw/2;
012 oy = ph/2;
013 if (panel. getContext ){
014 ctx = panel. getContext ('2d ');
015} else {
016 alert ('your browser is not support Canvas tag! ');
017}
018
019 ctx. translate (ox, oy );
020
021 img = new Image ();
022 img. onload = function (){
023 setInterval ('draw () ', 1000 );
024}
025 img. src = 'bg.jpg ';
026}
027
028
029 function drawSecond (){
030 ctx. save ();
031 ctx. rotate (Math. PI/180 * currTime (). s * 6 );
032 ctx. strokeStyle = "# 09f ";
033 ctx. lineWidth = 2;
034 ctx. lineCap = 'round'
035 ctx. beginPath ();
036 ctx. moveTo (0, 0 );
037 ctx. lineTo (0,-140 );
038 ctx. stroke ();
039 ctx. restore ();
040}
041
042 function drawMinute (){
043 ctx. save ();
044 ctx. rotate (Math. PI/180 * currTime (). m * 6 );
045 ctx. strokeStyle = "# f90 ";
046 ctx. lineWidth = 6;
047 ctx. lineCap = 'round'
048 ctx. beginPath ();
049 ctx. moveTo (0, 0 );
050 ctx. lineTo (0,-100 );
051 ctx. stroke ();
052 ctx. restore ();
053}
054
055 function drawHour (){
056 ctx. save ();
057 ctx. rotate (Math. PI/180 * currTime (). h * 30 + Math. PI/180 * currTime (). m/
058 2 );
059 ctx. strokeStyle = "#999 ";
060 ctx. lineWidth = 10;
061 ctx. lineCap = 'round'
062 ctx. beginPath ();
063 ctx. moveTo (0, 0 );
064 ctx. lineTo (0,-60 );
065 ctx. stroke ();
066 ctx. restore ();
067}
068 function draw (){
069 ctx. clearRect (-pw/2,-ph/2, pw, ph );
070 drawBackground ();
071 drawSecond ();
072 drawMinute ();
073 drawHour ();
074 document. getElementById ('time'). innerHTML = currTimeStr ();
075}
076
077 function drawBackground (){
078 ctx. save ();
079 ctx. translate (0, 0 );
080 ctx. drawImage (img,-250,-250,500,500 );
081 ctx. restore ();
082}
083
084 function currTimeStr (){
085 var d = new Date ();
086 var h = d. getHours ();
087 var m = d. getMinutes ();
088 var s = d. getSeconds ();
089 return h + ':' + m + ':' + s
090}
091
092 function currTime (){
093 var d = new Date ();
094 var h = d. getHours ();
095 var m = d. getMinutes ();
096 var s = d. getSeconds ();
097 if (h> 12 ){
098 h = h-12;
099}
100 return {"h": h, "m": m, "s": s };
101}
102 </script>
103 104 <body onload = "init ()">
105 <canvas style = "border: 1px solid #000" id = "panel" width = "500" height = "500
106 ">
107 Your browser is not support Canvas tag!
108 </canvas>
109 <br/>
110 <span id = "time"> </span>
111 </body>
112
========================================================== ======================================
A buddy said that there is no dial background. Now, add:
Author: yanglion
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
