이은진
2024-08-14
240814 이은진 단어장3 수정
@618dff29bc0ec0c71b133d54740d8c2fff980839
--- client/views/pages/main/Chapter/Chapter2_2.vue
+++ client/views/pages/main/Chapter/Chapter2_2.vue
... | ... | @@ -1,10 +1,10 @@ |
| 1 | 1 |
<template> |
| 2 | 2 |
<div id="Chapter2_2" class="content-wrap"> |
| 3 | 3 |
<div style="margin: 30px 0px 50px; width: 20%"> |
| 4 |
- <router-link to="/MyPlan.page"> |
|
| 5 |
- <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div> |
|
| 6 |
- </router-link> |
|
| 7 |
- </div> |
|
| 4 |
+ <router-link to="/MyPlan.page"> |
|
| 5 |
+ <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div> |
|
| 6 |
+ </router-link> |
|
| 7 |
+ </div> |
|
| 8 | 8 |
<div class="title-box mb25 flex align-center mt40"> |
| 9 | 9 |
<span class="title mr40">1. Hello WORLD</span> |
| 10 | 10 |
<span class="subtitle">my name is dd</span> |
... | ... | @@ -17,13 +17,15 @@ |
| 17 | 17 |
<div class="flex align-center mb30"> |
| 18 | 18 |
<p class="subtitle2 mr20">카드를 뒤집어 보세요.</p> |
| 19 | 19 |
<!-- <button><img src="../../../../resources/img/btn10_s.png" alt=""> |
| 20 |
- </button> --></div><div class="time-bg"> |
|
| 21 |
- <div> |
|
| 22 |
- <div class="time"> |
|
| 23 |
- <p class="second">{{timer}}</p>
|
|
| 24 |
- <p class="text">sec</p> |
|
| 25 |
- </div> |
|
| 20 |
+ </button> --> |
|
| 26 | 21 |
</div> |
| 22 |
+ <div class="time-bg"> |
|
| 23 |
+ <div> |
|
| 24 |
+ <div class="time"> |
|
| 25 |
+ <p class="second">{{ timer }}</p>
|
|
| 26 |
+ <p class="text">sec</p> |
|
| 27 |
+ </div> |
|
| 28 |
+ </div> |
|
| 27 | 29 |
</div> |
| 28 | 30 |
|
| 29 | 31 |
<div class="imgGroup"> |
... | ... | @@ -32,7 +34,6 @@ |
| 32 | 34 |
<div class="listenGroup"> |
| 33 | 35 |
<img :src="item.imgSrc1"> |
| 34 | 36 |
<p class="textbox"><img :src="item.imgSrc"></p> |
| 35 |
- |
|
| 36 | 37 |
</div> |
| 37 | 38 |
<div class="listenGroup" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
|
| 38 | 39 |
<img :src="item.imgSrc2"> |
... | ... | @@ -54,11 +55,14 @@ |
| 54 | 55 |
data() {
|
| 55 | 56 |
return {
|
| 56 | 57 |
items: [ |
| 57 |
- { imgSrc1: 'client/resources/img/img49_s.png', imgSrc2: 'client/resources/img/img50_s.png', imgSrc: 'client/resources/img/img59_36s.png', isSecondImageVisible: false, title: 'a' },
|
|
| 58 |
- { imgSrc1: 'client/resources/img/img49_s.png', imgSrc2: 'client/resources/img/img50_s.png', imgSrc: 'client/resources/img/img59_36s.png', isSecondImageVisible: false, title: 'a' },
|
|
| 59 |
- { imgSrc1: 'client/resources/img/img49_s.png', imgSrc2: 'client/resources/img/img50_s.png', imgSrc: 'client/resources/img/img59_36s.png', isSecondImageVisible: false, title: 'a' },
|
|
| 60 |
- { imgSrc1: 'client/resources/img/img49_s.png', imgSrc2: 'client/resources/img/img50_s.png', imgSrc: 'client/resources/img/img59_36s.png', isSecondImageVisible: false, title: 'a' }
|
|
| 61 |
- ] |
|
| 58 |
+ { imgSrc1: 'client/resources/img/img49_s.png', imgSrc2: 'client/resources/img/img50_s.png', imgSrc: 'client/resources/img/img77_41s.png', isSecondImageVisible: false, title: 'america' },
|
|
| 59 |
+ { imgSrc1: 'client/resources/img/img49_s.png', imgSrc2: 'client/resources/img/img50_s.png', imgSrc: 'client/resources/img/img47_s.png', isSecondImageVisible: false, title: 'airplane' },
|
|
| 60 |
+ { imgSrc1: 'client/resources/img/img49_s.png', imgSrc2: 'client/resources/img/img50_s.png', imgSrc: 'client/resources/img/img75_41s.png', isSecondImageVisible: false, title: 'cat' },
|
|
| 61 |
+ { imgSrc1: 'client/resources/img/img49_s.png', imgSrc2: 'client/resources/img/img50_s.png', imgSrc: 'client/resources/img/img74_41s.png', isSecondImageVisible: false, title: 'mountain' }
|
|
| 62 |
+ ], |
|
| 63 |
+ timer: 0, |
|
| 64 |
+ intervalId: null, |
|
| 65 |
+ currentIndex: 0, |
|
| 62 | 66 |
}; |
| 63 | 67 |
}, |
| 64 | 68 |
methods: {
|
... | ... | @@ -67,7 +71,48 @@ |
| 67 | 71 |
}, |
| 68 | 72 |
toggleImage(index) {
|
| 69 | 73 |
this.items[index].isSecondImageVisible = !this.items[index].isSecondImageVisible; |
| 74 |
+ }, |
|
| 75 |
+ startTimer() {
|
|
| 76 |
+ // 현재 실행 중인 타이머가 있다면 정리 |
|
| 77 |
+ if (this.intervalId) {
|
|
| 78 |
+ clearInterval(this.intervalId); |
|
| 70 | 79 |
} |
| 80 |
+ |
|
| 81 |
+ // 타이머 및 이미지 토글 상태 초기화 |
|
| 82 |
+ this.timer = 0; |
|
| 83 |
+ this.currentIndex = 0; // 현재 타이머 인덱스를 추적 |
|
| 84 |
+ |
|
| 85 |
+ // 시작 타이머 설정 |
|
| 86 |
+ this.runTimer(); |
|
| 87 |
+ }, |
|
| 88 |
+ |
|
| 89 |
+ runTimer() {
|
|
| 90 |
+ // 반복 타이머 설정 |
|
| 91 |
+ this.intervalId = setInterval(() => {
|
|
| 92 |
+ if (this.currentIndex == this.items.length) |
|
| 93 |
+ return; |
|
| 94 |
+ if (this.timer < 5) {
|
|
| 95 |
+ this.timer++; |
|
| 96 |
+ } else {
|
|
| 97 |
+ // 타이머가 끝났을 때, 다음 타이머 설정 |
|
| 98 |
+ this.timer = 0; |
|
| 99 |
+ |
|
| 100 |
+ if (this.currentIndex < this.items.length) {
|
|
| 101 |
+ // 현재 인덱스에 해당하는 아이템으로 이미지 토글 |
|
| 102 |
+ this.toggleImage(this.currentIndex); |
|
| 103 |
+ this.currentIndex++; |
|
| 104 |
+ } else {
|
|
| 105 |
+ // 모든 타이머가 완료되었으면 타이머 정리 |
|
| 106 |
+ clearInterval(this.intervalId); |
|
| 107 |
+ this.intervalId = null; |
|
| 108 |
+ console.log('모든 타이머가 완료되었습니다.');
|
|
| 109 |
+ } |
|
| 110 |
+ } |
|
| 111 |
+ }, 1000); |
|
| 112 |
+ }, |
|
| 113 |
+ }, |
|
| 114 |
+ mounted() {
|
|
| 115 |
+ this.startTimer() |
|
| 71 | 116 |
} |
| 72 | 117 |
} |
| 73 | 118 |
|
... | ... | @@ -86,6 +131,6 @@ |
| 86 | 131 |
|
| 87 | 132 |
.listenGroup .textbox {
|
| 88 | 133 |
top: 50%; |
| 89 |
- left: 50%; |
|
| 134 |
+ left: 50%; |
|
| 90 | 135 |
} |
| 91 | 136 |
</style>(No newline at end of file) |
Add a comment
Delete comment
Once you delete this comment, you won't be able to recover it. Are you sure you want to delete this comment?