小白學VUE 實現抖音時鐘(CDN方式)

2021-10-07 08:08:42 字數 1689 閱讀 1014

話不多說,開始吧!

檔案目錄如下:

以乙個springboot程式搭的框架

這裡將月、周、日、午時、小時、分鐘、秒鐘合同成了乙個統一的時間模板timecomp,並將開關也封裝成乙個模板使用

再來看看js中如何實現

js/timer.js

/**

* 年份元件

*/var _yearcomp =

},watch : }}

};/**

* 時間元件

*/var _timecomp =

},//vue的***是個坑,注意immediate:true,不加的話資料不會立刻生效,相當於***無效

//下面對資料監聽的這種寫法(handler寫法)等同於v(val){}這種寫法

watch :

},d :

},r : }}

};/**

* 切換元件

*/var _switchcomp =

}};/**

* vue初始化時,一定要將模板**放在前面,否則無法識別模板

*/new vue(,

data : function()

},methods: else

//組裝資料,更新語言庫,讓資料動起來

this.makedate();

}, 1000);

},makedate()else

//組裝月

for(let i=1 ; i<= 12 ; i++)else

}//組裝周

for(let i=1 ; i<= 7 ; i++)

//組裝日

for(let i=1 ; i<= this.days ; i++)else if(i < 20)elseelse}}

//組裝午時

this.apmbox.push("上午");

this.apmbox.push("下午");

//組裝小時

for(let i=1 ; i<= 12 ; i++)else

}//組裝分鐘

for(let i=0 ; i< 60 ; i++)else if(i < 20)elseelse}}

//組裝秒

for(let i=0 ; i< 60 ; i++)else if(i < 20)elseelse}}

},//簡體、繁體字體切換開關

switchfont()

},created()

});

css樣式不能使用scss方式寫了,所以規規矩矩來吧

css/timer.css

#timer ul 

#timer ul li

.hover

語言庫沒什麼變化,還是原來的配方,但是得用js方式寫了

store/timer.js

var store =
執行效果:

抖音圓形時鐘

let yuebox document.getelementbyid yuebox let riqibox document.getelementbyid riqibox let hourbox document.getelementbyid hourbox let minutebox docume...

JS抖音羅盤時鐘

html css html,body clock labeljs var monthtext 一月 二月 三月 四月 五月 六月 七月 八月 九月 十月 十一月 十二月 var daytext 零一號 零二號 零三號 零四號 零五號 零六號 零七号 零八號 零九號 十號 十一號 十二號 十三號 十四...

抖音同款羅盤時鐘

時光在不經意中流逝,翻開舊日的筆記,字裡行間充滿著情深意境的交錯。彷彿回到了那曾經經歷過的風風雨雨,坎坎坷坷中去,舊時的回憶依舊,只是少了幾分憂鬱,幾分繁華,多了幾分滄桑。utf 8 x ua compatible content ie edge 動態時鐘 title viewport conten...