vue實現(xiàn)抖音時間轉盤-創(chuàng)新互聯(lián)

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

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

做了一個抖音時間轉盤，還挺簡單的，可能我做的很粗糙

用vue做的 才160行代碼。

其實很簡單 只是大部分人被這個圓給迷惑了

這個圓就是用簡單css3就能做 通過rotate來修改計算就能展示出來了。

然后貼代碼。

<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: ['零', '壹', '貳', '叁', '肆', '伍', '陸', '柒', '捌', '玖', '拾', '佰', '仟', '萬'],
   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])
   }
   // 小時
   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>

新聞名稱：vue實現(xiàn)抖音時間轉盤-創(chuàng)新互聯(lián)
文章網(wǎng)址：http://www.muchs.cn/article10/dieggo.html

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

廣告

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