文章已同步發表至公衆号：百裡青山
前言前兩天翻資料，找到了剛開始學習前端的時候學習的一個小案例，用css去畫一個轉動的表盤，也不知道大家都寫過沒有，樣子如下圖所示
預覽圖.gif
今天把這個小案例分享給大家，這個效果原案例是完全用css實現的，因為表針轉動都有規律可循，設置一個定時的動畫就行，我為了簡化代碼量，并且可以獲取當前的時間，所以用js優化了一下，因為案例很小，所以就不用框架了，直接原生走起，由于這種簡單的文章主要面向初學者，所以會說的詳細一點
開發初始化第一步，找一個文件夾，建立 index.html ， 然後引入一個 style.css 并初始化一些樣式
image.png
表盤制作接下來我們來制作表盤
面闆首先是面闆部分，面闆的html部分我們就隻用一個節點就夠了，其他都用css來完成
<div id="watch">
<!-- 表盤 -->
<div class="frame-face"></div>
</div>
首先我們給表盤一個基礎樣式來确定基本結構，再加點漸變和陰影，制造一點立體感
#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
之後我們利用僞類元素，畫一個徑向漸變，來營造一個層次感，讓表盤的立體感更加強烈
#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
這樣看着還是不太順眼，我們再加一個僞類，制作表盤的主面闆，通過陰影和漸變造成的對比效果，讓這個表盤看起來更真實
#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
刻度表盤的周圍有一個個的小刻度點，讓我們可以知道現在的具體時間，這裡我們給表盤設置60個刻度點，dom節點我們先寫一個刻度點的容器，因為刻度點太多了，我們稍後用js生成
<!-- 刻度 -->
<ul id="minute-marks"></ul>
來一個基礎的樣式
#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 調整每個刻度點的位置達成相應的效果，整點的刻度相比其他的要更突出，所以我們要找出整點的刻度給他加一個突出的效果
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
這裡我們也可以酌情考慮增加一些刻度的數字标識
<ul id="digits">
<li>3</li>
<li>6</li>
<li>9</li>
<li>12</li>
</ul>
#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)
}
這裡我們直接把指針轉動的軸中心點也給做上
#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
指針開發接下來我們進行表盤指針的開發
指針這裡我們給準備三個dom，分别是時針、分針和秒針
<!-- 指針 -->
<div class="hours-hand"></div>
<div class="minutes-hand"></div>
<div class="seconds-hand"></div>
時針主體部分分為針柱和針尖，針柱方面就一個矩形，針尖可以用一個半圓和一個三角形組成
#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
注意，這裡我們用了 transform-origin 這個屬性，這個屬性是用來設置rotate旋轉基準點的，dom旋轉的時候将會以這個點進行旋轉，如果不設置的話将會以自身中心點位中心旋轉
分針開發為了做一個區分，我們把不同的指針給一個不同的樣式，分針的話就一個矩形就行
#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
秒針開發秒針由三部分組成，分别是針尾的圓角矩形，一個和中心點重疊的圓形，還有一個很長的針尖，也可以通過圓角來做
/* 秒針 */
#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
讓針轉動起來上面我們開發了表盤和指針的基本樣式，下面我們就讓針來轉動起來，剛才寫css的時候，我們已經知道了，指針的位置是通過transform轉動了一定的角度來實現的，所以我們要實現指針的運動，隻要定時去改動這個角度就可以了
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
數字表開發指針雖然也很直觀，但總是沒有數字直觀準确，所以我們可以再加一個數字小表盤。數字表盤更簡單了，我們獲取一下當前的時分秒，定時刷新就好了，這裡需要主機柱子表盤放的層級，不可蓋住指針
<!-- 數字表盤 -->
<div class="digital-wrap">
<ul class="digit-hours"></ul>
<ul class="digit-minutes"></ul>
<ul class="digit-seconds"></ul>
</div>
#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後面
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
這樣就大功告成了。
,更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
