js數位滑動時鐘步奏詳解-js教程-PHP中文網

首頁

web前端

js教程

js數位滑動時鐘步奏詳解

php中世界最好的语言

Apr 19, 2018 am 10:28 AM

javascript 時鐘詳解

這次帶給大家js數位滑動時脈步奏詳解，實作js數位滑動時鐘的注意事項有哪些，以下就是實戰案例，一起來看一下。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    body,ul{margin:0;padding: 0;}
    .content{margin:100px auto;width: 1000px;}
    .box{position: relative;float: left;width: 50px;height: 120px;overflow: hidden;}
    .box li{position: absolute;left: 0;width:100%;height: 120px;list-style:none;font-size:80px;font-weight: bold;background-color: #fff; line-height: 120px; text-align: center;}
    .colon{float: left;height: 120px;font-size: 80px;color: #e91e63;font-weight: bold;line-height: 100px;}
  </style>
</head>
<body>
  <p class="content">
  </p>
  <script type="text/javascript">
  (function(){
    var colors = ["#69D2E7", "#E20049", "#19215E", "#F38630", "#FA6900", "#FF4E50", "#F9D423", "#FFB6FF", "#474168", "#6ACAFC"];
    var content = document.querySelector('.content');
    var num = 0;
    var height = 120;
    var maxheight = (2-num)*height;
    var timeNum = [3,10,6,10,6,10];
    var position = [];
    var NumberBoxs = [];
    for(var i =0;i<10;i++){
      position.push((1-i)*height);
    };
    function NumberBox() {}
    NumberBox.prototype = {
      init : function () {
        var innerHTML = "<p class=&#39;box&#39; id=&#39;box"+num+"&#39;><ul>"
        this.num = num;
        num++;
        for(var i =0,l=timeNum[this.num];i<l;i++){
          innerHTML += "<li style=&#39;color:"+colors[i]+"&#39;>"+i+"</li>";
        }
        innerHTML += "</ul><p>"
        content.innerHTML += innerHTML;
        if(num==2||num==4){content.innerHTML += "<p class=&#39;colon&#39;>:</p>"}
      },
      dominit : function(){
        this.Ali = [].slice.call(document.getElementById('box'+this.num).getElementsByTagName('li'),0);    
        this.Ali.forEach(function(dom,i){
          dom.style.top = position[i] + "px";
          dom.style.transition = "top .8s";
        })  
        this.hasdom = true;  
      },
      toNum : function (n) {
        if(!this.hasdom){this.dominit();}
        n = ""+n;
        var p = this;
        var l = p.Ali.length-1;
        while(p.Ali[1].innerHTML!=n){
        p.Ali.unshift(p.Ali.pop());
        }
        p.Ali.forEach(function (dom,i) {
        dom.style.zIndex = (i==l)?"-1":"1";
        dom.style.top = position[i] + "px";
        })     
      }
    }
    for(var i=0;i<6;i++){
      var o = new NumberBox();
      o.init();
      NumberBoxs.push(o);
    }
    function getTime() {
      var time = new Date();
      return (""+Fixed2(time.getHours())+Fixed2(time.getMinutes())+Fixed2(time.getSeconds())).split("");
    }
    function Fixed2(n){
      return Number(n)<10?"0"+n:n;
    }
    (function () {
      var time = getTime();
      NumberBoxs.forEach(function(obj,i){
        obj.toNum(time[i]);
      });
      setTimeout(arguments.callee,1000);
    })()
  })();
  </script>
</body>
</html>

登入後複製

我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

建議讀取：

Vue作用域插槽使用詳解

JS實作資料驗證與核取方塊表單提交

Vue0.1程式碼怎麼加入Vue2.0使用

以上是js數位滑動時鐘步奏詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7557

CakePHP 教程

1384

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

iPhone中缺少時鐘應用程式：如何修復 May 03, 2024 pm 09:19 PM

您的手機中缺少時鐘應用程式嗎？日期和時間仍將顯示在iPhone的狀態列上。但是，如果沒有時鐘應用程序，您將無法使用世界時鐘、碼錶、鬧鐘等多項功能。因此，修復時鐘應用程式的缺失應該是您的待辦事項清單的首位。這些解決方案可以幫助您解決此問題。修復1–放置時鐘應用程式如果您錯誤地從主畫面中刪除了時鐘應用程序，您可以將時鐘應用程式放回原位。步驟1–解鎖iPhone並開始向左側滑動，直到到達「應用程式庫」頁面。步驟2–接下來，在搜尋框中搜尋「時鐘」。步驟3–當您在搜尋結果中看到下方的「時鐘」時，請按住它並

Win11管理員權限取得詳解 Mar 08, 2024 pm 03:06 PM

Windows作業系統是全球最受歡迎的作業系統之一，其新版本Win11備受矚目。在Win11系統中，管理員權限的取得是一個重要的操作，管理員權限可以讓使用者對系統進行更多的操作和設定。本文將詳細介紹在Win11系統中如何取得管理員權限，以及如何有效地管理權限。在Win11系統中，管理員權限分為本機管理員和網域管理員兩種。本機管理員是指具有對本機電腦的完全管理權限

Oracle SQL中的除法運算詳解 Mar 10, 2024 am 09:51 AM

OracleSQL中的除法運算詳解在OracleSQL中，除法運算是一種常見且重要的數學運算運算，用來計算兩個數相除的結果。除法在資料庫查詢中經常用到，因此了解OracleSQL中的除法運算及其用法是資料庫開發人員必備的技能之一。本文將詳細討論OracleSQL中除法運算的相關知識，並提供具體的程式碼範例供讀者參考。一、OracleSQL中的除法運算

PHP模運算子的作用及用法詳解 Mar 19, 2024 pm 04:33 PM

PHP中的模運算子（%）是用來取得兩個數值相除的餘數的。在本文中，我們將詳細討論模運算子的作用及用法，並提供具體的程式碼範例來幫助讀者更好地理解。 1.模運算子的作用在數學中，當我們將一個整數除以另一個整數時，就會得到一個商和一個餘數。例如，當我們將10除以3時，商數為3，餘數為1。模運算子就是用來取得這個餘數的。 2.模運算子的用法在PHP中，使用%符號來表示模

linux系統呼叫system()函數詳解 Feb 22, 2024 pm 08:21 PM

Linux系統呼叫system()函數詳解系統呼叫是Linux作業系統中非常重要的一部分，它提供了一種與系統核心互動的方式。其中，system()函數是常用的系統呼叫函數之一。本文將詳細介紹system()函數的使用方法，並提供對應的程式碼範例。系統呼叫的基本概念系統呼叫是使用者程式與作業系統核心互動的一種方式。使用者程式透過呼叫系統呼叫函數來請求作業系統

簡易JavaScript教學：取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教學：如何取得HTTP狀態碼，需要具體程式碼範例前言：在Web開發中，經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時，我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功，並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼，並提供一些實用的程式碼範例。使用XMLHttpRequest

Linux的curl指令詳解 Feb 21, 2024 pm 10:33 PM

Linux的curl命令詳解摘要：curl是一種強大的命令列工具，用於與伺服器進行資料通訊。本文將介紹curl指令的基本用法，並提供實際的程式碼範例，幫助讀者更好地理解和應用該指令。一、curl是什麼？ curl是命令列工具，用於發送和接收各種網路請求。它支援多種協議，如HTTP、FTP、TELNET等，並提供了豐富的功能，如檔案上傳、檔案下載、資料傳輸、代

深入了解Promise.resolve() Feb 18, 2024 pm 07:13 PM

Promise.resolve()詳解，需要具體程式碼範例Promise是JavaScript中一種用來處理非同步操作的機制。在實際開發中，常常需要處理一些需要依序執行的非同步任務，而Promise.resolve()方法就是用來傳回一個已經Fulfilled狀態的Promise物件。 Promise.resolve()是Promise類別的靜態方法，它接受一個

See all articles

js數位滑動時鐘步奏詳解

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題