JS實現頁面炫酷的時鐘特效示例

更新時間：2022年08月12日 09:23:48 作者：上進小菜豬

這篇文章主要為大家介紹了JS實現頁面炫酷的時鐘特效示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

一.前言

今天看到某網站的時間特別的丑陋，所以就誕生了寫一個看時間的炫酷的時鐘前端頁面。特點就是炫酷，特效好，個人以心情愉快的感覺。對于時間的變化，我打算使用翻頁的特效來完成，色系的話采用黑色以主題，給人一種神秘的感覺。

而且要獲取到本地的時間的數據來實時更新它的變化。

二.想法設計/實現過程

秉持著盡可能的美觀炫酷，與用戶的交互性好的原則，我初步的想法是，采用黑色系來增加可觀性，寫三個黑色框框分別代表小時，分鐘，秒，然后獲取到本地計算機或者服務器的時間數據，進行動態(tài)變化，而且對于數字的變化，采用翻頁形式的改變對應的數字，從而增加可觀性。這就是穩(wěn)定初步想法：

三.基本樣式

首先需要定義一下最外面的框子（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。這樣可以加快我們開發(fā)的速度。

<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>

這樣重復3次，分別對應著時，分，秒，給他們占位。

六.時間動態(tài)填充

現在，我們的位置已經寫好樣式了，我們需要使用JavaScript來動態(tài)的填充更換我們的當時的時間數字：

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);
}

最后的效果圖如下：