console
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,
updateTimer: null,
style: {
bottom: '1px'
},
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)`
})
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) {
return this.$refs && this.$refs[ref] || {}
},
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() {
return`$ {
this.prefixCss
}
hour - needle`
},
minNeedle() {
return`$ {
this.prefixCss
}
min - needle`
},
clockArea() {
return`$ {
this.prefixCss
}
clock - area`
},
clockBack() {
return`$ {
this.prefixCss
}
clock - back`
},
clockTitle() {
return`$ {
this.prefixCss
}
clock - title`
},
clockDot() {
return`$ {
this.prefixCss
}
clock - dot`
}
},
})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>
<div id="app">
</div>
.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;
}