最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

vue实现抖音时间转盘

来源:动视网 责编:小OO 时间:2020-11-27 21:50:51
文档

vue实现抖音时间转盘

本文实例为大家分享了vue实现抖音时间转盘的具体代码,供大家参考,具体内容如下:做了一个抖音时间转盘,还挺简单的,可能我做的很粗糙。用vue做的 才160行代码。其实很简单 只是大部分人被这个圆给迷惑了。这个圆就是用简单css3就能做 通过rotate来修改计算就能展示出来了。然后贴代码。
推荐度:
导读本文实例为大家分享了vue实现抖音时间转盘的具体代码,供大家参考,具体内容如下:做了一个抖音时间转盘,还挺简单的,可能我做的很粗糙。用vue做的 才160行代码。其实很简单 只是大部分人被这个圆给迷惑了。这个圆就是用简单css3就能做 通过rotate来修改计算就能展示出来了。然后贴代码。

本文实例为大家分享了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>

文档

vue实现抖音时间转盘

本文实例为大家分享了vue实现抖音时间转盘的具体代码,供大家参考,具体内容如下:做了一个抖音时间转盘,还挺简单的,可能我做的很粗糙。用vue做的 才160行代码。其实很简单 只是大部分人被这个圆给迷惑了。这个圆就是用简单css3就能做 通过rotate来修改计算就能展示出来了。然后贴代码。
推荐度:
标签: 抖音 VUE 实现
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top