如何利用 JavaScript 做出一个时钟 本文同步发于:https://jason06286.github.io/20200819/44267/ 作品範例 https://codepen.io/j... 如何利用 JavaScript 做出一个时钟

本文同步发于:https://jason06286.github.io/20200819/44267/

https://ithelp.ithome.com.tw/upload/images/20200819/20124879DePiaDKPSn.png

作品範例

https://codepen.io/jasonuse/pen/abNmpdO

HTML

我们要创建一个 div,里面要包裹着时针、分针,秒针和 数字 1 ~ 12

<div class="clock">        <div class="hand hour data-hour-hand"></div>        <div class="hand minute data-minute-hand"></div>        <div class="hand second data-second-hand"></div>        <div class="number number1">1</div>        <div class="number number2">2</div>        <div class="number number3">3</div>        <div class="number number4">4</div>        <div class="number number5">5</div>        <div class="number number6">6</div>        <div class="number number7">7</div>        <div class="number number8">8</div>        <div class="number number9">9</div>        <div class="number number10">10</div>        <div class="number number11">11</div>        <div class="number number12">12</div>    </div>
CSS时钟介面

我们先给背景色,在给 .clock 宽高和外框把它变圆形。

*, *::after, *::before {    box-sizing: border-box;    }body{    background-color: #D9AFD9; //设置背景色}// 时钟.clock{    width: 300px; //宽    height: 300px; //高    background-color: rgba(255,255,255,.8); //时钟的背景色    border-radius: 50%; //变圆    border: 2px solid black; //给个外框}
时钟数字

利用绝对定位,把数字定位在时钟上,所以先给.clockposition:relative;
设置--rotation变数,一个圆为 360°,时钟为 12 小时制,所以360°/12=30°
每前进一格为30度,再把个角度带入变数中。

// 时钟.clock{    width: 300px;    height: 300px;    background-color: rgba(255,255,255,.8);    border-radius: 50%;    border: 2px solid black;    position: relative; // 要定位在时钟上}// 时钟数字.clock .number{    --rotation:0; //设置变数,起始为 0 度    position: absolute;    width: 100%;    height: 100%;    text-align: center;     transform: rotate(var(--rotation));    font-size: 1.5rem;}// 带入角度// 360deg/12=30deg.clock .number1{--rotation:30deg;}.clock .number2{--rotation:60deg;}.clock .number3{--rotation:90deg;}.clock .number4{--rotation:120deg;}.clock .number5{--rotation:150deg;}.clock .number6{--rotation:180deg;}.clock .number7{--rotation:210deg;}.clock .number8{--rotation:240deg;}.clock .number9{--rotation:270deg;}.clock .number10{--rotation:300deg;}.clock .number11{--rotation:330deg;}