js实现一个简单的数字时钟效果

下面是JS实现一个简单的数字时钟效果的攻略：

1. HTML结构
   首先需要在HTML中创建一个div，用来展现时钟。

<div id="clock"></div>

1. CSS样式
   然后还需要写一些CSS样式，让时钟展示的更加美观。

#clock {
  font-size: 48px;  /*设置字号*/
  font-family: monospace;  /*设置字体*/
  color: #fff;   /*设置颜色*/
  text-align: center;   /*设置水平居中*/
}

1. JS代码
   最后是最关键的JS代码部分。我们需要使用Date对象来获得当前的时间，然后通过一些运算来得到时钟的时、分、秒等信息，再把这些信息放入HTML中，就可以制作一个简单的数字时钟了。

function showClock() {
  // 获取当前时间
  const now = new Date();

  // 获取时、分、秒
  const h = now.getHours();
  const m = now.getMinutes();
  const s = now.getSeconds();

  // 放入HTML中
  const clock = document.getElementById('clock');
  clock.innerHTML = `${h}:${m}:${s}`;

  // 每秒更新一次
  setTimeout(showClock, 1000);
}

showClock();  //启动时钟

1. 示例
   下面是两个示例，第一个是一个基础版的数字时钟，第二个是稍微复杂一些的数字时钟，可以根据自己的需求进行选择。

基础版：

<div id="clock"></div>

function showClock() {
  // 获取当前时间
  const now = new Date();

  // 获取时、分、秒
  const h = now.getHours();
  const m = now.getMinutes();
  const s = now.getSeconds();

  // 放入HTML中
  const clock = document.getElementById('clock');
  clock.innerHTML = `${h}:${m}:${s}`;

  // 每秒更新一次
  setTimeout(showClock, 1000);
}

showClock();  //启动时钟

稍复杂版：

<div id="clock">
  <span id="hour"></span>
  <span id="minute"></span>
  <span id="second"></span>
</div>

#clock {
  font-size: 48px;  /*设置字号*/
  font-family: monospace;  /*设置字体*/
  color: #fff;   /*设置颜色*/
  display: flex;  /*设置容器为弹性布局*/
  justify-content: center;  /*沿主轴居中对齐*/
  align-items: center;  /*沿交叉轴居中对齐*/
}

#clock span {
  width: 80px;  /*设置宽度*/
  height: 80px;  /*设置高度*/
  background-color: #333;  /*设置背景颜色*/
  border-radius: 10px;  /*设置圆角*/
  display: flex;  /*设置容器为弹性布局*/
  justify-content: center;  /*沿主轴居中对齐*/
  align-items: center;  /*沿交叉轴居中对齐*/
  margin: 0 10px;  /*设置间距*/
}

function showClock() {
  // 获取当前时间
  const now = new Date();

  // 获取时、分、秒
  const h = now.getHours();
  const m = now.getMinutes();
  const s = now.getSeconds();

  // 放入HTML中
  document.getElementById('hour').innerText = h;
  document.getElementById('minute').innerText = m;
  document.getElementById('second').innerText = s;

  // 每秒更新一次
  setTimeout(showClock, 1000);
}

showClock();  //启动时钟

以上代码实现了一个简单的数字时钟效果，可以通过一些CSS样式的修改来改变时钟的样式，以满足不同的需求。