基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)

首先我们来详细讲解如何使用jQuery和CSS3制作数字时钟，包括HTML、CSS、jQuery三个部分的代码。

HTML部分

首先，我们需要在HTML文件中添加一个用于显示数字时钟的<div>元素，如：

<div class="clock">
  <div class="digit">0</div>
  <div class="digit">0</div>
  <div class="colon">:</div>
  <div class="digit">0</div>
  <div class="digit">0</div>
  <div class="colon">:</div>
  <div class="digit">0</div>
  <div class="digit">0</div>
</div>

在这段代码中，我们定义了一个<div>元素，并设置了class属性为clock。同时，在<div>元素中添加了六个子元素，其中，每个数字用一个<div>元素表示，用class属性为digit标识；每个冒号用一个<div>元素表示，用class属性为colon标识。

CSS部分

接下来，我们需要使用CSS对这个数字时钟进行样式定义，包括数字的样式、冒号的样式、时钟的样式等等。

.clock {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Helvetica, sans-serif;
  font-size: 4em;
  color: #fff;
  background-color: #222;
  border-radius: 0.5em;
  padding: 0.2em;
}

.digit {
  width: 1em;
  height: 1.5em;
  background-color: #000;
  border-radius: 0.2em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.colon {
  width: 0.5em;
  height: 1.5em;
  font-size: 1.2em;
  line-height: 1.5em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.clock.running .digit {
  transition: all 0.3s ease-in;
}

.clock.running .colon {
  transition: all 0.3s ease-in;
}

.clock.running .digit.moving {
  transform: translateY(-1em);
  opacity: 0;
}

其中，我们使用了flex布局，将数字、冒号居中显示，并设置了一些样式，比如颜色、字体、圆角等等。我们还定义了一个运行状态下的样式类.running，用于在时钟运行时添加相应的CSS动画效果，包括数字向上移动、逐渐消失等等。

jQuery部分

为了使数字时钟能够动态显示时间，我们需要使用jQuery来实现。在jQuery中，我们使用setInterval函数来定时执行更新时间的操作。

$(document).ready(function() {
  startClock();
});

function startClock() {
  updateClock(); // 首先更新一次时间
  setInterval(updateClock, 1000); // 每隔一秒更新一次时间
}

function updateClock() {
  var now = new Date();
  var hours = now.getHours();
  var minutes = now.getMinutes();
  var seconds = now.getSeconds();

  setTime('.digit:nth-child(1)', Math.floor(hours / 10));
  setTime('.digit:nth-child(2)', hours % 10);
  setTime('.digit:nth-child(4)', Math.floor(minutes / 10));
  setTime('.digit:nth-child(5)', minutes % 10);
  setTime('.digit:nth-child(7)', Math.floor(seconds / 10));
  setTime('.digit:nth-child(8)', seconds % 10);
}

function setTime(selector, value) {
  var digit = $(selector);
  var current = digit.text();
  if (value != current) {
    digit.addClass('moving');
    setTimeout(function() {
      digit.text(value).removeClass('moving');
    }, 300);
  }
}

在这段代码中，我们首先在JQuery中注册了DOM加载完成时的回调函数，调用startClock()函数来初始化时钟。在startClock()函数中，我们使用setInterval函数来定时执行updateClock()函数，以更新数字时钟的数值。

在updateClock()函数中，我们使用Date对象获取当前时间，并根据当前时间设置每个数字时钟所显示的数值，然后调用setTime()函数来对每个数字时钟进行更新。

在setTime()函数中，我们首先获取要更新的数字时钟，然后判断该数字时钟的当前值是否与要更新的值相同，如果不同，就添加moving类，表示该数字正在向上移动和逐渐消失的动画效果，然后使用setTimeout函数来在一段时间后更新该数字时钟的数值，并移除moving类，恢复该数字时钟的正常显示。

示例1：数字时钟实时更新

我们可以在updateClock()函数中添加如下一行代码，使得数字时钟可以实时更新时间。

$('.clock').addClass('running');

然后，在CSS中定义好运行状态下的样式类，即可使得数字时钟在运行时，数字逐渐向上移动并逐渐消失，更新为新的时间值。

示例2：数字时钟暂停和恢复

我们可以在数字时钟的外层包裹一个<button>元素，来提供暂停和恢复数字时钟的功能。

HTML示例代码：

<div class="clock-wrapper">
  <div class="clock">
    ...
  </div>
  <button class="pause-btn">Pause</button>
</div>

然后，在jQuery中，我们注册click事件，当用户点击button元素时，如果当前数字时钟处于运行状态，就停止定时器，否则恢复定时器。

jQuery示例代码：

var running = true;

$('.pause-btn').click(function() {
  if (running) {
    clearInterval(timer);
    running = false;
    $(this).text('Resume');
  } else {
    timer = setInterval(updateClock, 1000);
    running = true;
    $(this).text('Pause');
  }
});

在click事件处理函数中，我们使用一个状态变量来保存数字时钟的运行状态，并根据状态变量的值来决定暂停定时器还是恢复定时器，同时修改按钮的文本内容。

最后，我们将以上三部分代码整合在一起，在HTML文件中引入jQuery和CSS文件，就可以实现数字时钟的显示和动态更新，暂停和恢复等功能。

示例代码和效果展示可以参考我的GitHub仓库。