The tutorial on YouTube made a small clock with HTML and JS.
Code:
Clock.html
//clock.html<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "Utf-8"> <Metaname= "Viewport"content= "Width=device-width"> <title>JS Bin</title></Head><Body> <CanvasID= "Canvas"width= "$"Height= "$"> <Scripttype= "Text/javascript"src= "C:\Users\Administrator\Desktop\Clock\clock.js"></Script> </Canvas></Body></HTML>
Clock.js
//Clock.jsvarCanvas = document.getElementById (' Canvas ');varCTX = Canvas.getcontext (' 2d '); Ctx.strokestyle= ' LightBlue '; Ctx.linewidth= 17; Ctx.linecap= ' Round '; Ctx.shadowblur= 15; Ctx.shadowcolor= ' LightBlue ';functionDegtorad (degree) {varfactor = math.pi/180;returndegree*factor;}functionRendertime () {varnow =NewDate (); varToday =now.todatestring (); varTime =now.tolocaletimestring (); varHours =now.gethours (); varminutes =now.getminutes (); varseconds =now.getseconds (); varmilliseconds =now.getmilliseconds (); varNewseconds = seconds+ (milliseconds/1000);//BackgroundGradient = ctx.createradialgradient (250, 250, 5, 250, 250, 300); Gradient.addcolorstop (0, ' GREY '); Gradient.addcolorstop (1, ' BLACK '); Ctx.fillstyle=gradient; Ctx.fillrect (0, 0, 500, 500); //HoursCtx.beginpath (); Ctx.arc (, Degtorad (+), Degtorad (hours*15-90)); Ctx.stroke (); //MinutesCtx.beginpath (); Ctx.arc (Degtorad (+), Degtorad (minutes*6-90)); Ctx.stroke (); //SecondsCtx.beginpath (); Ctx.arc (, Degtorad (+), Degtorad (newseconds*6-90)); Ctx.stroke (); //DateCtx.font = "25px Arial"; Ctx.fillstyle= ' LightBlue '; Ctx.filltext (Today,175, 250); // TimeCtx.font = "25px Arial"; Ctx.fillstyle= ' LightBlue '; Ctx.filltext (Time,175, 280); }setinterval (Rendertime,40);
: My color matching is really incompetent =-=
"Gadgets" time-passing-by clock
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
