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);複製代碼