快捷導(dǎo)航

JS實(shí)現(xiàn)頁(yè)面炫酷的時(shí)鐘特效示例

更新時(shí)間：2022年08月12日 09:23:48 作者：上進(jìn)小菜豬

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

一.前言

今天看到某網(wǎng)站的時(shí)間特別的丑陋，所以就誕生了寫一個(gè)看時(shí)間的炫酷的時(shí)鐘前端頁(yè)面。特點(diǎn)就是炫酷，特效好，個(gè)人以心情愉快的感覺(jué)。對(duì)于時(shí)間的變化，我打算使用翻頁(yè)的特效來(lái)完成，色系的話采用黑色以主題，給人一種神秘的感覺(jué)。

而且要獲取到本地的時(shí)間的數(shù)據(jù)來(lái)實(shí)時(shí)更新它的變化。

二.想法設(shè)計(jì)/實(shí)現(xiàn)過(guò)程

秉持著盡可能的美觀炫酷，與用戶的交互性好的原則，我初步的想法是，采用黑色系來(lái)增加可觀性，寫三個(gè)黑色框框分別代表小時(shí)，分鐘，秒，然后獲取到本地計(jì)算機(jī)或者服務(wù)器的時(shí)間數(shù)據(jù)，進(jìn)行動(dòng)態(tài)變化，而且對(duì)于數(shù)字的變化，采用翻頁(yè)形式的改變對(duì)應(yīng)的數(shù)字，從而增加可觀性。這就是穩(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>

目前效果如下：

四.時(shí)間函數(shù)控制器

因?yàn)槭庆趴岬臅r(shí)鐘特效，外面首先要考慮的是對(duì)于時(shí)間的計(jì)算以及獲取的問(wèn)題：思考一個(gè)問(wèn)題，我們的目前時(shí)間可以很容易的從系統(tǒng)時(shí)間獲取，但是，翻頁(yè)與變化是需要我們額外的去控制的。所以需要我們額外的去寫的。

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

為了適應(yīng)變化，異步變化的特性，我們需要額外寫一個(gè)延遲函數(shù)，來(lái)控制，不讓他們同時(shí)出現(xiàn)，增加可觀性：

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

當(dāng)然，不要忘記第一步的引入工作，我們目前使用倆個(gè)前端框架，分別是jquery和bootstrap。這樣可以加快我們開(kāi)發(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>

五，時(shí)，分，秒占位

我們之前已經(jīng)寫了背景的樣式與最外面的框子的樣式，現(xiàn)在我們的時(shí)，分，秒都還沒(méi)有寫，所以，我們把他分為三部分：

一個(gè)類似這樣的樣式效果，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>

這樣重復(fù)3次，分別對(duì)應(yīng)著時(shí)，分，秒，給他們占位。

六.時(shí)間動(dòng)態(tài)填充

現(xiàn)在，我們的位置已經(jīng)寫好樣式了，我們需要使用JavaScript來(lái)動(dòng)態(tài)的填充更換我們的當(dāng)時(shí)的時(shí)間數(shù)字：

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

最后的效果圖如下：