Simple hours table function example of native JS implementation

The example of this paper tells the simple hourly clock function of native JS implementation. Share to everyone for reference, specifically:

First look at the running effect:

原生JS实现的简单小钟表功能示例

Complete code:

    www.jb51.net watch   body {background-color: # 00a2d4;}. Clock {width: 200px; Height: 200px; Background: -webkit-radial-gradient (# 3b3b3b, # 000); Background: radial-gradient (# 2e3f50, # 0e1b29); Box-shadow: INSET 0px 0px 30px # 131313, 0px 2px 18px RGBA (0 , 0, 0, 0.5); Border: 6px Solid # 172839; Border-Radius: 106px; margin: auto; position: absolute; top: 0; bottom: 0;}. HOUR-HAND {Width: 4px; Height: 55px; Background: #fff; Box-shadow: 0px 0px 7px # 000;Position: Absolute; Top: 45px; Left: 98px;} .minute-hand {width: 4px; Height: 80px; Background: #fff; box-shadow: 0px 0px 4px # 000; Position: absolute; top: 20px; Left : 98px;} .second-hand {width: 2px; height: 80px; background: #bbb; box-shadow: 0px 0px 7px # 000; Position: absolute; top: 20px; Left: 99px;} .pin {width: 10px; border-radius: 10px; margin: auto; position: absolute; top: 0; bottom: 0; Left: 0; Right: 0;}. HOUR-HAND, .MINUTE- Hand,. Second-hand {-Webkit-Transform-Origin: 50% 100%;-Moz-Transform-Origin: 50%;-Transform-Origin: 50% 100%; -MS-Transform-Origin: 50% 100%; Transform-Origin: 50% 100%;} .circle {Width : 20px; Height: 20px; Line-height: 20px; text-align: center; color: #fff; position: absolute;}       
6
5
4
3
2
9
8
7
Window.onLoad = function () {setInterval (function () {var dt = new date (); var sec_deg = dt.getseconds () * (360/60); var min_deg = dt.getminutes () * (360/60); var hr_deg = dt.getHours () * (360/12) + DT.GETMINUTES () * (360 / 60/12); Document.QuerySelector (". Clock .second-hand"). Style.csstext = '- Webkit-Transform: Rotate (' + sec_deg + 'deg)', '- Moz-Transform: Rotate (' + + SEC_DEG + 'DEG)', '-o-Transform: Rotate (' + sec_deg + 'deg)', '-MS-Transform: Rotate (' + sec_deg + 'deg)', 'Transform: Rotate (' + sec_deg + 'DEG)'; Document.QuerySelector ('. clock .minute-hand'). style.csstext = '- WebKit-Transform: Rotate (' + min_deg + 'deg)', '-Moz-Transform: Rotate (' + MIN_DEG + 'DEG)', '-o-Transform: Rotate (' + min_deg + 'deg)', '-MS-Transform: Rotate (' + min_deg + 'deg)', 'Transform: Rotate (' + min_deg + 'DEG)'; Document.QuerySelector ('. clock. Hour-hand'). style.csStext = '- Webkit-Transform: Rotate (' + HR_DEG + 'DEG)', '-Moz-Transform: Rotate (' + HR_DEG + 'DEG)', '-TRANSFORM: ROTATE (' + HR_DEG + 'DEG ) ','-ms-transform: Rotate ('+ HR_DEG +' DEG) ',' Transform: Rotate ('+ HR_DEG +' DEG) ';}, 1000); var DX = 90, DY = 90, s = 87, // radius x = math.sin (0), y = math.cos (0), DIG = 2 * math.pi / 12; var circle = document.queryselectorall (". Circle"); for (VAR i = 0; i
Interested friends can use
online HTML / CSS / JavaScript code run tool
: Http://tools.jb51.net/code/htmljsrun Tests the running effect.
PS: Here you recommend several time and date related tools for your reference:
<12;i++){ var x=Math.sin(i*dig); var y=Math.cos(i*dig); var topValue=Number(dy+y*s), leftValue=Number(dx+x*s); circle[i].style.top=topValue+"px"; circle[i].style.left=leftValue+"px"; } } Online Date / Day Calculator:
http://tools.jb51.net/jisuanqi/date_jisuanqi
Online Date Calculator / Paste Day Calculator:

http://tools.jb51.net/jisuanqi/Datecalc

Online Japanese days Diaga Calculator:

http://tools.jb51.net/jisuanqi/onlinedatejsq

UNIX Time Stamp (TimeStamp ) Conversion tools:
http://tools.jb51.net/code/unixtime

More about JavaScript related content, readers can view this site: “JavaScript time and date Summary, “JavaScript Finding Algorithm Summary”, “JavaScript Error and Debugging Skill Summary”, “JavaScript Data Structure and Algorithm Skill Summary”, “JavaScript Has Algorithm and Skill Summary” and “Summary of JavaScript Mathematical Computing”

I hope this article will help you JavaScript programming.

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment