JS实现炫酷翻页时钟特效

一.前言

鉴于某些网站的时间显示效果不佳，本文旨在开发一个视觉效果出色的前端时钟页面。该设计的核心在于其炫酷的视觉表现和良好的交互体验，旨在为用户带来愉悦的浏览感受。在时间变化的呈现上，拟采用翻页动画效果；在色彩搭配方面，选择黑色作为主色调，以营造神秘而高级的氛围。

一.前言

此外，程序需要实时获取本地系统时间数据，以确保时钟显示的准确性与实时性。

二.想法设计/实现过程

遵循美观性与用户交互性并重的原则，初步设计方案如下：采用黑色系背景以提升视觉质感。界面主体由三个黑色矩形框组成，分别对应小时、分钟和秒的显示区域。程序将获取本地计算机或服务器的时间数据，并驱动数字进行动态变化。针对数字的更替，特别设计了翻页动画效果，以增强视觉观赏性。初步构思示意如下：

一.前言

三.基本样式

首先定义外层容器（class为clock）及最大背景层的样式，包括尺寸、布局形式、透明度等属性。基础CSS代码示例如下：

.clock {
      display: grid;
      padding: 0 12px;
      grid-template-columns: 1fr 1fr 1fr;
      grid-column-gap: 12px;
      min-width: 200px;
      height: var(--clockheight);
      border-radius: var(--radius);
      background-image: linear-gradient(
        rgb(14, 14, 15) 0%,
        rgb(26, 25, 28) 20%,
        rgb(44, 44, 52) 50%,
        rgb(20, 20, 27) 100%
      );
      box-shadow: inset 0 -3px 6px 3px rgba(0, 0, 0, 0.2),
        inset 0 4px 8px 3px rgba(0, 0, 0, 0.4),
        0 2px 3px 1px rgba(255, 255, 255, 0.3), 0 -2px 4px 4px rgba(56, 56, 61, 0.5);
    }

外层盒子的具体结构定义：

 <div class="clock">
 </div>

当前实现的视觉效果如下：

一.前言

四.时间函数控制器

作为炫酷时钟特效的核心，首要任务是解决时间的计算与获取问题。虽然系统时间可以直接读取，但翻页动画与数字变化的同步控制需要额外的逻辑支持，因此需编写专门的控制器函数。

var date = new Date();
  var seconds = date.getSeconds().toString();
  if (seconds.length == 1) {
    seconds = "0" + seconds;
  }
  var minutes = date.getMinutes().toString();
  if (minutes.length == 1) {
    minutes = "0" + minutes;
  }
  var hour = date.getHours();
  if (hour > 12) {
    hour = hour - 12;
  }
  if (hour == 0) {
    hour = 12;
  }
  hour = hour.toString();
  if (hour.length == 1) {
    hour = "0" + hour;
  }
  if ($(myhour[0]).text() !== hour) {
    flipNumber($(myhour[0]).closest(".flipper"), hour);
  }
  if ($(myminute[0]).text() !== minutes) {
    flipNumber($(myminute[0]).closest(".flipper"), minutes);
  }
  if ($(mysecond[0]).text() !== seconds) {
    flipNumber($(mysecond[0]).closest(".flipper"), seconds);
  }

为了适配异步变化的特性，并避免所有数字同时更新导致的视觉突兀感，需引入延迟函数来控制各部分更新的时序，从而提升观赏性：

 setTimeout(function () {
    setTime();
  }, 500);

开发过程中引入了两个前端框架以加速开发进程，分别是jQuery和Bootstrap。

<script type="text/javascript" src="https://repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="https://repo.bfw.wiki/bfwrepo/js/bootstrap.4.3.1.min.js"></script>

五，时，分，秒占位

此前已完成背景及外层容器的样式定义，目前时、分、秒的具体显示区域尚未构建。因此，将这三个部分独立划分：

一.前言

实现此类样式的HTML结构如下：

<div class="flipper">
<div class="gear"></div>
<div class="gear"></div>
<div class="top">
    <div class="text">00</div>
</div>
<div class="bottom">
    <div class="text">00</div>
</div>
</div>

将上述结构重复三次，分别对应时、分、秒的显示位置，完成占位布局。

六.时间动态填充

布局样式确定后，需使用JavaScript动态填充并实时更新当前时间的数字显示：

function flipNumber(el, newnumber) {
  var thistop = el.find(".top").clone();
  var thisbottom = el.find(".bottom").clone();
  thistop.addClass("new");
  thisbottom.addClass("new");
  thisbottom.find(".text").text(newnumber);
  el.find(".top").after(thistop);
  el.find(".top.new").append(thisbottom);
  el.addClass("flipping");
  el.find(".top:not(.new)").find(".text").text(newnumber);
  setTimeout(function () {
    el.find(".bottom:not(.new)").find(".text").text(newnumber);
  }, 500);
}

最终实现的效果图如下：

一.前言

以上就是JS实现页面炫酷的时钟特效示例的详细内容，更多关于JS页面时钟的资料请关注本站其它相关文章！

一.前言

二.想法设计/实现过程

三.基本样式

四.时间函数控制器

五，时，分，秒占位

六.时间动态填充

实用工具推荐