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);复制代码