DDR爱好者之家 Design By 杰米
本文实例为大家分享了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 "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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年05月03日
2024年05月03日
- 群星《音你而来 第2期》[FLAC/分轨][197.58MB]
- 群星-中国新民乐(笛子)-戏竹4CD(DSD)[雨林唱片]WAV+CUE
- JacobCollier《DjesseVol.2》(2019)Hi-Res96kHz_24bit
- 黄品源.2002-漫漫岁月情·珍藏集(引进版)【滚石】【WAV+CUE】
- NorahJones《NotTooLate》(2024)Hi-Res192kHz_24bit
- RIMZEE《FeedTheStreets》(2024)[FLAC]
- 杭天琪.1989-入梦(TP版)【中唱】【WAV+CUE】
- 彭正《十年》[320K/MP3][98.75MB]
- 彭正《十年》[FLAC/分轨][288.77MB]
- 群星《惜花芷 影视原声带》[320K/MP3][128.04MB]
- 群星《经典老歌.百万畅销》10CD[WAV+CUE]
- 王韫.1994-漫天雪花飘的都是我的爱(TP版)【新时代】【WAV+CUE】
- HI-FI顶级人声测试天碟《试音刀郎DXD》[WAV+CUE]
- 群星《惜花芷 影视原声带》[FLAC/分轨][281.23MB]
- 张国荣《风继续吹》[DSF][1.1G]