更新记录
1.1.1(2021-06-29)
修改一点小问题
1.1.0(2021-06-29)
加上后端传的时间戳
1.0.0(2021-06-28)
时钟组件
查看更多平台兼容性
Vue2 | Vue3 |
---|---|
√ | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
× | × | √ | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | × | × | × | × | × | × | × | × |
使用说明
本组件如果出现错位等情况,需要自己到组件中调整,时钟素材的大小也需要自己到组件中调整
使用方式
```html
<!-- 在页面引入组件 -->
<qx-clock></qx-clock>
```
组件代码
```javascript
<template>
<view class="content"
:style="{'background':`url(${bg}) no-repeat center/100%`,'width':size+'rpx','height':size+'rpx'}">
<image :src="axis" class="axis"></image>
<image :src="hourHand" class="hourHand" :style="{'transform':`${transform} rotateZ(${360/12*hours}deg);`}">
</image>
<image :src="minuteHand" class="minuteHand"
:style="{'transform':`${transform} rotateZ(${360/60*minutes}deg);`}"></image>
<image :src="secondHand" class="secondHand"
:style="{'transform':`${transform} rotateZ(${360/60*seconds}deg);`}"></image>
</view>
</template>
<script>
var setTime
export default {
name: "qx-clock",
props: {
bg: {
type: String,
default: '../../static/bg.jpg'
},
axis: {
type: String,
default: '../../static/axis.png'
},
hourHand: {
type: String,
default: '../../static/hourHand.png'
},
minuteHand: {
type: String,
default: '../../static/minuteHand.png'
},
secondHand: {
type: String,
default: '../../static/secondHand.png'
},
size: {
type: Number,
default: 300
},
timeRub:{ //后端传的时间戳
type: Number,
default: null
}
},
data() {
return {
transform: 'translate(-50%, -50%)',
hours: 0,
minutes: 0,
seconds: 0,
count:0
};
},
mounted() {
this.getTimer()
},
watch:{
count(newVal,oldVal){
const timer = new Date(this.timeRub+(newVal*1000))
this.setTimer(timer)
}
},
methods: {
getTimer() {
if(this.timeRub){
const timer = new Date(this.timeRub)
this.setTimer(timer)
setTime = setInterval(() => {
this.count++
}, 1000)
return
}
setTime = setInterval(() => {
const timer = new Date()
this.setTimer(timer)
}, 1000)
},
setTimer(timer){
this.seconds = timer.getSeconds()
this.hours = timer.getHours() <= 12 ? timer.getHours() : timer.getHours() - 12
this.minutes = timer.getMinutes()
console.log(this.hours, this.minutes, this.seconds);
}
},
onHide() {
clearInterval(setTime)
},
() {
clearInterval(setTime)
}
}
</script>
<style>
.axis,
.hourHand,
.minuteHand,
.secondHand {
position: absolute;
left: 50%;
top: 50%;
}
.content {
margin: 50% auto 0;
border-radius: 50%;
position: relative;
}
.axis {
width: 20rpx;
height: 20rpx;
transform: translate(-50%, -50%);
}
.hourHand {
width: 16rpx;
height: 74rpx;
top: 35%;
transform-origin: 50% 111% 0px;
}
.minuteHand {
width: 20rpx;
height: 106rpx;
top: 35%;
transform-origin: 50% 94% 0px;
}
.secondHand {
width: 20rpx;
height: 180rpx;
top: 45%;
transform-origin: 50% 60% 0px;
}
</style>
```
示例工程
本插件只是封装了一个组件,故无示例工程
如有问题,欢迎联系作者
wx: xiaoqiuxitop