即学即会---简单易学模拟时钟 （html +css +js）

简单易学模拟时钟（基于html，css，js）

有黑夜和白天两种效果，可自行切换。

当然你也可以点击这里看看效果demo效果😄

当然你也可以参考源码学习😊

整篇文章分三节

1、页面布局🍏

布局是比较简单的，从上面展示的效果图来看，我们一个个写

1、一个切换主题的按钮
2、时钟区域
3、时间日期展示区域

 <button class="toggle">黑天模式</button> //主题切换
    <div class="clock-container">//整体时钟容器
      <div class="clock">//时钟页面
        <div class="needle hour"></div>
        <div class="needle minute"></div>
        <div class="needle second"></div>
        <div class="center-point"></div>
      </div>
	  //先把日期和时间写固定，之后在写js部分可去除
      <div class="time">14:32</div>
      <div class="date">星期二 七月<span class="circle">14</span></div>
    </div>

2、页面样式：实现指针，和时间日期样式🍎

我们根据上面写的html来写样式
1、一个切换主题的按钮

.toggle {
  background-color: var(--primary-color);
  border: 0;
  border-radius: 4px;
  color: var(--secondary-color);
  padding: 8px 12px;
  position: absolute;
  top: 100px;
}

.toggle:focus {
  outline: none;
}

2、时钟区域

.clock-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.clock {
  position: relative;
  width: 500px;
  height: 500px;
  color: white;
  background: url('img/clock.jpg') no-repeat center center;
}

3、指针区域

.needle.hour {
  transform: translate(-50%, -100%) rotate(0deg);
}

.needle.minute {
  transform: translate(-50%, -100%) rotate(90deg);
  height: 100px;
}

.needle.second {
  transform: translate(-50%, -100%) rotate(180deg);
  height: 100px;
  background-color: #e74c3c;
}

4、指针中心

.center-point {
  background-color: #e74c3c;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

5、时间日期展示区域

.time {
  font-size: 60px;
  color: var(--primary-color);
}

.date {
  color: #aaa;
  font-size: 14px;
}

.date .circle {
  background-color: var(--primary-color);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  width: 18px;
  height: 18px;
}

3、实现指针旋转效果🍇

当写好html和css样式后，我们可以得到文章开头的静态的样子，但是如何根据获取的时间来实现指针的旋转才是难点，让我们一起来完成吧

1、 获取DOM节点

const hourEl = document.querySelector('.hour');
const minuteEl = document.querySelector('.minute');
const secondEl = document.querySelector('.second');
const timeEl = document.querySelector('.time');
const dateEl = document.querySelector('.date');
const toggle = document.querySelector('.toggle');

2、初始化变量

const days = [
  '星期天',
  '星期一',
  '星期二',
  '星期三',
  '星期四',
  '星期五',
  '星期六',
];
const months = [
  '一月',
  '二月',
  '三月',
  '四月',
  '五月',
  '六月',
  '七月',
  '八月',
  '九月',
  '十月',
  '十一月',
  '十二月',
];

3、 白天和黑夜模式切换

toggle.addEventListener('click', (e) => {
  const html = document.querySelector('html');
  if (html.classList.contains('dark')) {
    html.classList.remove('dark');
    e.target.innerHTML = '黑夜模式';
  } else {
    html.classList.add('dark');
    e.target.innerHTML = '白天模式';
  }
});

4、设置时钟

function setTime() {
  // 获取所有时间信息（月，星期，时，分，秒）
  const time = new Date();
  const month = time.getMonth();
  const day = time.getDay();
  const date = time.getDate();
  const hours = time.getHours();
  const hoursForClock = hours % 12;
  const minutes = time.getMinutes();
  const seconds = time.getSeconds();
  //   console.log(time, month, day, date, hours, hoursForClock, minutes, seconds);

  // 设置时钟（旋转角度）
  hourEl.style.transform = `translate(-50%, -100%) rotate(${scale(
    hoursForClock,
    0,
    11,
    0,
    360
  )}deg)`;
  minuteEl.style.transform = `translate(-50%, -100%) rotate(${scale(
    minutes,
    0,
    59,
    0,
    360
  )}deg)`;
  secondEl.style.transform = `translate(-50%, -100%) rotate(${scale(
    seconds,
    0,
    59,
    0,
    360
  )}deg)`;
  timeEl.innerHTML = `${hours < 10 ? `0${hours}` : hours}:${
    minutes < 10 ? `0${minutes}` : minutes
  }`;

  dateEl.innerHTML = `${days[day]}, ${months[month]} <span class="circle">${date}</span>`;
}

const scale = (num, in_min, in_max, out_min, out_max) => {
  return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min;
};
setTime();
setInterval(setTime, 1000);

在这里有这个scale()函数控制指针旋转的角度
大家可以查阅这里

好啦，今天的小demo就到这里啦，一起进步一起加油🍒