这篇文章主要为大家详细介绍了某视频剪辑软件实现抖音时间转盘，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现抖音时间转盘的具体代码，供大家参考，具体内容如下
做了一个抖音时间转盘，还挺简单的，可能我做的很粗糙
用某视频剪辑软件做的才160行代码。
其实很简单只是大部分人被这个圆给迷惑了
这个圆就是用简单css3就能做通过辐状的来修改计算就能展示出来了。
然后贴代码。
模板
div class='main '
div class='timeBox '
div class='年鉴框“{year}}/div
div class=' day box box ':style=' ' transform:rotate('(360/天。长度)* curDay ' deg)' '
ul class='容器'
里
v-for='(v，i) in day '
:key='i '
:style=' '转换：旋转((-360/天。长度)*(I ^ 1)'度)；转换原点：-100% 50% 0px；左边距：150像素上边距：90px ' '
{{v}}/li
/ul
/div
div class=' hourBox box ':style=' ' transform:rotate((-360/小时。长度)*工时'度' '
ul class='容器'
里
v-for='(v，I)小时'
:key='i '
:style=' ' transform:rotate('(360/小时。长度)* I ' deg)；转换原点：-200% 50% 0px；左边距：300像素页边距-顶部：190像素''
{{v}}/li
/ul
/div
div class=' minutes box box ':style=' ' transform:rotate((-360/分钟。长度)* curMin ' deg)' '
ul class='容器'
里
v-for='(v，I)分钟'
:key='i '
:style=' ' transform:rotate('(360/分钟。长度)* I ' deg)；转换原点：-300% 50% 0px；左边距：450像素页边距-顶部：290像素''
{{v}}/li
/ul
/div
div class=' second box ':style=' ' transform:rotate((-360/秒。长度)* curSec ' deg)' '
ul class='容器'
里
v-for='(v，I)秒'
:key='i '
:style=' '变换：旋转('(360/秒。长度)* I ' deg)；转换原点：-400% 50% 0px；左边距：600像素页边距-顶部：390像素''
{{v}}/li
/ul
/div
/div
/div
/模板
脚本
导出默认值{
数据：函数(){
返回{
数据：['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖', '拾', '佰', '仟', '万'],
小时：[],
0小时，
日期：[],
curDay: 0，
分钟：[],
0分钟，
秒：[],
curSec: 0，
年份：""
}
},
已创建(){
this.dealData()
这个。秒=JSON。解析(JSON。stringify(这个。分钟))
var sky=[' '，'辛', '壬', '癸', '甲', '乙', '丙', '丁', '戊', '己', '庚]
var land=[' '，'酉', '戌', '亥', '子', '丑', '寅', '卯', '辰', '巳', '午', '未', '申]
var one=新日期()。getFullYear() % 10
var二=新日期()。getFullYear() % 12
今年=天[一]地[二]
setInterval(()={
this.getTime()
}, 1000)
},
方法：{
dealData () { //生成数据
//星期
对于(设I=0；I 7；i ) {
this.day.push('星期this.data[i 1])
}
//小时
对于(设I=0；i 24i ) {
如果(i 11) {
this.hour.push(this.data[i])
}否则{
这个。小时。push((parse int(I/10)1？this.data[parseInt(i/10)]:' ')'拾(parseInt(i % 10)！==0 ?this.data[i % 10]:' '))
}
}
//分钟
对于(设I=0；i 60i ) {
如果(i 11) {
this.minutes.push(this.data[i])
}否则{
这个。分钟。push((parse int(I/10)1？this.data[parseInt(i/10)]:' ')'拾(parseInt(i % 10)！==0 ?this.data[i % 10]:' '))
}
}
},
getTime () { //获取时间
var now=新日期()
this.curSec=now.getSeconds()
this.curDay=now.getDay()
this.curMin=now.getMinutes()
this.curHour=now.getHours()
}
}
}
/脚本
样式lang='scss '范围。方框{
位置：绝对；
转场：1s；
}。主要{
宽度：100%;
身高：100vh
溢出：隐藏；
背景：# ccc
}。年鉴{
top:50%；
左：50%;
高度：40px
宽度：40px
边距-顶部：-20px；
左边距：-20px；
行高：40px
文本对齐：居中；
字体大小：18px
}。时间盒{
宽度：800像素
高度：800像素
边距：0自动；
位置：相对；
}。日箱{
宽度：200像素
高度：200像素
顶配：300像素
左：300像素
}。小时箱{
宽度：400像素
高度：400像素
顶配：200 px
左：200像素
}。分钟箱{
宽度：600像素
高度：600像素
top:100px；
左：100像素
}。第二个框{
宽度：800像素
高度：800像素
top:0；
左：0;
位置：绝对；
}。容器{
溢出：自动；
李{
宽度：50px
高度：20px
字体大小：12px
位置：绝对；
}
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。