都在写抖音上的网红罗盘时钟，我也用vue仿写一个
作者：互联网
先看效果
直接上代码
<template>
<div class="container">
<div class="dateTimeBox yearBox isActive">{{nowYear}}年</div>
<div id="monthArea" ref="monthArea">
<div class="dateTimeBox" ref="monthBox" v-for="(item,index) in monthList" :key=""
:class="{'isActive': item.isActive}">{{item.value}}
</div>
</div>
<div id="dateArea" ref="dateArea">
<div class="dateTimeBox" ref="dateBox" v-for="(item,index) in dateList" :key=""
:class="{'isActive': item.isActive}">{{item.value}}</div>
</div>
<div id="hourArea" ref="hourArea">
<div class="dateTimeBox" ref="hourBox" v-for="(item,index) in hourList" :key=""
:class="{'isActive': item.isActive}">{{item.value}}</div>
</div>
<div id="minuteArea" ref="minuteArea">
<div class="dateTimeBox" ref="minuteBox" v-for="(item,index) in minuteList" :key=""
:class="{'isActive': item.isActive}">{{item.value}}
</div>
</div>
<div id="secondArea" ref="secondArea">
<div class="dateTimeBox" ref="secondBox" v-for="(item,index) in secondList" :key=""
:class="{'isActive': item.isActive}">{{item.value}}
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
nowYear: '',//当前年份
monthList: [],//月份数组
dateList: [],//日期数组
hourList: [],//小时数组
minuteList: [],//分钟数组
secondList: [],//秒钟数组
}
},
mounted() {
var that = this;
that.initTimeList();
},
methods: {
//设置刻度
initTimeList() {
var that = this;
for (var i = 1; i < 13; i++) {
that.monthList.push({
value: i + "月",
isActive: false
});
}
for (var i = 1; i < 32; i++) {
that.dateList.push({
value: i + "日",
isActive: false
});
}
for (var i = 0; i < 24; i++) {
that.hourList.push({
value: i + "时",
isActive: false
});
}
for (var i = 0; i < 60; i++) {
that.minuteList.push({
value: i + "分",
isActive: false
});
}
for (var i = 0; i < 60; i++) {
that.secondList.push({
value: i + "秒",
isActive: false
});
}
that.$nextTick(function () {
that.initData();
});
},
//初始化样式
initData() {
var that = this;
//初始化月份样式
that.setRoundStyle(that.$refs.monthBox, 60, 30);
//初始化日期样式
that.setRoundStyle(that.$refs.dateBox, 120, 360 / 31);
//初始化小时样式
that.setRoundStyle(that.$refs.hourBox, 180, 15);
//初始化分钟样式
that.setRoundStyle(that.$refs.minuteBox, 240, 6);
//初始化秒钟样式
that.setRoundStyle(that.$refs.secondBox, 300, 6);
that.setNowDate();
that.run();
},
/**
* 设置圆圈样式
* dataList:刻度数组, radius:半径, eachDeg:每个刻度间的度数
*/
setRoundStyle(dataList, radius, eachDeg) {
for (var i = 0; i < dataList.length; i++) {
var translateX = Math.round(Math.cos(i * eachDeg * (Math.PI / 180)) * 1000000) / 1000000 * radius;
var translateY = Math.round(Math.sin(i * eachDeg * (Math.PI / 180)) * 1000000) / 1000000 * radius;
var rotateDeg = i * eachDeg;
dataList[i].style.transform = "translate(" + translateX + "px, " + translateY + "px) rotate(" + rotateDeg + "deg)";
}
},
//设置当前时间
setNowDate() {
var that = this;
var nowDate = new Date();
//当前年份
that.nowYear = nowDate.getFullYear();
//当前月份
that.rotateBox(that.$refs.monthArea, nowDate.getMonth() * (-360 / 12), that.monthList[nowDate.getMonth()], nowDate.getMonth() - 1 < 0 ? that.monthList[that.monthList.length - 1] : that.monthList[nowDate.getMonth() - 1]);
//当前日期
that.rotateBox(that.$refs.dateArea, (nowDate.getDate() - 1) * (-360 / 31), that.dateList[nowDate.getDate() - 1], nowDate.getDate() - 2 < 0 ? that.dateList[that.dateList.length - 1] : that.dateList[nowDate.getDate() - 2]);
//当前小时
that.rotateBox(that.$refs.hourArea, nowDate.getHours() * (-360 / 24), that.hourList[nowDate.getHours()], nowDate.getHours() - 1 < 0 ? that.hourList[that.hourList.length - 1] : that.hourList[nowDate.getHours() - 1]);
//当前分钟
that.rotateBox(that.$refs.minuteArea, nowDate.getMinutes() * (-360 / 60), that.minuteList[nowDate.getMinutes()], nowDate.getMinutes() - 1 < 0 ? that.minuteList[that.minuteList.length - 1] : that.minuteList[nowDate.getMinutes() - 1]);
//当前秒钟
that.rotateBox(that.$refs.secondArea, nowDate.getSeconds() * (-360 / 60), that.secondList[nowDate.getSeconds()], nowDate.getSeconds() - 1 < 0 ? that.secondList[that.secondList.length - 1] : that.secondList[nowDate.getSeconds() - 1]);
},
/**
* 旋转刻度
* dateTimeArea:要旋转的区域，rotateDeg：转到当前时间所需要旋转的度数，dateTimeBox：当前时间刻度，lastdateTimeBox：前一个高亮的刻度
*/
rotateBox(dateTimeArea, rotateDeg, dateTimeBox, lastdateTimeBox) {
var that = this;
dateTimeArea.style.transform = "rotate(" + rotateDeg + "deg)";
dateTimeBox.isActive = true;
lastdateTimeBox.isActive = false;
},
//动起来
run() {
var that = this;
var timer;
clearInterval(timer);
timer = setInterval(function () {
that.setNowDate();
}, 1000);
}
}
}
</script>
<style scoped>
.container {
width: 700px;
height: 700px;
position: relative;
background-color: #000;
color: #666;
}
.dateTimeBox {
position: absolute;
width: 80px;
height: 20px;
text-align: center;
top: 50%;
margin-top: -10px;
left: 50%;
margin-left: -40px;
}
#monthArea,
#dateArea,
#hourArea,
#minuteArea,
#secondArea {
position: absolute;
width: 100%;
height: 100%;
transition: transform 1s;
}
.isActive {
color: #fff;
}
</style>
小结
比较简单的一个demo，就，也没想到有什么地方要特别交代的，代码都在上面，直接全部复制拉进一个vue页面就能用。本来想封装成一个组件，但想想也没有什么组件化的必要，就先这样，有问题可以问我。
注意
有小伙伴提问，就补一下：
就是有一个地方要注意一下，在vue中，mounted()阶段不会承诺所有的子组件也都一起被挂载，所以在此阶段，dom结构还没加载完的时候，如果直接在mounted里面操作dom比如要获取页面某些元素，console的时候能打出列表但length为0，直接用下标也无法获取对应内容而是直接出现undefined。
重现此问题的方法：
在mounted()里面对在页面上循环的数组内容进行初始化赋值，然后操作dom去取其中的元素。
解决方法：
想要确保所有的dom加载完，只要把相应的代码写在this.nextTick()的回调函数中就可以了。
标签：vue,仿写,refs,value,音上,length,nowDate,var,isActive 来源： https://blog.csdn.net/qq_36523214/article/details/107018622