欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue实现抖音时间转盘

程序员文章站 2022-06-08 17:00:49
本文实例为大家分享了vue实现抖音时间转盘的具体代码,供大家参考,具体内容如下 做了一个抖音时间转盘,还挺简单的,可能我做的很粗糙 用vue做的 才160行代码。...

本文实例为大家分享了vue实现抖音时间转盘的具体代码,供大家参考,具体内容如下

vue实现抖音时间转盘

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

用vue做的 才160行代码。

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

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

vue实现抖音时间转盘

然后贴代码。

<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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。