效果图如下
用了比较笨的方法settimeout,实现的
1、有一个dom,用背景图片
2、分别定义了五个点测试
3、js定义了一个函数用来每个一秒增加一个点显示
4、显示完成之后,隐藏所有的点
timeDo() {
for (let i = 1; i <= 5; i++) {
setTimeout(() => {
let dom = document.querySelector(`#dot${i}`)
dom.style.display = 'block'
}, 1000 * i);
}
setTimeout(() => {
for (let i = 1; i <= 5; i++) {
let dom = document.querySelector(`#dot${i}`)
dom.style.display = 'none'
}
}, 6000);
}
5、定义一个计时器,重复显示
this.interval = setInterval(() => {
console.log(123);
this.timeDo()
}, 6000)
完整代码
<template>
<div class="container">
<!-- 24个 -->
<span id="dot1" style="display: none;"></span>
<span id="dot2" style="display: none;"></span>
<span id="dot3" style="display: none;"></span>
<span id="dot4" style="display: none;"></span>
<span id="dot5" style="display: none;"></span>
</div>
</template>
<script>
export default {
data() {
return {
interval: null
}
},
mounted() {
this.init()
},
methods: {
init() {
this.timeDo()
this.interval = setInterval(() => {
console.log(123);
this.timeDo()
}, 6000)
},
timeDo() {
for (let i = 1; i <= 5; i++) {
setTimeout(() => {
let dom = document.querySelector(`#dot${i}`)
dom.style.display = 'block'
}, 1000 * i);
}
setTimeout(() => {
for (let i = 1; i <= 5; i++) {
let dom = document.querySelector(`#dot${i}`)
dom.style.display = 'none'
}
}, 6000);
}
},
destroyed() {
if(this.interval) {
clearInterval(this.interval)
}
this.interval = null
}
}
</script>
<style lang="less" scoped>
.container {
width: 532px;
height: 532px;
background: url('@/assets/circle_1.png') no-repeat center;
position: relative;
#dot1 {
width: 28px;
height: 38px;
position: absolute;
left: 250px;
top: 410px;
background-color: #15DBFF;
border-radius: 5px;
}
#dot2 {
width: 28px;
height: 38px;
position: absolute;
left: 207px;
top: 404px;
background-color: #15DBFF;
border-radius: 5px;
transform: rotate(14deg);
}
#dot3 {
width: 28px;
height: 38px;
position: absolute;
left: 168px;
top: 387px;
background-color: #15DBFF;
border-radius: 5px;
transform: rotate(30deg);
}
#dot4 {
width: 28px;
height: 38px;
position: absolute;
left: 136px;
top: 362px;
background-color: #15DBFF;
border-radius: 5px;
transform: rotate(45deg);
}
#dot5 {
width: 28px;
height: 38px;
position: absolute;
left: 110px;
top: 328px;
background-color: #15DBFF;
border-radius: 5px;
transform: rotate(60deg);
}
}
</style>
图片资源地址:circle_1.png · NevermoreSF/resources - 码云 - 开源中国 (gitee.com)
xdm有更好的实现方法,请指导下