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">
          <li
            v-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">
          <li
            v-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">
          <li
            v-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">
          <li
            v-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() % 10
    var two = new Date().getFullYear() % 12
    this.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>