js数字滑动时钟的简单实现(示例讲解)

2019-11-19 15:49:17

字体：大中小

来源：转载

供稿：网友

废话不多说，直接上代码

<!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>  <div class="content">  </div>  <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 = "<div class='box' id='box"+num+"'><ul>"        this.num = num;        num++;        for(var i =0,l=timeNum[this.num];i<l;i++){          innerHTML += "<li style='color:"+colors[i]+"'>"+i+"</li>";        }        innerHTML += "</ul><div>"        content.innerHTML += innerHTML;        if(num==2||num==4){content.innerHTML += "<div class='colon'>:</div>"}      },      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>

以上这篇js数字滑动时钟的简单实现(示例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持武林网。

上一篇：js异步编程小技巧详解

下一篇：使用yeoman构建angular应用的方法