JS如何實(shí)現(xiàn)頁面炫酷的時(shí)鐘特效

這篇文章主要介紹“JS如何實(shí)現(xiàn)頁面炫酷的時(shí)鐘特效”，在日常操作中，相信很多人在JS如何實(shí)現(xiàn)頁面炫酷的時(shí)鐘特效問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”JS如何實(shí)現(xiàn)頁面炫酷的時(shí)鐘特效”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

一.前言

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

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

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

秉持著盡可能的美觀炫酷，與用戶的交互性好的原則，我初步的想法是，采用黑色系來增加可觀性，寫三個黑色框框分別代表小時(shí)，分鐘，秒，然后獲取到本地計(jì)算機(jī)或者服務(wù)器的時(shí)間數(shù)據(jù)，進(jìn)行動態(tài)變化，而且對于數(shù)字的變化，采用翻頁形式的改變對應(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í)鐘特效，外面首先要考慮的是對于時(shí)間的計(jì)算以及獲取的問題：思考一個問題，我們的目前時(shí)間可以很容易的從系統(tǒng)時(shí)間獲取，但是，翻頁與變化是需要我們額外的去控制的。所以需要我們額外的去寫的。

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)變化，異步變化的特性，我們需要額外寫一個延遲函數(shù)，來控制，不讓他們同時(shí)出現(xiàn)，增加可觀性：

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

當(dāng)然，不要忘記第一步的引入工作，我們目前使用倆個前端框架，分別是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>

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

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

一個類似這樣的樣式效果，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次，分別對應(yīng)著時(shí)，分，秒，給他們占位。

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

現(xiàn)在，我們的位置已經(jīng)寫好樣式了，我們需要使用JavaScript來動態(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);
}

最后的效果圖如下：

到此，關(guān)于“JS如何實(shí)現(xiàn)頁面炫酷的時(shí)鐘特效”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！