前兩天寫了一個基於vue的小鐘表，給大家分享一下。
其中時針和分針使用的是圖片，結合transform製作；錶盤刻度是通過transform和transformOrigin配合畫的；外面的弧形框框，啊哈哈，也是用的圖片。具體的看裏面的註釋就好了，感覺寫的還算清楚，啊哈哈~
能幫到你的話，點個讚唄？
預覽圖
效果的話，可以看這裏
https://jhcan333.github.io/can-Share/demos-tips/clockDemo.html
github 地址在這裏
https://github.com/JHCan333/can-Share/blob/master/demos-tips/clockDemo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>一個基於vue的時鐘小demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.jhc-hour-needle {
z-index: 5;
width: 6%;
height: 25%;
position: absolute;
left: 49%;
bottom: 47%;
transform-origin: center bottom;
background: url(https://jhcan333.github.io/can-Share//image/clock/hourPoint.png) no-repeat;
background-size: 100% 100%;
}
.jhc-min-needle {
z-index: 2;
width: 6%;
height: 30%;
position: absolute;
left: 49%;
bottom: 47%;
transform-origin: center bottom;
background: url(https://jhcan333.github.io/can-Share//image/clock/minPoint.png) no-repeat;
background-size: 100% 100%;
}
.jhc-clock-area {
width: 400px;
height: 400px;
position: relative;
background: #050842;
}
.jhc-clock-back {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background: url(https://jhcan333.github.io/can-Share//image/clock/clockBack.png) no-repeat;
background-size: 100% 100%;
}
.jhc-clock-title {
color: #fff;
position: absolute;
bottom: 10px;
width: 100%;
text-align: center;
font-weight: bold;
}
.jhc-clock-dot {
width: 6%;
height: 6%;
border-radius: 50%;
position: absolute;
background-color: #509fef;
z-index: 20;
left: 49%;
top: 50.5%;
box-shadow: 0px 0px 10px 1px #000;
}
</style>
</head>
<body>
<div id="app">
</div>
<script>
var app = new Vue({
el: '#app',
template:
`<div ref="area" :class="clockArea">
<div :style="cssClock">
<div :style="cssDotWrap">
<div :style="Object.assign({},{
transform: 'rotateZ('+i*6+'deg)',
height: i%5==0?longDot.height:shourtDot.height,
width: i%5==0?longDot.width:shourtDot.width,
},cssDot)"
v-for="(dot,i) in 60"
></div>
</div>
<div :style="Object.assign({},{
transform: 'rotateZ('+hour+'deg)'
})"
:class="hourNeedle"
></div>
<div :style="Object.assign({},{
transform: 'rotateZ('+min+'deg)'
})"
:class="minNeedle"
></div>
<div :class="clockDot"></div>
<div :class="clockBack"></div>
</div>
<div :class="clockTitle" :style="style">當前時間 {{timeDisplayArea}}</div>
</div>`,
data () {
return {
prefixCss: 'jhc-', // css 前綴
cssClock: { //整個鐘的盒子
position: 'absolute',
width: '100%',
height: '100%',
borderRadius: '50%',
},
cssDotWrap: { //裝刻度的盒子
width: '100%',
height: '100%'
},
cssDot: { //刻度們
position: 'absolute',
backgroundColor: '#509fef'
},
longDot: { //長刻度
width: '3px',
height: '10px'
},
shourtDot: { //短刻度
width: '1px',
height: '5px'
},
timer: null, //用來標記自適應大小的timer
updateTimer: null, // 更新時鐘的timer
style: {
bottom: '1px'
}, //時鐘的title的style
scale:0.8, // 時鐘佔外層的百分比
currTime: new Date() //當前日期對象
}
},
created () {
this.currTime = new Date()
clearInterval(this.updateTimer)
this.updateTimer = setInterval(() => {
this.currTime = new Date()
}, 1000)
},
mounted () {
//設置時鐘的大小
this.setSize()
},
beforeDestroy () {
clearInterval(this.updateTimer)
},
methods: {
//設置鐘錶的型號大小
setSize () {
let width = this.getWidth()
let height = this.getHeight()
//時鐘佔外層的百分比
let scale = this.scale
//獲取較短邊
let shortLth = width
if (width > height) {
shortLth = height
}
//對時鐘的直徑做處理
shortLth = shortLth * scale
//獲取到頂部和左部的距離
let paddingW = (width - shortLth) / 2
let paddingH = (height - shortLth) / 2
//設置鐘錶整體的大小以及位置
this.setStates('cssClock', {
height: shortLth + 'px',
width: shortLth + 'px',
top: paddingH + 'px',
left: paddingW + 'px',
})
//設置刻度所圍繞區域的位置
this.setStates('cssDotWrap', {
transform: `translate(${shortLth * 0.52}px,${shortLth * 0.16}px)` // 0.52 和 0.16 是我一點一點挪出來的，啊哈哈
})
//設置長短刻度的半徑,以及尺寸
let dotRadius = shortLth * 0.75 / 2 - 1
let longDotWidth = Math.floor(dotRadius / 25) || 2
let longDotHeight = Math.floor(dotRadius / 8) || 6
let shortDotWidth = Math.floor(dotRadius / 50) || 1
let shortDotHeight = Math.floor(dotRadius / 16) || 3
//短刻度
this.shourtDot = {
width: shortDotWidth + 'px',
height: shortDotHeight + 'px'
}
//長刻度
this.longDot = {
width: longDotWidth + 'px',
height: longDotHeight + 'px'
}
//設置刻度旋轉點的位置
this.setStates('cssDot', {
transformOrigin: `${0}px ${dotRadius}px`
})
},
getWidth () { //獲取指定容器的寬度
return this.getRef('area').offsetWidth || 200
},
getHeight () { //獲取指定容器的高度
return this.getRef('area').offsetHeight || 200
},
getRef (ref) { // 獲取指定 ref 對象
return this.$refs && this.$refs[ref] || {}
},
//模仿 react 的states
setStates (prop, data) {
let cache = this[prop]
this[prop] = Object.assign({}, cache, JSON.parse(JSON.stringify(data)))
},
},
computed: {
sec () { //將當前秒數轉化爲秒針旋轉的度數
return this.currTime.getSeconds() * 6
},
min () { //將當前的分鐘數轉化爲分針旋轉的度數
return this.currTime.getMinutes() * 6 + this.currTime.getSeconds() / 60 * 6
},
hour () { //將當前的小時數轉化爲時針旋轉的度數
return this.currTime.getHours() * 30 + this.currTime.getMinutes() / 60 * 30
},
timeDisplayArea(){ // 時間展示區
let hours = this.currTime.getHours() > 9 ? this.currTime.getHours() : ('0' + this.currTime.getHours())
let minutes = this.currTime.getMinutes() > 9 ? this.currTime.getMinutes() : ('0' + this.currTime.getMinutes())
let seconds = this.currTime.getSeconds() > 9 ? this.currTime.getSeconds() : ('0' + this.currTime.getSeconds())
return hours + ':' + minutes + ':' + seconds
},
hourNeedle () { //時針的class
return `${this.prefixCss}hour-needle`
},
minNeedle () { //分針的class
return `${this.prefixCss}min-needle`
},
clockArea () { //錶盤的區域
return `${this.prefixCss}clock-area`
},
clockBack () { //時鐘的背景（外框圖片）
return `${this.prefixCss}clock-back`
},
clockTitle () { //時鐘的title的class
return `${this.prefixCss}clock-title`
},
clockDot () { //時鐘的中心點
return `${this.prefixCss}clock-dot`
}
},
})
</script>
</body>
</html>
歡迎大家評論留言，請多多指教！
最近在搞一個和前端程序員相關的公號，除了技術分享之外，也增加了對於職業發展、生活記錄之類的文章，歡迎大家關注，一起聊天、吐槽，一起努力工作，認真生活！
