更新记录

1.1.1（2021-06-29）

修改一点小问题

1.1.0（2021-06-29）

加上后端传的时间戳

1.0.0（2021-06-28）

时钟组件

平台兼容性

使用说明

本组件如果出现错位等情况，需要自己到组件中调整，时钟素材的大小也需要自己到组件中调整

使用方式

```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)
            },
            onUnload() {
                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