前段时间看抖音，有人用时间轮盘作为动态的桌面壁纸，一时间成为全网最火的电脑屏保，后来小米等运用市场也出现了【时间轮盘】，有点像五行八卦，感觉很好玩，于是突发奇想，自己写一个网页版小DEMO玩玩，先看看效果：
当然实现这个效果，前端的角度来说，有很多，这里介绍最简单的，达到这个效果纯粹是元素圆性布局，如果仅仅是这样肯定没有达到各位老铁心理需求，所以既然，做了肯定是要做一个麻雀虽小五脏俱全的小demo,于是就把vue全家桶用上带设置的小项目。接下来就一步一步带各位从0到1构建这个小东西。
一、项目需求：功能描述：实现一个带设置的并兼容移动端的时间罗盘(设置包含：多语言切换，垂直水平位置，缩放大小，旋转角度，文字颜色，背景颜色等)
二、预备基础知识点：1、圆形布局，如下效果图
解析：
1、圆心：O点、半径r ，我这里用transform: translateX值来设置半径值;
2、圆心角：∠BOM;
3、需要布局的元素：A、B、C、D、E、F、G、H绝对定位的元素;
4、绝对定位时的元素的坐标点，可以用transform:rotate值，按照秒、分、小时、上下午、星期、日期、月等份旋转角度来控制各个元素在圆心的位置
有了这些信息，我们就开始写代码了(vue构建项目这里就略了 )，简单的直接用vue-cli3
三、项目布局效果开发3.1布局
首先我们看到时间轮盘分别由 秒、分、小时、上下午、星期、日期、月，这几项组成，于是把他们都封装在一个小模块组件里
<template> <div> <Second :second="second" /> <Minute :minute="minute" /> <Hour :hour="hour" /> <Apm :apm="apm" /> <Week :week="week" /> <Day :day="day" /> <Month :month="month" /> </div> </template>
而且同一圆心，所以公共部分的样式可以共用
<style lang="scss"> .home { ul { list-style-type: none; padding: 0; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: 60px; width: 60px; li { position: absolute; height: 60px; width: 60px; color: #fff; text-align: center; font-size: 14px; line-height: 20px; } } } </style>
这里圆布局，我们以星期为例看下面代码
Week.vue
<template> <ul> <li v-for="(item, index) in weekList" :key="index" > {{ item }} </li> </ul> </template> <style scoped lang="scss"> ul { z-index: 5; @for $i from 1 through 7 { li:nth-child(#{$i}) { transform: rotate(#{$i * 360/7 * 1deg}) translateX(180px); } } } </style>
先看看布局部分 ul li 标签v-for出周一到周天，一共七天，所以下面li的样式，熟悉scss语法的同学，就嘴角微微上扬，@for 的运用，360度被分成7等份 ， 嗯，真香。来看一波效果，还不错
那接下来，同样的操作把秒、分、小时、上下午、星期、日期、月全部配齐，耐心调translateX()其让秒、分、小时、上下午、星期、日期、月的半径不会互相重叠，看看效果，初具样子
注意因为同一圆心和绝对定位所以每个模块要z-index 设置层
3.2JS同步时间
我们只需要通过JavaScript Date 对象new一个 Date()出来，然后通过Date 对象方法，获取到具体秒、分、小时、转换上下午、星期、日期、月。代码如下
<script> export default { 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(); } }; </script>
3.2转动
然后通过具体的秒、分、小时、上下午、星期、日期、月值ul转动transform：rotate：，来控制角度，而且当前值进行文字高亮。还是以星期为例Week.vue
<template> <ul :style="{ transform: rotate(${((rotates * 360) / 7) * 1}deg) }"> <li v-for="(item, index) in weekList" :key="index" :class="{ hover: index == rotates - 1 || index == rotates + 6 }" > {{ item }} </li> </ul> </template> <script> export default { name: "Week", props: ["week"], data() { return { rotates: "", weekList: [ "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期天" ] }; }, watch: { week(val) { this.rotates = val; } } }; </script>
我们通过watch父组件home.vue传过来的星期数，然后对ul父容器进行旋转，li对应的星期数，动态加当前星期class .hover样式