JavaScript30 - 2.JS + CSS Clock-CSDN博客

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