一個基於Vue的鐘表Demo

時間 2019-11-15
標籤一個基於 vue 鐘錶 demo 简体版
原文原文鏈接
前兩天寫了一個基於vue的小鐘表，給你們分享一下。css
其中時針和分針使用的是圖片，結合transform製做；錶盤刻度是經過transform和transformOrigin配合畫的；外面的弧形框框，啊哈哈，也是用的圖片。具體的看裏面的註釋就行了，感受寫的還算清楚，啊哈哈~html
能幫到你的話，點個讚唄？vue
預覽圖:
react
效果的話，能夠看這裏
https://jhcan333.github.io/can-Share/demos-tips/clockDemo.htmlgit
github 地址在這裏
https://github.com/JHCan333/can-Share/blob/master/demos-tips/clockDemo.htmlgithub
<!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>
歡迎你們評論留言，請多多指教！npm
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。