JavaScript实现模拟时钟ISO时钟

模仿国际标准化组织的时钟：国际标准化组织时钟

达到效果：

国际标准化组织时钟

工程分析

1.首先，时钟必须得到本地客户端的时间；

2.时钟有三个指针，我们可以通过添加动画使它们围绕中心点旋转；

3.通过获取的时、分、秒值分别计算时针、分针、秒针的角度值；

HTMLCSS

布局

Div class=' box ' article class=' clock ' Div class=' hours-container ' Div class=' hours '/Div/Div class=' minutes-container ' Div class=' minutes '/Div/Div class=' seconds-container ' Div class=' seconds '/Div/Div/article/Div 1 and。方框是为了方便布局；

2.那么每个指针都需要一个*-container容器。

添加CSS样式

加载背景，然后将其放在页面上的适当位置。

html { font-size : 10px；}html，正文{ margin : 0；padd : 0；}.box { width: 35remheight: 38rem背景： rgb(205，205，205)；border-radius : 1 rem；margin: 5%自动；display: flexjustice-content : center；align-items:居中；}.时钟{ width: 30remheight: 30rembackground : # fff URL(IOs _ clock . SVG)无重复中心；背景尺寸：88%；边界半径：50%；相对位置：}

1、宽度：35雷姆；height: 38rem这个比例很顺眼；

2.那个。框使用Flex布局，并且。时钟在水中和垂直方向居中。看过第一天教程的人都应该了解Flex布局。

3.使用图片作为时钟的背景。获取地址

添加中心轴

使用CSS3中的虚拟元素给时钟添加一个实心点，指针都围绕这个点旋转。

{ content : }之后的. clock :宽度： 1.5雷姆；高度： 1.5雷姆；背景技术： # 000；边界半径：50%；绝对位置：top : 50%；左侧：50%；transform: translate(-50%，-50%)；/*将自身的50%向上移动50% */z-index : 10；}

1，content :“”；否则，即使指定了宽度和高度，也不会显示此虚拟元素。

2.由于相对定位是从元素左上角开始计算的，所以顶部：是50%；左侧：50%；不能在时钟中心做这个点，使用Transform : Translate (-50%，-50%)；向左上方移动其宽度或高度的50%

3、z-index : 10；它是在视图的顶部做一个点，覆盖指针交叉的地方

指针容器。小时集装箱。分钟-集装箱。秒-容器{ position:绝对值；top : 0；right : 0；bottom : 0；left : 0；}1.容器放置在时钟上方，但没有样式。然后就可以创建指针了！

添加指针。小时{宽度：3%；高度：20%；背景技术： # 000；转换-原始： 50% 100%；绝对位置：top : 30%；左： 48.5%；}.分钟{ width : 2%；高： 37%；背景技术： # 000；转换-原始： 50% 100%；绝对位置：top : 13%；左： 49%；}.秒{ width : 1%；高： 40%；背景技术# f00转换-原始： 50% 90%；绝对位置：top : 20%；左： 49.5%；z-index : 8；}

1.分别添加时针、分针和秒针。

2.使用%可以更好地适应不同的屏幕。

3、转换源： 50% 90%；指针旋转的指定位置是X方向的中心线和Y方向的90%线的交点。(具体见图)

4.这里定位的时候考虑到了自身的宽度，所以不需要移动到左上角。

动画

到目前为止，这个时钟没有任何功能。让我们动起来。

定义动画规则

@关键帧旋转{ 100% { transform : rotateZ(360 deg)；}}1.这里，动画是由@关键帧规则定义的。该动画的名称是ratate，应用该动画的元素将沿着某个z轴旋转360度(即上面指定的交点)。

定时功能

指定每个指针旋转360度需要多长时间。hours-container { animation:旋转60s无限线性；}.分钟-容器{ animation:旋转30s无限线性；}.秒-容器{ animation:旋转10s无限线性；}

为了方便演示，这里的固定时间不是根据真实的Clock设置的。时针应为12小时(43200s)，分针应为3600s，秒针应为60s。

更像真正的时钟

实际上，时钟大部分是秒针和分针，可以跳动和滴答。让我们试试。hours-container { animation:旋转60s无限线性；}.分钟-容器{ animation:旋转3600s无限步(60)；}.秒-容器{ animation:旋转60s无限步(60)；}

1.只需将分针和秒针的旋转模式调整为steps()。

然而，每次时钟刷新时，它都从0开始，这不是我们需要的。如何才能显示真实时间？

正确的时间

我们需要先得到当前时间，然后计算每个指针应该旋转的角度。

获取每个指针

const HourHand=document . query selector('。小时-容器')；const minuthend=document . queryselector('。分钟-容器')；const二手货=document.querySelector('。秒-容器')；获取当前时间

立即常量=新日期()；const hour=now . gethours()；const minute=now . getminutes()；const second=now . getseconds()；`计算每个指针应该旋转的角度。

CSS3中有四个角度单位：

我们的对应关系是：90度=100度=0.25度 1。度数(一个圆是360度)、倾斜度(一个圆是400度)、角度(一个圆是1度)和弧度(一个圆是2弧度)。39990.99999999996

显然，我们这里要用的单位是deg。

const secondDegree=second * 6 90const minuteDegree=分钟* 6(秒/10)90；const hourDegree=(小时* 30)(分钟/2)90；1、90是因为角度的起始位置是水平x轴，为了与Clock指针的起始位置(y轴)统一；

2.秒针的计算最简单，(秒/60)* 360 90；

3.分针要考虑秒针的影响，比如30秒后，就相当于半分钟。公式为：当前分、秒在分钟内的映射；即：((分/60) * 360)((秒/60)* 6)90；

4.时针稍微复杂一点，因为要考虑分钟的影响。比如30分钟后，相当于半个小时。公式是：当前小时和分钟在小时中的映射。即：((小时/12) * 360)((分钟/60)* 30)90；

应用角度值

hour hand . style . transform=` rotatez($ { hour degree } deg)`；minute hand . style . transform=` rotatez($ { minute degree } deg)`；secondary . style . transform=` rotatez($ { second degree } deg)`；为了实时更新页面，我们需要把这些东西封装成一个函数，然后用一个定时器每秒执行一次。

整个时钟的功能都完成了！