JavaScript实现时钟功能

<div class = "clock"></div>

<div class="clock">
  <div class="clock-face"></div>
</div>

<div class="clock">
  <div class="clock-face">
    <div class="hand hour-hand"></div>
    <div class="hand min-hand"></div>
    <div class="hand second-hand"></div>
  </div>
</div>

html {
    background: #018DED url(https://unsplash.it/1500/1000?image=881&blur=5);
    background-size: cover;
    font-family: 'helvetica neue';
    text-align: center;
    font-size: 10px;
}

body {
    margin: 0;
    font-size: 2rem;
    display: flex;
    flex: 1;
    min-height: 100vh;
    align-items: center;
}

.clock{
    width:30rem;
    height:30rem;
    border:20px solid white;
    border-radius:50%;
    margin:50px auto;
    position:relative;
    padding:2rem;
    box-shadow:
            0 0 0 4px rgba(0,0,0,0.1),
            inset 0 0 0 3px #EFEFEF,
            inset 0 0 10px black,
            0 0 10px rgba(0,0,0,0.2);
}

.clock-face{
    position:relative;
    width:100%;
    height:100%;
    transform:translateY(-3px);
}

.clock-face:after{
    content:'';
    width:30px;
    height:30px;
    border-radius:100%;
    background-color:white;
    display:block;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    position:absolute;
}

.hand{
    position:absolution;
    width:100%;
    height: 100%;
}

.second-hand:after{
    content: '';
    display: block;
    width: 5px;
    height: 50%;
    background-color: black;
    left: 50%;
    bottom: 50%;
    transform: translate(-50%,0%);
    position: absolute;
  }

  .min-hand:after{
    content: '';
    display: block;
    width: 10px;
    height: 40%;
    background-color: gray;
    left: 50%;
    bottom: 50%;
    transform: translate(-50%,0%);
    position: absolute;
  }

  .hour-hand:after{
    content: '';
    display: block;
    width: 15px;
    height: 20%;
    background-color: white;
    left: 50%;
    bottom: 50%;
    transform: translate(-50%,0%);
    position: absolute;
  }

let second = document.querySelector('.second-hand');
let min = document.querySelector('.min-hand');
let hour = document.querySelector('.hour-hand');

function setDate(){
    //首先先获取时间，用Data（）
    let data = new Data();
}

second.style.transform = `rotate(数字/变量+Deg)`;
min.style.transform = `rotate(数字/变量+Deg)`;
hour.style.transform = `rotate(数字/变量+Deg)`;

let secondDeg = data.getSeconds();
let minDeg = data.getMinutes();
let hourDeg = data.getHours();

let secondDeg = data.getSeconds() * 6;
let minDeg = data.getMinutes() * 6;
let hourDeg = data.getHours() *30;

let second = document.querySelector('.second-hand')
let min = document.querySelector('.min-hand')
let hour = document.querySelector('.hour-hand')

function setClock(){
  let data = new Date();

  let secondDeg = data.getSeconds() * 6 // (deg = 360/60)
  let minDeg = data.getMinutes() * 6 // (deg = 360/60)
  let hourDeg = data.getHours() * 30 // (deg = 360/12)

  second.style.transform = `rotate(${secondDeg}deg)`
  min.style.transform = `rotate(${minDeg}deg)`
  hour.style.transform = `rotate(${hourDeg}deg)`

}

setClock();

/**多种计时器的方法
     * 1. setInterval(函数，时间)
     * 2. setTimeout(函数，时间)
     * 3. window.requestAnimationFrame(函数)这个不需要设置时间，它会根据你硬件的速度来更改时间
     * */

setInterval(setDate, 1000); //设定间隔，执行很多次

/*function timeoutHandler(){
  setDate();
  setTimeout(timeoutHandler,1000);//这样就可以连续执行了
}
setTimeout(timeoutHandler,1000);//延迟多久执行一次*/

/*function animationHandler(){
  setDate();
  window.requestAnimationFrame(animationHandler);//处理画面更新的setTimeout
}
window.requestAnimationFrame(animationHandler);*/

let secondDeg = data.getSeconds() * 6; //(360/60)
let minDeg = data.getMinutes() * 6 + data.getSeconds() *6/60; //(360/60)
let hourDeg = data.getHours() * 30 + data.getMinutes() * 30/60;//(360/12)