wes bos js30——Clock

一、全部源码仓库

https://github.com/wesbos/JavaScript30.git

二、全部视频教程链接

https://courses.wesbos.com/account/access/62d7de4388db94aff3fd1ee3/view/194130581

三、元素快速垂直居中方法

body {
  display: flex;
  margin: 0;
}
html, body{
  width: 100%;
  height: 100%;
}
居中元素{
  margin: auto;
}

四、实现效果

五、html

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

六、CSS

html{
  background: aquamarine url(https://unsplash.it/1500/1000?image=881&blur=5);
  background-size: cover;
}
body {
  display: flex;
  margin: 0;
}
html, body{
  width: 100%;
  height: 100%;
}
.clock{
  width: 30rem;
  height: 30rem;
  border: 20px solid white;
  border-radius: 50%;
  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);
   margin: auto;
   padding: 2rem;
}
.clock-face{
  border-radius: 50%;
  width: 100%;
  height: 100%;
  position: relative;
}
.hand{
  width: 50%;
  height: 0.375rem;
  background-color: black;
  position: absolute;
  top: 50%;
  transform-origin: 100%;
  transform: rotate(90deg);
  transition: all 0.05s;
  transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);/* 这行有没有，秒针最明显*/
}

七、JS

const hourHand = document.querySelector('.hour');
const minsHand = document.querySelector('.mins');
const secondHand = document.querySelector('.second');

function setDate() {
  const now = new Date();

  const seconds = now.getSeconds();
  const secondsDegrees = ((seconds / 60) * 360) + 90;
  console.log(secondsDegrees);
  secondHand.style.transform = `rotate(${secondsDegrees}deg)`;

  const mins = now.getMinutes();
  const minsDegrees = ((mins / 60) * 360) + ((seconds / 60) * 6) + 90;
  minsHand.style.transform = `rotate(${minsDegrees}deg)`;

  const hour = now.getHours();
  const hourDegrees = ((hour / 12) * 360) + ((mins / 60) * 30) + 90;
  hourHand.style.transform = `rotate(${hourDegrees}deg)`;
}
setInterval(setDate, 1000);
setDate();