用vue2.6实现Tik Tok【时轮】屏保效果的源代码

编辑：宝哥软件园来源：互联网时间：2021-08-25

新天龙八部

评分

写在前面：

前段时间，我看了Tik Tok。有人用时间轮盘作为动态桌面壁纸，成为全网最火的电脑屏保。后来小米等应用市场也出现了【时间轮盘】，有点像五行八卦。感觉很好玩，于是突发奇想，在网页上写了一个小DEMO来玩。先看效果：

当然，从前端来看，实现这种效果的方法有很多。达到这种效果最简单的方法就是纯粹的元素圆形布局。如果只是这样，肯定不符合所有老铁的心理需求。所以，既然肯定要用小麻雀和全部五个内脏做一个小演示，那就把vue家族的水桶作为一个带设置的小项目。接下来，我将带你一步一步地从0到1构建这个小东西。

一、项目需求：

功能描述：实现一个与移动终端兼容设置的时间罗盘(设置包括：多语言切换、纵横位置、缩放大小、旋转角度、文字颜色、背景颜色等。)

二、预备基础知识点：

1.圆形布局，如下图所示

解析：

1.圆心：o点，半径r，这里我用transform: translateX的值设置半径值；2.中心角：BOM；3.待布局元素：A、B、C、D、E、F、G、H绝对定位的元素；4.对于绝对定位时的元素坐标点，可以通过秒、分、小时、下午、周、日、月等旋转角度来控制每个元素在圆心的位置。

有了这些信息，我们开始编写代码(这里省略了vue构建项目)，我们直接简单地使用vue-cli3

三、项目布局效果开发

3.1布局

首先，我们看到时间轮由秒、分、小时、下午、星期、日期和月份组成，所以它们都封装在一个小模块组件中

template div class=' home ' second : second=' second '/Minute : Minute=' Minute '/Hour : Hour=' Hour '/Apm : Apm=' Apm '/Week : Week=' Week '/day : day=' day '/month 3360 month=' month '/div/template且具有相同的中心，因此可以共享公共部分的样式

style lang=' scss '。home { ul { list-style-type : none；padd : 0；绝对位置：top : 0；bottom : 0；left : 0；right : 0；margin: auto高度： 60px；宽度： 60px；li { position:绝对值；高度： 60px；宽度： 60px；color: # fff文本对齐：中心；font-size : 14px；线高： 20px；}}}/style这是圆形布局。让我们以周为例来看看下面的代码

Week.vue

weekList' :key='索引' { item }}/li/ul/templatestyle作用域lang=' scss ' ul { z-index : } 5中的templateulli v-for='(item，index );@for $i从1到7 { Li : th-child(# { $ I }){ transform : rotate({ $ I * 360/7 * 1 deg })translateX(180 px)；}}}/style首先看布局部分。ul li标签v-for从周一到周日，共七天。所以，下面这种风格的li，熟悉scss语法的同学，嘴角微微上扬。应用@for，将360度分成7等份。嗯，真香。让我们看到一波效果，还不错

然后，用同样的操作，完成所有的秒、分、小时、天、周、日、月，耐心地调整translateX()，使秒、分、小时、天、周、月的半径不会相互重叠。看效果，成型

请注意，由于相同的中心和绝对定位，每个模块都需要z-index来设置图层

3.2JS同步时间

我们只需要通过JavaScript Date对象创建一个新的Date()，然后通过Date对象方法获取具体的秒、分、小时，转换后的下午、星期、日期和月份。代码如下

scriptexport默认{name: 'home '，methods : { start(){ setInterval()={ let data=new Date()；this . second=data . getseconds()；this . minute=data . getminutes()；this . hour=data . gethours()；this . week=data . getday()；this . day=data . getdate()；this . month=data . getmonth()1；if(this . hour 12){ this . APM=2；} else { this . APM=1；} }, 1000);}}，created(){ this . start()；}};/script3.2旋转

然后旋转变换：旋转：通过特定的秒、分、小时、下午、星期、日期和月份值ul来控制角度，当前值用文本高亮显示。以星期为例。Week.vue

template ul : style=' { transform : rotate($ {((rotations * 360)/7)* 1 }度)}'li v-for='(item，index)in weekList ' : key=' index ' : class=' { hover : index==rotations-1 | | index==rotations 6 } ' { { item } }/Li/ul/templatescriptiondefault { name : ' week '，prop :[' week ']}}};/script我们通过watch parent组件home.vue发送周数，然后旋转ul parent容器，动态添加当前周类。悬停样式对应的周数。

li { position:绝对值；高度： 60px；宽度： 60px；color: # fff文本对齐：中心；font-size : 14px；线高： 20px；//突出显示。悬停{文本-阴影： RGB (255，255，255) 0px 0px 10px，RGB (255，255，255) 0px 0px 20px，RGB (255，0，222) 0px 0px 30px，RGB (255，255，222) 222) 0px 0px 40px，RGB (255，0，222} } : class=' { hover : index==rotations-1 | | index==rotations 6 } '，以便突出显示当前星期、其他秒、分、小时、下午、星期、日期和月份。然后你就能感受到爱情的魔力

在这一点上，我们已经发展了基本的效果

四、设置开发

4.1全屏，这里直接用screenfull.js

4.2切换语言，这里使用的是i18n和js-cookie第三方插件，具体实现是模仿vue-element-admin的实现

从“Vue”导入Vue；从“vue-i18n”导入VueI18n从“js-cookie”导入Cookies从“”导入本地文件。/en '；从“”导入zhLocale。/zh '；从“”导入esLocale。/zw '；vue . use(vuei 18n)；常量消息={ en: {.enLocale}，zh: {.zhLocale}，zw: {.esLocale } }导出函数getLanguage(){ const choose language=Cookies . get(' language ')；如果(选择语言)返回选择语言；const language=(navigator . language | | navigator . browser language)。toLowerCase()；常量区域=对象键(消息)；for(const locale of locales){ if(language . index of(locale)-1){ return locale；} }返回“en”；} const i18n=new vuei 18n({ locale : getLanguage()，messages })；导出默认i18n值得注意的是，我们已经把多语种切换中的秒、分、小时、下午、星期、日期、月份都写好了，所以语言切换改变后要一直计算数值。以周为例，这里计算了，周列表，实时计算其变化，然后渲染页面

script export default { name : ' week '，prop 3360[' week ']，data(){ return { rotates : ' ' }；}，computed : { weeklist : { get(){ return this。$t('周')；}}}，watch : { week(val){ this . rotations=val；}}};/script

看效果，为了美观简约，加了一点小效果。目前支持简体中文、繁体中文和英语