JavaScript30 - 2.JS + CSS Clock

❤️ javascript30是一系列的視訊教程，旨在30天編寫30個前端小專案。 這些專案不需要使用其他lib,不需要編譯，不需要模板，迴歸最純真的JavaScript；

? ? ?

? 寫在前面： 我是從NodeJs轉向前端開發的，並且才半年時間左右，而且這半年更多的是進行React和Angular相關的開發，所以有很多前端基礎知識，比如HTML5和CSS3的新特性使用的並不好，通過這個系列的學習，可以更好的掌握基礎知識；
這是這個系列的第二篇

• 1.JavaScript30 - 1.Drum Kit
• 2.JS + CSS Clock

專案程式碼同步更新在男同交友網

專案簡介

使用原生的JS和CSS，完成如下的時鐘效果

新知識點複習（附連結）

CSS

• border-radius MDN-border-radius
• box-shadow MDN-https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow
• transform-origin MDN-transform-origin

• transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); transition-timing-function

  JS

• Date JavaScript Date時間物件詳解
  • getHours
  • getMinutes
  • getSeconds
• setInterval 你所不知道的setInterval

程式碼實踐

這個專案的核心在與算時針、分針和秒針的角度

這裡我發現了作者提供的程式碼中的一些不足,視訊中算分針和時針偏移的時候應該是出現了一些錯誤；

我修改後的版本：

• 秒針的度數就等於當前秒數

const now = new Date();
const seconds = now.getSeconds();

// +90表示0秒時，秒針指向的為90度
const secondsDegrees = ((seconds / 60) * 360) + 90;複製程式碼

• 分針的度數等於當前分鐘數加上秒數的偏移量

const mins = now.getMinutes();
const minsDegrees = ((mins / 60 + seconds / (60 * 60)) * 360) + 90;複製程式碼

• 時針的度數 等於當前小時數加上分鐘和秒鐘的偏移量

const hour = now.getHours();
const hourDegrees = ((hour / 12 + mins/720 + seconds /(12 * 60 * 60)) * 360) + 90;複製程式碼

完整程式碼:

const secondHand = document.querySelector('.second-hand');
const minsHand = document.querySelector('.min-hand');
const hourHand = document.querySelector('.hour-hand');

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

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

  const hour = now.getHours();
  const hourDegrees = ((hour / 12 + mins/720 + seconds /(12 * 60 * 60)) * 360) + 90;
  hourHand.style.transform = `rotate(${hourDegrees}deg)`;
}

setInterval(setDate, 1000);複製程式碼