21.04.04 15:13 작성
·
279
2
ㅠ.ㅠ 저만 이해못하는지 질문이없네요..
엔드포인트로 나누어서 인덱스+1 곱하시는 로직이
어떤 원리인지 궁금함미다...
답변 2
1
2021. 04. 04. 18:11
.status div 태그의 색은 흰색으로 지정하고,
.statusBar div 태그의 색은 다른색으로 지정한 다음,
.statusBar div 태그의 width값을 바꾸어가며 진행창을 구현하고자 합니다.
(100 / 모든 질문의 개수) 를 한다면, 질문 한개당 몇 %의 width값이 할당되어야 하는지 알 수 있습니다.
사용자가 첫 번째 질문에 대한 응답을 할 차례라면,
width 값은 ( 100 / 모든 질문의 개수 ) * 1 이 되어야 할 것입니다.
두 번째 질문에 대한 응답을 할 차례라면,
width 값은 ( 100 / 모든 질문의 개수 ) * 2 가 되어야 할 것입니다.
저희의 qIdx 값은 0부터 시작하기에 +1을 해주어 계산한 것입니다.
혹시 이해가 안되신다면, 모든 질문의 개수가 10개라고 가정하여 직접 계산해보시면 될 것 같습니다.
혹시 도움이 되셨을까요?
0
qIdx = 0
:
(100 / endPoint) * (qIdx + 1)
(100 / 12) * (0 + 1)
(100 / 12) * 1
약 8.33%
qIdx = 1
:
(100 / endPoint) * (qIdx + 1)
(100 / 12) * (1 + 1)
(100 / 12) * 2
약 16.67%
qIdx = 2
:
(100 / endPoint) * (qIdx + 1)
(100 / 12) * (2 + 1)
(100 / 12) * 3
약 25%
qIdx = 3
:
(100 / endPoint) * (qIdx + 1)
(100 / 12) * (3 + 1)
(100 / 12) * 4
약 33.33%
qIdx = 4
:
(100 / endPoint) * (qIdx + 1)
(100 / 12) * (4 + 1)
(100 / 12) * 5
약 41.67%
qIdx = 5
:
(100 / endPoint) * (qIdx + 1)
(100 / 12) * (5 + 1)
(100 / 12) * 6
약 50%
qIdx = 6
:
(100 / endPoint) * (qIdx + 1)
(100 / 12) * (6 + 1)
(100 / 12) * 7
약 58.33%
qIdx = 7
:
(100 / endPoint) * (qIdx + 1)
(100 / 12) * (7 + 1)
(100 / 12) * 8
약 66.67%
qIdx = 8
:
(100 / endPoint) * (qIdx + 1)
(100 / 12) * (8 + 1)
(100 / 12) * 9
약 75%
qIdx = 9
:
(100 / endPoint) * (qIdx + 1)
(100 / 12) * (9 + 1)
(100 / 12) * 10
약 83.33%
qIdx = 10
:
(100 / endPoint) * (qIdx + 1)
(100 / 12) * (10 + 1)
(100 / 12) * 11
약 91.67%
qIdx = 11
:
(100 / endPoint) * (qIdx + 1)
(100 / 12) * (11 + 1)
(100 / 12) * 12
정확히 100%
2021. 04. 04. 18:15
허으............... 친절한설명 감사합니다 ㅠㅠ
수알못인 저를 이해시켜주셔서 감사해요..
앞으로 프로그레스바는 저도 할수 있을것 같습니다 덕분에..
앞으로도 많은 강의 부탁드려요 진짜 너무최고에요..
꼭꼭 수강할게요 감사해요^^