滾動時鐘案例

廢話不多說，先上視訊

原生js造就滾動時鐘案例

思路分析：

布局：一個大的盒子取名wrap，給定寬高。然後在大盒子裡有3個小盒子，分别取名為.hh,.mm,.ss這三個盒子裡有兩個p标簽，p标簽裡有兩個span标簽分别用來顯示時分秒

js邏輯：通過動态分别擷取p标簽還有span标簽，不過這裡我把span标簽起連個類名.first代表第一塊的時間，.last代表第二塊的時間

let oP = [...document.querySelectorAll("#wrap div p")];
            let	oFirst = [...document.querySelectorAll("#wrap div p span.first")];
            let	oLast = [...document.querySelectorAll("#wrap div p span.last")];
            let lastTimeArr = [];
           

然後定義一個方法用來初始化本地時間

function getTime(){
                let nowDate = new Date();
                let HH = nowDate.getHours(),
                    MM = nowDate.getMinutes(),
                    SS = nowDate.getSeconds();
                HH = HH<10?"0"+HH:HH+"";
                MM = MM<10?"0"+MM:MM+"";
                SS = SS<10?"0"+SS:SS+"";
                return [...HH,...MM,...SS];
            }
           

在定義一個方法把時間顯示到對應的标簽裡就可以了

function showTime(){
                let d = getTime();
                lastTimeArr = d;
                oFirst.forEach((ele,index)=>{
                    ele.innerHTML = d[index];
                })
                return function(){
                    let d = getTime();
                    d.forEach((val,index)=>{
                        //判斷兩次的時間的值是不是一樣，不一樣的放在類名為last的span裡
                        if(val === lastTimeArr[index])return;
                        oLast[index].innerHTML = d[index];
                        oP[index].classList.add("tra");
                        oP[index].classList.add("top");
                        //還原
                        setTimeout(()=>{
                            oFirst[index].innerHTML = d[index];
                            oP[index].classList.remove("tra");
                            oP[index].classList.remove("top");
                        },500);
                    });

                    lastTimeArr = d;
                }
            }
            setInterval(showTime(),1000);
           

那怎麼實作滾動效果呢，這裡啊我把之前的包裹span的p标簽給相對自己定位，讓後在把p标簽的父級給超出隐藏就可以了。

這裡有個難點就是第一塊顯示的時間不能和第二塊顯示的一樣，要新顯示的在下面，舊顯示的在上面。這裡判斷兩次的時間的值是不是一樣，不一樣的放在類名為last的span裡就可以了