Vue 패 키 징 리 셋 방지 시험 카운트다운 구성 요소 구현
<!-- -->
<template>
<div class="time">
<p>00:{{timerCount2}}:{{timerCount1}}</p>
<button @click="reset"> </button>
</div>
</template>
<script>
export default {
name: "Time",
data() {
return {
timeSeconds: 0,
timeMinutes: 0,
seconds: 59, //
minutes: 1, //
timer: null
};
},
methods: {
num(n) {
return n < 10 ? "0" + n : "" + n;
},
//
reset() {
sessionStorage.removeItem("answered");
window.location.reload();
localStorage.removeItem("startTime1");
localStorage.removeItem("startTime2");
clearInterval(this.timer);
},
//
clear() {
localStorage.removeItem("startTime1");
localStorage.removeItem("startTime2");
sessionStorage.setItem("answered", 1);
clearInterval(this.timer);
},
//
timing() {
let [startTime1, startTime2] = [ localStorage.getItem("startTime1"), localStorage.getItem("startTime2") ];
let nowTime = new Date().getTime();
if (startTime1) {
let surplus = this.seconds - parseInt((nowTime - startTime1) / 1000);
this.timeSeconds = surplus <= 0 ? 0 : surplus;
} else {
this.timeSeconds = this.seconds;
localStorage.setItem("startTime1", nowTime); //
}
if (startTime2) {
this.timeMinutes = startTime2;
} else {
this.timeMinutes = this.minutes;
localStorage.setItem("startTime2", this.minutes); //
}
this.timer = setInterval(() => {
if ( this.timeSeconds == 0 && this.timeMinutes != 0 && this.timeMinutes > 0 ) {
let nowTime = new Date().getTime();
this.timeSeconds = this.seconds;
localStorage.setItem("startTime1", nowTime);
this.timeMinutes--;
localStorage.setItem("startTime2", this.timeMinutes);
} else if (this.timeMinutes == 0 && this.timeSeconds == 0) {
this.timeSeconds = 0;
this.clear();
alert(" ");
} else {
this.timeSeconds--;
}
}, 1000);
}
},
mounted() {
if (sessionStorage.getItem("answered") != 1) {
this.timing();
}
},
computed: {
timerCount1() {
return this.timeSeconds < 10 ? "0" + this.timeSeconds : "" + this.timeSeconds;
},
timerCount2() {
return this.timeMinutes < 10 ? "0" + this.timeMinutes : "" + this.timeMinutes;
}
},
destroyed() {
//
if (this.timer) {
clearInterval(this.timer);
}
}
};
</script>
<style scoped>
.time {
color: #f72a3a;
font-weight: bold;
font-size: 26px;
}
</style>
여기 서 Vue 패 키 징 리 셋 방지 시험 카운트다운 구성 요소 의 실현 에 관 한 글 을 소개 합 니 다.더 많은 Vue 리 셋 방지 시험 카운트다운 구성 요소 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue Render 함수로 DOM 노드 코드 인스턴스 만들기render에서createElement 함수를 사용하여 DOM 노드를 만드는 것은 직관적이지 않지만 일부 독립 구성 요소의 디자인에서 특수한 수요를 충족시킬 수 있습니다.간단한 렌더링 예는 다음과 같습니다. 또한 v...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.