js數字滑動時鐘

最後更新：2017-08-13 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：content this ini shift innerhtml each 數字 timeout callee

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>    <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數字滑動時鐘

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More