使用 JavaScript 设计一个 Neumorphism 风格的数字时钟

介绍

本篇教程将介绍如何使用 JavaScript、HTML、CSS 实现一个 Neumorphism 风格的数字时钟。Neumorphism 风格是一种基于实体感设计的风格，近年来越来越流行。数字时钟是一个基础的小项目，本文将通过实现数字时钟来学习如何使用 JavaScript 操作 DOM 元素、更新页面展示等技术。

效果预览

先来看一下最终实现的数字时钟效果：

页面中有一个 3D 效果的数字时钟，时间会随着系统时间实时更新。数字时钟的设计采用 Neumorphism 风格，整体效果柔和、简洁、美观。

技术解析

HTML 结构

数字时钟标记包括数字和冒号两个 Symbol，HTML 结构如下：

<div class="clock">
  <div class="symbol">8</div>
  <div class="symbol">:</div>
  <div class="symbol">2</div>
  <div class="symbol">8</div>
  <div class="symbol">:</div>
  <div class="symbol">1</div>
  <div class="am-pm">AM</div>
</div>

其中，时钟数码部分有 6 个数字，采用 class 为 symbol 的 div 元素实现。同时，上下午采用 class 为 am-pm 的 div 元素实现。

CSS 样式

数字时钟的样式有许多，如背景颜色、边界、阴影等，具体代码如下：

.clock {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 300px;
  height: 150px;
  padding: 30px;
  background: #f5f5f5;
  border-radius: 25px;
  box-shadow:
    20px 20px 50px #d9d9d9,
    -20px -20px 50px #ffffff;
  transform: translate(-50%, -50%) scale(0.9);
}

.symbol {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 60px;
  font-weight: bold;
  width: 60px;
  height: 80px;
  margin: 0 10px;
  background: #e6e6e6;
  border-radius: 15px;
  box-shadow:
    inset 10px 10px 20px #cbcbcb,
    inset -10px -10px 20px #ffffff;
}

.am-pm {
  font-size: 40px;
  font-weight: bold;
  margin-left: auto;
}

样式文件中设置了数字时钟样式的细节，如主容器样式、数字样式、上下午信息样式等。

其中，box-shadow 属性和 border-radius 属性是实现 Neumorphism 风格的关键。box-shadow 用于设置深浅不一的阴影效果，而 border-radius 则用于设置按钮的圆角。设置圆角和按钮阴影效果，能够让 UI 界面看起来更灵活、自然。

JavaScript 代码

在 JavaScript 代码中，主要实现时钟数字的更新和显示。通过 JavaScript，能够实现如下功能：

• 系统时间一定时间间隔（如每 1s）执行一次更新数字显示；
• 时间格式处理，将时、分、秒以及 AM/PM 显示在页面对应元素上；
• 根据当前时间时、分、秒生成对应的数字部分内容，更新在页面上。

代码：

function updateTime() {
  let time = new Date();
  let hours = time.getHours();
  let minutes = time.getMinutes();
  let seconds = time.getSeconds();

  // 获取数字部分DOM元素
  let symbol = document.getElementsByClassName('symbol');

  // 格式化小时数和上下午标记
  let amPm = 'AM';
  if (hours > 12) {
    hours -= 12;
    amPm = 'PM';
  }
  if (hours === 0) {
    hours = 12;
  }
  document.querySelector('.am-pm').innerHTML = amPm;

  // 更新数字内容
  let hourArr = hours.toString().padStart(2, '0').split('');
  let minArr = minutes.toString().padStart(2, '0').split('');
  let secArr = seconds.toString().padStart(2, '0').split('');
  let arr = hourArr.concat(minArr, secArr);

  for (let i = 0; i < symbol.length; i++) {
    symbol[i].innerHTML = arr[i];
  }
}

setInterval(updateTime, 1000); // 1s更新一次时间
updateTime(); // 立即执行第一次

总结

这篇教程介绍了如何使用 JavaScript、HTML、CSS 实现了一个 Neumorphism 风格的数字时钟。具体包括了实现思路、HTML 结构、CSS 样式和 JavaScript 功能代码等方面。通过本文能够学习到如何：

• 使用 JavaScript 操作 DOM 元素，更新元素的显示内容；
• 使用 CSS 实现 Neumorphism 风格的样式特效；
• 使用 setInterval() 函数实现定时任务。

同时，数字时钟是一个简单的项目实践，能够帮助读者了解 JavaScript 与 UI 视图之间的交互关系。这有助于读者深度学习 JavaScript 及其应用。