抖音超火的羅盤時鐘

抖音超火的羅盤時鐘

利用原生js，實現(xiàn)的羅盤時鐘效果

實現(xiàn)效果

實現(xiàn)思路

將數(shù)字?jǐn)[成圓環(huán)

獲取當(dāng)前時間，讓圓環(huán)旋轉(zhuǎn)一定的角度，轉(zhuǎn)到水平位置

將當(dāng)前時間變亮

實現(xiàn)的思路還是很簡單的，但是在過程中會有很多的細(xì)節(jié)需要考慮到

實現(xiàn)過程

解析幾個重要部分

搭建HTML框架

因為數(shù)字的量太大，采用js動態(tài)生成數(shù)字

js生成數(shù)字

這個函數(shù)是我用來生成日期，時間數(shù)字的,傳入了5個參數(shù)確實有點多了

第一個參數(shù)num:傳入循環(huán)的終點

第二個參數(shù)date:傳入要生成的標(biāo)簽加在哪里，也就是是誰下的標(biāo)簽

第三個參數(shù)target:傳入單位，時分秒這些

第四個參數(shù)bool:傳入是否，用來指定是否要補零

第五個參數(shù)origin:傳入它的起始點

由于使用 dom 操作會消耗性能，這里需要大量的添加 dom 節(jié)點，如果使用簡單的for循環(huán)生成節(jié)點，會多次的修改 dom 結(jié)構(gòu)

為了提高性能，可以建立一個文檔碎片documentfragment，作為臨時容器，最后一次再加到父節(jié)點中

function create(num,date,target,bool,origin) { var fragment = document.createDocumentFragment(); for(var i = origin; i < num ; i ++) { var j = i; if(bool){ j = j > 9 ? j : '0' + j; } var span = document.createElement('span'); span.appendChild(document.createTextNode(j + target)); fragment.appendChild(span); } date.appendChild(fragment); }

展示表盤，也就是生成圓形的效果

通過定位將全部span盒子定位在一起，通過transfromX將盒子一開，作為半徑，再通過給每個盒子旋轉(zhuǎn)一份角度，使得盒子均勻的散開

function rot(target,distance) { var rotBox = target.children; for(var i = 0 ;i < rotBox.length ; i ++ ){ rotBox[i].style.transform = 'rotate(' + (360 / rotBox.length ) * i + 'deg)' + 'translateX(' + distance + ')' ; } }

由于頁面加載需要一定時間，會導(dǎo)致js代碼未能立即執(zhí)行，頁面會有一段空白階段,所以添加一個立即執(zhí)行函數(shù)讓頁面一加載就有效果呈現(xiàn)

實現(xiàn)代碼

CSS

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。