--- theme: condensed-night-purple highlight: a11y-dark --- 我正在参与[掘金创作者训练营第4期](https://juejin.cn/post/7064192649523101726 "https://juejin.cn/post/7064192649523101726")，点击了解活动详情，一起学习吧！点击链接查看效果https://ihope_top.gitee.io/my-demo/demo/1/ 本文章已同步发布到公众号：百里青山 ## 前言前两天翻资料，找到了刚开始学习前端的时候学习的一个小案例，用css去画一个转动的表盘，也不知道大家都写过没有，样子如下图所示 ![预览图.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5480cb6992434887813d85d693d2d5c4~tplv-k3u1fbpfcp-watermark.image?) 今天把这个小案例分享给大家，这个效果原案例是完全用css实现的，因为表针转动都有规律可循，设置一个定时的动画就行，我为了简化代码量，并且可以获取当前的时间，所以用js优化了一下，因为案例很小，所以就不用框架了，直接原生走起，由于这种简单的文章主要面向初学者，所以会说的详细一点 ## 开发 ### 初始化第一步，找一个文件夹，建立 `index.html` ，然后引入一个 `style.css` 并初始化一些样式 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3764751707974435b04f44cfbb7949c5~tplv-k3u1fbpfcp-watermark.image?) ### 表盘制作接下来我们来制作表盘 #### 面板首先是面板部分，面板的html部分我们就只用一个节点就够了，其他都用css来完成 ```html

``` 首先我们给表盘一个基础样式来确定基本结构，再加点渐变和阴影，制造一点立体感 ```css #watch .frame-face { position: relative; width: 30em; height: 30em; margin: 2em auto; border-radius: 15em; background: -webkit-linear-gradient(top, #f9f9f9, #666); background: -moz-linear-gradient(top, #f9f9f9, #666); background: linear-gradient(top, #f9f9f9, #666); box-shadow: 0.5em 0.5em 4em rgba(0, 0, 0, 0.8); } ``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/50da60f41feb423f9b65eca0b763914e~tplv-k3u1fbpfcp-watermark.image?) 之后我们利用伪类元素，画一个径向渐变，来营造一个层次感，让表盘的立体感更加强烈 ```css #watch .frame-face:before { content: ''; width: 29.4em; height: 29.4em; border-radius: 14.7em; position: absolute; top: .3em; left: .3em; background: -webkit-radial-gradient(ellipse at center, rgba(246, 248, 249, 1) 0%, rgba(229, 235, 238, 1) 65%, rgba(205, 212, 217, 1) 66%, rgba(245, 247, 249, 1) 100%); background: -moz-radial-gradient(ellipse at center, rgba(246, 248, 249, 1) 0%, rgba(229, 235, 238, 1) 65%, rgba(205, 212, 217, 1) 66%, rgba(245, 247, 249, 1) 100%); background: radial-gradient(ellipse at center, rgba(246, 248, 249, 1) 0%, rgba(229, 235, 238, 1) 65%, rgba(205, 212, 217, 1) 66%, rgba(245, 247, 249, 1) 100%); } ``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/310f7b20df13462bb979592f876523fe~tplv-k3u1fbpfcp-watermark.image?) 这样看着还是不太顺眼，我们再加一个伪类，制作变盘的主面板，通过阴影和渐变造成的对比效果，让这个表盘看起来更真实 ```css #watch .frame-face:after { content: ''; width: 28em; height: 28em; border-radius: 14.2em; position: absolute; top: .9em; left: .9em; box-shadow: inset rgba(0, 0, 0, .2) .2em .2em 1em; border: .1em solid rgba(0, 0, 0, .2); background: -webkit-linear-gradient(top, #fff, #ccc); background: -moz-linear-gradient(top, #fff, #ccc); background: linear-gradient(top, #fff, #ccc); } ``` ![Snipaste_2022-02-22_14-48-00.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/55951228eae540ccadf02009f5b59805~tplv-k3u1fbpfcp-watermark.image?) #### 刻度表盘的周围有一个个的小刻度点，让我们可以知道现在的具体时间，这里我们给表盘设置60个刻度点，dom节点我们先写一个刻度点的容器，因为刻度点太多了，我们稍后用js生成 ```html

``` 来一个基础的样式 ```css #minute-marks li { display: block; width: 0.2em; height: 0.6em; background: #929394; position: absolute; top: 50%; left: 50%; margin: -0.4em 0 0 -0.1em; } ``` 这里我们通过 `transform` 调整每个刻度点的位置达成相应的效果，整点的刻度相比其他的要更突出，所以我们要找出整点的刻度给他加一个突出的效果 ```js window.onload = function () { // 生成刻度 let markWrap = document.getElementById('minute-marks') for (let index = 0; index < 60; index++) { let markItem = document.createElement('li') markItem.style.cssText = "transform:rotate(" + index * 6 + "deg) translateY(-12.7em)"; if (index % 5 == 0) { markItem.style.width = "0.3em"; markItem.style.height = "1em"; } markWrap.appendChild(markItem) } } ``` ![Snipaste_2022-02-22_15-05-34.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6863d22e6fc841ee96accc24f5af2792~tplv-k3u1fbpfcp-watermark.image?) 这里我们也可以酌情考虑增加一些刻度的数字标识 ```html

``` ```css #digits { width: 30em; height: 30em; border-radius: 15em; position: absolute; top: 0; left: 50%; margin-left: -15em; } #digits li { font-size: 1.6em; display: block; width: 1.6em; height: 1.6em; position: absolute; top: 50%; left: 50%; line-height: 1.6em; text-align: center; margin: -.8em 0 0 -.8em; font-weight: bold; } #digits li:nth-child(1) { transform: translate(7em, 0) } #digits li:nth-child(2) { transform: translate(0, 7em) } #digits li:nth-child(3) { transform: translate(-7em, 0) } #digits li:nth-child(4) { transform: translate(0, -7em) } ``` ![6.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/22ec6608e0854ecd926fdc58845e138f~tplv-k3u1fbpfcp-watermark.image?) 这里我们直接把指针转动的轴中心点也给做上 ```css #digits:before { content:''; width:1.6em; height:1.6em; border-radius:.8em; position:absolute; top:50%; left:50%; margin:-.8em 0 0 -.8em; background:#121314; } #digits:after { content:''; width:4em; height:4em; border-radius:2.2em; position:absolute; top:50%; left:50%; margin:-2.1em 0 0 -2.1em; border:.1em solid #c6c6c6; background:-webkit-radial-gradient(ellipse at center, rgba(200,200,200,0), rgba(190,190,190,1) 90%, rgba(130,130,130,1) 100%); background:-moz-radial-gradient(ellipse at center, rgba(200,200,200,0), rgba(190,190,190,1) 90%, rgba(130,130,130,1) 100%); background:radial-gradient(ellipse at center, rgba(200,200,200,0), rgba(190,190,190,1) 90%, rgba(130,130,130,1) 100%); } ``` ![7.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5630a814cffe466e9ae84778ab89b7b6~tplv-k3u1fbpfcp-watermark.image?) ### 指针开发接下来我们进行表盘指针的开发指针这里我们给准备三个dom，分别是时针、分针和秒针 ```html

``` #### 时针开发时针主体部分分为针柱和针尖，针柱方面就一个矩形，针尖可以用一个半圆和一个三角形组成 ```css #watch .hours-hand { width:.8em; height:7em; border-radius:0 0 .9em .9em; background:#232425; position:absolute; bottom:50%; left:50%; margin:0 0 -.8em -.4em; box-shadow:#232425 0 0 2px; transform-origin:0.4em 6.2em; transform:rotate(-25deg); } #watch .hours-hand:before { content:''; background:inherit; width:1.8em; height:.8em; border-radius:0 0 .8em .8em; box-shadow:#232425 0 0 1px; position:absolute; top:-.7em; left:-.5em; } #watch .hours-hand:after { content:''; width:0; height:0; border:.9em solid #232425; border-width:0 .9em 2.4em .9em; border-left-color:transparent; border-right-color:transparent; position:absolute; top:-3.1em; left:-.5em; } ``` ![8.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3e11caf4bd7d421d9f7988345fc48113~tplv-k3u1fbpfcp-watermark.image?) 注意，这里我们用了 `transform-origin` 这个属性，这个属性是用来设置`rotate`旋转基准点的，dom旋转的时候将会以这个点进行旋转，如果不设置的话将会以自身中心点位中心旋转 #### 分针开发为了做一个区分，我们不同的指针给一个不同的样式，分针的话就一个矩形就行 ```css #watch .minutes-hand { width:.8em; height:12.5em; border-radius:.5em; background:#343536; position:absolute; bottom:50%; left:50%; margin:0 0 -1.5em -.4em; box-shadow:#343536 0 0 2px; transform-origin:0.4em 11em; } ``` ![9.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/861bb02d3d37491c82f25803a122a5c6~tplv-k3u1fbpfcp-watermark.image?) #### 秒针开发秒针由三部分组成，分别是针尾的圆角矩形，一个和中心点重叠的圆形，还有一个很长的针尖，也可以通过圆角来做 ```css /* 秒针 */ #watch .seconds-hand { width:.2em; height:14em; border-radius:.1em .1em 0 0/10em 10em 0 0; background:#c00; position:absolute; bottom:50%; left:50%; margin:0 0 -2em -.1em; box-shadow:rgba(0,0,0,.8) 0 0 .2em; transform-origin:0.1em 12em; } #watch .seconds-hand:after { content:''; width:1.4em; height:1.4em; border-radius:.7em; background:inherit; position:absolute; left:-.65em; bottom:1.35em; } #watch .seconds-hand:before { content:''; width:.8em; height:3em; border-radius:.2em .2em .4em .4em/.2em .2em 2em 2em; box-shadow:rgba(0,0,0,.8) 0 0 .2em; background:inherit; position:absolute; left:-.35em; bottom:-3em; } ``` ![10.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/276d3719e6b24d7da385a81a20c86557~tplv-k3u1fbpfcp-watermark.image?) #### 让针转动起来上面我们开发了表盘和指针的基本样式，下面我们就让针来转动起来，刚才写css的时候，我们已经知道了，指针的位置是通过`transform`转动了一定的角度来实现的，所以我们要实现指针的运动，只要定时去改动这个角度就可以了 ```js setInterval(function () { var time = new Date(); var hour = time.getHours() var minute = time.getMinutes(); var second = time.getSeconds(); var hournum; if (hour > 12) { hournum = ((hour - 12) + minute / 60) * 30; } else { hournum = (hour + minute / 60 * 100) * 30; } var minnum = (minute + second / 60) * 6 + second / 60; var sennum = second * 6; document.getElementsByClassName("hours-hand")[0].style.transform = "rotate(" + hournum + "deg)" document.getElementsByClassName("minutes-hand")[0].style.transform = "rotate(" + minnum + "deg)" document.getElementsByClassName("seconds-hand")[0].style.transform = "rotate(" + sennum + "deg)" }, 1000); ``` 这样就大功告成了 ![11.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6041c9c48e78456db69fe47123e74513~tplv-k3u1fbpfcp-watermark.image?) ### 数字表开发指针虽然也很直观，但总是没有数字直观准确，所以我们可以再加一个数字小表盘。数字表盘更简单了，我们获取一下当前的时分秒，定时刷新就好了，这里需要主机柱子表盘放的层级，不可盖住指针 ```html

``` ```css #watch .digital-wrap { width:9em; height:3em; border:.1em solid #222; border-radius:.2em; position:absolute; top:50%; left:50%; margin:3em 0 0 -4.5em; overflow:hidden; background:#4c4c4c; background:-webkit-linear-gradient(top, #4c4c4c,#0f0f0f); background:-moz-linear-gradient(top, #4c4c4c, #0f0f0f); background:-ms-linear-gradient(top, #4c4c4c,#0f0f0f); background:-o-linear-gradient(top, #4c4c4c,#0f0f0f); background:linear-gradient(to bottom, #4c4c4c,#0f0f0f); } #watch .digital-wrap ul { float:left; width:2.9em; height:3em; border-right:.1em solid #000; color:#ddd; font-family:Consolas, monaco, monospace; text-align: center; line-height: 3em; } #watch .digital-wrap ul:last-child {width: 3em; border:none } ``` ```js // 接到上面指针转动js后面 if(hour<10){ hour="0"+parseInt(hour); } if(minute<10){ minute="0"+parseInt(minute); } if(second<10){ second="0"+parseInt(second); } document.getElementsByClassName("digit-hours")[0].innerHTML=hour; document.getElementsByClassName("digit-minutes")[0].innerHTML=minute; document.getElementsByClassName("digit-seconds")[0].innerHTML=second; ``` ![12.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b287a51b372c47818060d6f8cbfac1c5~tplv-k3u1fbpfcp-watermark.image?) 这样就大功告成了。