vue实现抖音时间转盘

转盘"/>

vue实现抖音时间转盘

做了一个抖音时间转盘 还挺简单的 可能我做的很粗糙 

用vue做的 才160行代码。。。。

其实很简单 只是大部分人被这个圆给迷惑了

这个圆就是用简单css3就能做 通过rotate来修改计算就能展示出来了。。。。

然后贴代码。。。

<template><div class="main"><div class="timeBox"><div class="yearBox box">{{year}}</div><div class="dayBox box" :style="'transform: rotate('+(360/day.length)*curDay+'deg)'"><ul class="container"><liv-for="(v,i) in day":key="i":style="'transform: rotate('+(-360/day.length) * (i+1) +'deg);transform-origin: -100% 50% 0px;margin-left:150px;margin-top:90px'">{{v}}</li></ul></div><div class="hourBox box" :style="'transform: rotate('+(-360/hour.length)*curHour+'deg)'"><ul class="container"><liv-for="(v,i) in hour":key="i":style="'transform: rotate('+(360/hour.length)*i+'deg);transform-origin: -200% 50% 0px;margin-left:300px;margin-top:190px'">{{v}}</li></ul></div><div class="minutesBox box" :style="'transform: rotate('+(-360/minutes.length)*curMin+'deg)'"><ul class="container"><liv-for="(v,i) in minutes":key="i":style="'transform: rotate('+(360/minutes.length)*i+'deg);transform-origin: -300% 50% 0px;margin-left:450px;margin-top:290px'">{{v}}</li></ul></div><div class="secondBox" :style="'transform: rotate('+(-360/seconds.length)*curSec+'deg)'"><ul class="container"><liv-for="(v,i) in seconds":key="i":style="'transform: rotate('+(360/seconds.length)*i+'deg);transform-origin: -400% 50% 0px;margin-left:600px;margin-top:390px'">{{v}}</li></ul></div></div></div>
</template>
<script>
export default {data: function () {return {data: ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖', '拾', '佰', '仟', '万'],hour: [],curHour: 0,day: [],curDay: 0,minutes: [],curMin: 0,seconds: [],curSec: 0,year: ''}},created () {this.dealData()this.seconds = JSON.parse(JSON.stringify(this.minutes))var sky = ['', '辛', '壬', '癸', '甲', '乙', '丙', '丁', '戊', '己', '庚']var land = ['', '酉', '戌', '亥', '子', '丑', '寅', '卯', '辰', '巳', '午', '未', '申']var one = new Date().getFullYear() % 10var two = new Date().getFullYear() % 12this.year = sky[one] + land[two]setInterval(() => {this.getTime()}, 1000)},methods: {dealData () { // 生成数据// 星期for (let i = 0; i < 7; i++) {this.day.push('星期' + this.data[i + 1])}// 小时for (let i = 0; i < 24; i++) {if (i < 11) {this.hour.push(this.data[i])} else {this.hour.push((parseInt(i / 10) > 1 ? this.data[parseInt(i / 10)] : '') + '拾' + (parseInt(i % 10) !== 0 ? this.data[i % 10] : ''))}}// 分钟for (let i = 0; i < 60; i++) {if (i < 11) {this.minutes.push(this.data[i])} else {this.minutes.push((parseInt(i / 10) > 1 ? this.data[parseInt(i / 10)] : '') + '拾' + (parseInt(i % 10) !== 0 ? this.data[i % 10] : ''))}}},getTime () { // 获取时间var now = new Date()this.curSec = now.getSeconds()this.curDay = now.getDay()this.curMin = now.getMinutes()this.curHour = now.getHours()}}
}
</script>
<style lang="scss" scoped>
.box{position: absolute;transition: 1s;
}
.main{width: 100%;height: 100vh;overflow: hidden;background: #ccc;
}
.yearBox{top: 50%;left: 50%;height: 40px;width: 40px;margin-top: -20px;margin-left: -20px;line-height: 40px;text-align: center;font-size: 18px;
}
.timeBox{width: 800px;height: 800px;margin: 0 auto;position: relative;
}
.dayBox {width: 200px;height: 200px;top: 300px;left: 300px;
}
.hourBox {width: 400px;height: 400px;top: 200px;left: 200px;
}
.minutesBox {width: 600px;height: 600px;top: 100px;left: 100px;
}
.secondBox {width: 800px;height: 800px;top: 0;left: 0;position: absolute;
}
.container {overflow:auto;li {width: 50px;height: 20px;font-size: 12px;position: absolute;}}
</style>