三步教你編寫一個Neumorphism風(fēng)格的小時鐘
序
又到了自己編寫組件的時節(jié)了
作為一名前端開發(fā)者，平時也是闊以沒事可以寫寫自定義的組件，增加一下自己的閱歷，實際開發(fā)中用到也可以
通過CV大法去快速開發(fā)
先提前來看一下最終的效果：
先問一個小問題，現(xiàn)在大家現(xiàn)在更習(xí)慣于看哪種樣式的時間，是鐘表類型還是數(shù)字類型？（
雖然你們的回答影響不了我做一個鐘表啦
）
鐘表時間：
數(shù)字時間：
Neumorphism
目前網(wǎng)上的一些時鐘風(fēng)格不太喜歡，之前偶然看到一款新擬物風(fēng)格Neumorphism的設(shè)計，讓我眼前不禁一亮
所以本次時鐘組件的風(fēng)格就決定是你啦—
新擬物
Neumorphism風(fēng)格頁面
正文開始
上面又水了一堆話，增加了一下文字的數(shù)量，真是太開森了
下面正式開始組件的制作流程
一、時鐘表盤編寫
因為本人使用的是vue，所以編寫的也是.vue組件
先搭建一個clock.vue的組件，設(shè)定好props可能會接收的寬高，還有陰影顏色。
陰影部分使用box-shadow進行設(shè)置
其中像Compute中的styleVar內(nèi)容類似于CSS 中的:root
也可以去此文章中查看相關(guān)方法：自己動手豐衣足食系列の自定義下拉框 vue 組件
在主頁面app.vue中設(shè)置全局顏色為#EBE6DA
在CSS 樣式編寫中，計算位置等值可以使用calc加var的方式計算
代碼：
效果：
二、時鐘指針編寫
在編寫指針時需要注意，指針的旋轉(zhuǎn)運動是圍繞圓心進行的，使用transform來改變旋轉(zhuǎn)
所以需要使用transform-origin: bottom來設(shè)置選擇的基準(zhǔn)點，之后旋轉(zhuǎn)rotate改變
在樣式編寫完成之后，就可以將當(dāng)前的北京時間與指針、分針、秒針的轉(zhuǎn)動相結(jié)合起來了
這里的原理其實更加簡單，使用new Date()獲取到當(dāng)前的時分秒，然后再將時分秒按比例轉(zhuǎn)換成度數(shù)deg
// 校準(zhǔn)時鐘指針方法 currentTime:function(){ let date = new Date(); this.hour = date.getHours(); this.minute = date.getMinutes(); this.second = date.getSeconds(); document.getElementsByClassName('hourhand')[0].style.transform = 'rotate(' + this.hour / 24 * 360 + 'deg)'; document.getElementsByClassName('minhand')[0].style.transform = 'rotate(' + this.minute / 60 * 360 + 'deg)'; document.getElementsByClassName('sechand')[0].style.transform = 'rotate(' + this.second / 60 * 360 + 'deg)'; }
使用setInterval定時器定時1000毫秒執(zhí)行一次
這樣就可以達到最終想要的效果了
三、時鐘組件的調(diào)用
編寫好時鐘組件后，接下來就可以在頁面上進行調(diào)用了
import clock from './components/clock' export default { name: 'App', components: { clock } }
調(diào)用
因為之前設(shè)置了props的原因，所以可以通過簡單的設(shè)置調(diào)整時鐘的大小和顏色風(fēng)格
color為#bec8e4
現(xiàn)在的時鐘樣式：
完整組件代碼
JavaScript Vue web前端 開發(fā)者
版權(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)容。
相關(guān)文章
