You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
63 lines
1.3 KiB
63 lines
1.3 KiB
<template> |
|
<div id="home-screen-wrapper"> |
|
<div class="ceshi"> |
|
<img id="imgs" src="" width="100%"> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script lang="ts" setup> |
|
import { time } from 'console'; |
|
import { ref, onMounted } from 'vue'; |
|
|
|
const aniImgs: any = ref([]); |
|
const timer: any = ref(); |
|
const imgs: any = ref(); |
|
const index = ref(0) |
|
|
|
onMounted(() => { |
|
imgs.value = document.getElementById('imgs'); |
|
// for (let i = 0; i <= 79; i++) { |
|
// aniImgs.value.push(`/src/assets/imgs/home-screen/切图-关机时循环_000${i < 10? '0' + i: i}`); |
|
// } |
|
run(); |
|
console.log(aniImgs.value); |
|
}) |
|
|
|
const run = () => { |
|
// 清除定时器 |
|
if (timer.value) { |
|
clearInterval(timer.value); |
|
timer.value = null; |
|
} |
|
change(); |
|
timer.value = setInterval(() => { |
|
index.value++; |
|
if (index.value > 79) { |
|
index.value = 0; |
|
} |
|
change(); |
|
}, 1000 / 24); |
|
} |
|
|
|
const change = () => { |
|
if (imgs.value) { |
|
imgs.value.src = `/src/assets/imgs/home-screen/切图-关机时循环_000${index.value < 10? '0' + index.value: index.value}.png`; |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
#home-screen-wrapper { |
|
width: 100vh; |
|
height: 100vh; |
|
background: rgb(15, 188, 102); |
|
|
|
.ceshi { |
|
width: 100vw; |
|
} |
|
|
|
#imgs { |
|
width: 100%; |
|
} |
|
}</style> |