本文實(shí)例為大家分享了vue實(shí)現(xiàn)抖音時(shí)間轉(zhuǎn)盤(pán)的具體代碼，供大家參考，具體內(nèi)容如下

公司主營(yíng)業(yè)務(wù)：成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶(hù)真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶(hù)帶來(lái)驚喜。成都創(chuàng)新互聯(lián)公司推出合水免費(fèi)做網(wǎng)站回饋大家。

做了一個(gè)抖音時(shí)間轉(zhuǎn)盤(pán)，還挺簡(jiǎn)單的，可能我做的很粗糙

用vue做的 才160行代碼。

其實(shí)很簡(jiǎn)單 只是大部分人被這個(gè)圓給迷惑了

這個(gè)圓就是用簡(jiǎn)單css3就能做 通過(guò)rotate來(lái)修改計(jì)算就能展示出來(lái)了。

然后貼代碼。

<template>
 <div class="main">
  <div class="timeBox">
   <div class="yearBox box">{{year}}</div>
   <div class="dayBox box" :>
    <ul class="container">
     <li
      v-for="(v,i) in day"
      :key="i"
      :
     >{{v}}</li>
    </ul>
   </div>
   <div class="hourBox box" :>
    <ul class="container">
     <li
      v-for="(v,i) in hour"
      :key="i"
      :
     >{{v}}</li>
    </ul>
   </div>
   <div class="minutesBox box" :>
    <ul class="container">
     <li
      v-for="(v,i) in minutes"
      :key="i"
      :
     >{{v}}</li>
    </ul>
   </div>
    <div class="secondBox" :>
    <ul class="container">
     <li
      v-for="(v,i) in seconds"
      :key="i"
      :
     >{{v}}</li>
    </ul>
   </div>
  </div>
 </div>
</template>
<script>
export default {
 data: function () {
  return {
   data: ['零', '壹', '貳', '叁', '肆', '伍', '陸', '柒', '捌', '玖', '拾', '佰', '仟', '萬(wàn)'],
   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 () { // 生成數(shù)據(jù)
   // 星期
   for (let i = 0; i < 7; i++) {
    this.day.push('星期' + this.data[i + 1])
   }
   // 小時(shí)
   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 () { // 獲取時(shí)間
   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>

新聞名稱(chēng)：vue實(shí)現(xiàn)抖音時(shí)間轉(zhuǎn)盤(pán)-創(chuàng)新互聯(lián)
文章網(wǎng)址：http://jinyejixie.com/article10/dieggo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、動(dòng)態(tài)網(wǎng)站、響應(yīng)式網(wǎng)站、商城網(wǎng)站、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)