<%@ page language="Java"Contenttype="text/html; Charset=utf-8"pageencoding="UTF-8"%><! DOCTYPE Html>"Content-type"Content="text/html; Charset=utf-8"><title> Clock </title><script type="Text/javascript"Src="Js/jquery.min.js"></script> <script type="Text/javascript">varCxs;varCanvas; $ (document). Ready (function () {Canvas=document.getelementbyid ("Canvas"); Cxs=canvas.getcontext ('2d'); }); function Date () {Cxs.clearrect (0,0, -, -); varDate=NewDate (); varHour=date.gethours (); varmin=date.getminutes (); varSec=date.getseconds (); Cxs.save (); Cxs.translate ( -, -); //cxs.rotate ( -10*math.pi/180); varIMG =NewImage (); IMG.SRC="${pagecontext.request.contextpath}/image/7.png"; Cxs.drawimage (IMG,0,0,1440, the); Cxs.restore (); //Dialcxs.strokestyle="Blue"; Cxs.linewidth=Ten; Cxs.beginpath (); Cxs.arc ( -, -, $,0, the,false); Cxs.closepath (); Cxs.stroke (); Cxs.beginpath (); Cxs.font="30px Verdana"; varGradient=cxs.createlineargradient ( -, -, Canvas.width, -); Gradient.addcolorstop ("0","Magenta"); Gradient.addcolorstop ("0.5","Blue"); Gradient.addcolorstop ("1.0","Red"); Cxs.fillstyle=gradient; Cxs.filltext ("the design of Amin", the, the); Cxs.closepath (); //Small Moment degree for(varI=0;i< A; i++) {cxs.save (); Cxs.strokestyle="#000"; Cxs.translate ( -, -); Cxs.linewidth=7; Cxs.rotate (i* -*math.pi/ the); Cxs.beginpath (); Cxs.moveto (0,- the); Cxs.lineto (0,- the); Cxs.closepath (); Cxs.stroke (); Cxs.restore (); } //Sub-scale for(varI=0;i< -; i++) {cxs.save (); Cxs.strokestyle="#000"; Cxs.translate ( -, -); Cxs.linewidth=5; Cxs.rotate (i*6*math.pi/ the); Cxs.beginpath (); Cxs.moveto (0,- the); Cxs.lineto (0,- the); Cxs.closepath (); Cxs.stroke (); Cxs.restore (); } //HourCxs.save (); Cxs.translate ( -, -); Cxs.linewidth=5; Cxs.strokestyle="#000"; Hour=hour> A? hour- A: Hour; Hour+=min/ -; Cxs.rotate (Hour* -*math.pi/ the); Cxs.beginpath (); Cxs.moveto (0,Ten); Cxs.lineto (0,- the); Cxs.closepath (); Cxs.stroke (); Cxs.restore (); //minuteCxs.save (); Cxs.translate ( -, -); Cxs.linewidth=6; Cxs.strokestyle="#000"; Min+=sec/ -; Cxs.rotate (min*6*math.pi/ the); Cxs.beginpath (); Cxs.moveto (0, the); Cxs.lineto (0,- $); Cxs.closepath (); Cxs.stroke (); Cxs.restore (); //secondsCxs.save (); Cxs.translate ( -, -); Cxs.linewidth=4; Cxs.strokestyle="Red"; Cxs.rotate (sec*6*math.pi/ the); Cxs.beginpath (); Cxs.moveto (0, -); Cxs.lineto (0,- the); Cxs.closepath (); Cxs.stroke (); Cxs.beginpath (); Cxs.arc (0,0,5,0, the,false); Cxs.closepath (); Cxs.fillstyle="Grey"; Cxs.fill (); Cxs.stroke (); Cxs.beginpath (); Cxs.arc (0,- Max,5,0, the,false); Cxs.closepath (); Cxs.fillstyle="Grey"; Cxs.fill (); Cxs.stroke (); Cxs.restore (); } setinterval (Date, +);</script>"Date ()"> <canvas width=" -"height=" -"Id="Canvas"> Your browser version is lower, please upgrade and then use!! </canvas></body>