API 시간별 데이터를 위한 반응형 JavaScript 캐러셀

완료된 솔루션을 불완전한 솔루션으로 착각할 뻔했고 날씨 앱의 다른 부분 작업으로 넘어갔습니다! 12시간의 날씨를 표시해야 하는 캐러셀을 작업하는 동안 오늘이 끝난 경우 다음 날의 시간을 가져오는 데 도움이 되는 기능을 추가하고 싶었습니다. 그런데 다음 날로 전환되지 않고 캐러셀이 계속 오늘의 시간 시작 부분으로 돌아가서 작업이 완료된 것으로 착각했습니다. 으악!

초기 과제

두 개의 'for 루프'에 대해 생각해 보았지만 'j'가 'i' 전체 길이에 대해 모든 요소를 ​​인쇄하는 것이 옳지 않다고 생각합니다. "원형 배열"에 모듈러스 연산자를 사용하는 방법에 대한 많은 블로그를 온라인에서 찾았습니다. 하지만 이것이 제 경우에 어떻게 도움이 될지는 몰랐습니다. 오늘의 시간을 반복한 다음 시간이 0으로 재설정되면 다음 날로 전환해야 했습니다. 많은 일이 일어나고 있었고 이를 더욱 간결하게 만들고 모든 것을 하나의 함수에 배치해야 했습니다. 힘든!

불완전한 해결책과 실수를 인식하기

하지만 온라인에서 정말 멋진 것을 찾았는데, 그것이 나에게 큰 문제를 해결할 수도 있습니다. 모듈러스 연산자가 원형 배열에 대해 어떻게 작동하는지 이해하는 데 도움이 되었습니다. 웹사이트의 예는 다음과 같습니다.

const daysOfWeek = [
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday",
  "Sunday",
];
// Function to cycle through the days of the week
function cycleDays(index) {
  return daysOfWeek[index % daysOfWeek.length];
}
// Let's cycle through the days:
for (let i = 0; i < 10; i++) {
  console.log(`Day ${i + 1}: ${cycleDays(i)}`);
}

결과는 다음과 같습니다.
1일차: 월요일
2일차: 화요일
...

제가 원했던 것은 daysOfWeek 배열로 돌아가서 '월요일'부터 시작하는 것이 아니라 완전히 다른 배열로 돌아가는 것이었습니다. 그래서 코드를 코드 편집기로 가져가서 조금 변경했습니다. 먼저 'currentIndex'라는 변수를 만들고 그 안에 모듈러스 연산을 저장했습니다. 그런 다음 콘솔에 기록했습니다. 6시 이후에 재설정되었다가 다시 0이 되었습니다.

그런데 콘솔에 잘못된 변수를 기록하고 있었습니다. 왜냐하면 if(currentIndex === 0)과 같이 if 조건을 작성하면 루프 시작 부분에서 실제로 새 배열을 향해 이동하게 되기 때문입니다. 그래서 이제 대신 "인덱스"를 기록했고 마침내 답을 찾았습니다! 새 코드를 테스트하기 위해 '개월'에 대한 새 배열을 만든 다음 전환을 시도했습니다. 그런데 또 다른 실수를 저질렀습니다. 다음을 보여드리겠습니다.

const daysOfWeek = [
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday",
  "Sunday",
];
const months = [
  'Jan',
  'Feb',
  'March'
];
// Function to cycle through the days of the week
function cycleDays(index) {
  let currentIndex = index % daysOfWeek.length
  console.log(index)
 if(index === 7){
   return months[currentIndex]
 } else {
     return daysOfWeek[currentIndex];
 }
}
// Let's cycle through the days:
for (let i = 0; i < 10; i++) {
  console.log(`Day ${i + 1}: ${cycleDays(i)}`);
}

"Jan"을 로깅한 후 원래 배열로 다시 전환되었습니다. 실수는 엄격한 동등성 검사였습니다. 대신 '크거나 같음'을 사용해야 했습니다. 연결하니 새 어레이로 성공적으로 전환되었습니다!

이제 배열 간 전환을 위한 마커를 사용하여 루프가 현재 시간부터 시작하여 멈추지 않고 계속되기를 원했습니다. 해당 마커는 배열 길이 대신 모듈러스 연산자가 됩니다. 배열의 길이를 사용할 수도 있는데, 이 경우에는 24이지만 지금은 하드코딩된 값인 24를 고수하고 있습니다.

currentIndex = (currentIndex 1) % 9

이 라인을 사용하면 루프 중에 중단하지 않고 1일차에서 2일차로 전환할 수 있습니다. 다음은 또 다른 시도입니다(API 결과와 유사하도록 배열을 업데이트했습니다).

const daysOfWeek = [
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday",
  "Sunday",
];
// Function to cycle through the days of the week
function cycleDays(index) {
  return daysOfWeek[index % daysOfWeek.length];
}
// Let's cycle through the days:
for (let i = 0; i < 10; i++) {
  console.log(`Day ${i + 1}: ${cycleDays(i)}`);
}

결과에서 흥미로운 점을 확인하세요.

index는 5, 월요일은 6, i는 0
index는 6, 월요일은 7, 나는 1
index는 7, 월요일은 8, 나는 2
index는 8, 월요일은 9, 나는 3
지수는 9이고 월요일은 10이고 나는 4입니다
index는 0, 월요일은 1, i는 5
지수는 0이고 화요일은 11
index는 1, 월요일은 12, i는 6
index는 2이고 월요일은 13이고 나는 7입니다
index는 3이고 월요일은 14이고 나는 8입니다
지수는 4이고 월요일은 ¬15이고 나는 9입니다

여기서 문제는 루프가 처음부터 한 번 실행되고 (if(currentIndex === 0)) 조건에 도달하면 배열을 전환한다는 것입니다. 그러나 currentIndex = 0(즉, 10 % 10 = 0)인 경우 if 조건이 실행되기 전에 hours[currentIndex]에 액세스합니다. 그렇기 때문에 전환 후에도 dayOne의 값(예: "1")이 표시됩니다.

이 문제를 해결하려면 currentIndex가 0이 된 직후 if 조건을 확인하여 로깅 전에 배열 전환이 발생하도록 해야 합니다.

console.log(index는 ${currentIndex}이고 월요일은 ${hours[currentIndex]}이고 i는 ${i}입니다)...

조건의 위치를 ​​변경하면 잘못된 어레이에 먼저 액세스하지 않고도 올바른 시간에 스위치가 발생하도록 보장할 수 있습니다.

const daysOfWeek = [
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday",
  "Sunday",
];
const months = [
  'Jan',
  'Feb',
  'March'
];
// Function to cycle through the days of the week
function cycleDays(index) {
  let currentIndex = index % daysOfWeek.length
  console.log(index)
 if(index === 7){
   return months[currentIndex]
 } else {
     return daysOfWeek[currentIndex];
 }
}
// Let's cycle through the days:
for (let i = 0; i < 10; i++) {
  console.log(`Day ${i + 1}: ${cycleDays(i)}`);
}

코드가 거의 다 왔습니다. 여기서 제가 저지르는 유일한 실수는 ‘화요일’ 대신 ‘월요일’을 기록하는 것입니다. 값은 '화요일' 배열에 속하지만 console.log 문을 잘못 작성했기 때문에 계속 '월요일'이라고 표시됩니다. 내 생각에는 두 개와 두 개를 함께 묶는 것이 꽤 어렵고 그림 로깅 VS가 실제로 html 요소에 값을 넣는 것은 매우 어렵습니다. 다음은 삼항 연산자를 사용한 약간의 개선 사항입니다(예, 배열 요소를 다시 바꿨습니다!):

const dayOne = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'];
const dayTwo = [11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
let hours = dayOne;
let currentHour = 5;
function cycleDays(currentHour) {
  let currentIndex = currentHour
  for (let i = 0; i < 10; i++) {
    console.log(`index is ${currentIndex} and dayOne is ${hours[currentIndex]}`)
    if(currentIndex === 0){
      hours = dayTwo
    console.log(`index is ${currentIndex} and dayTwo is ${hours[currentIndex]}`)
    } 
  currentIndex = (currentIndex + 1) % 9

} 
}
cycleDays(currentHour)

마지막으로 API에서 검색하는 3일 데이터에 대한 코드를 구성할 수 있습니다. 개선된 버전은 다음과 같습니다.

const daysOfWeek = [
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday",
  "Sunday",
];
// Function to cycle through the days of the week
function cycleDays(index) {
  return daysOfWeek[index % daysOfWeek.length];
}
// Let's cycle through the days:
for (let i = 0; i < 10; i++) {
  console.log(`Day ${i + 1}: ${cycleDays(i)}`);
}

동적 HTML 요소 만들기

12개의 div를 생성하는 방법에 대해 이야기해 보겠습니다. 12시간이 그 사이에 떠 있는 동안 상위 div의 양쪽에 버튼을 가져오는 방법을 상상할 수 없었습니다. 버튼과 동일한 상위에 12개의 div를 생성하려면 버튼 요소에 12개의 div와 다른 맞춤 설정이 필요합니다.

그들에게 자신만의 용기를 갖게 하는 것이 합리적이었습니다. 이 사실을 알아내는 데 시간이 좀 걸렸습니다. 실제로 잠을 자야 했습니다. 그리고 다음날 .btn-container를 입력하고 탭을 쳤더니 모든 것이 클릭되었습니다. John Smilga의 튜토리얼에서 모든 그룹화된 항목과 상위 컨테이너 내부의 자체 컨테이너를 보았지만 24시간 컨테이너 디자인을 시작할 때까지는 그러한 그룹화가 왜 필요한지 알지 못했습니다. 정말 '득템한 순간'이었습니다.

이제 며칠 동안 지속되는 또 다른 문제가 발생했습니다. 제가 튜토리얼에서 디자인한 슬라이더는 이 div만큼 어렵지 않았습니다. 튜토리얼에는 간단한 번역 값이 있었지만 지금은 문제가 꽤 많습니다. 작은 화면에서는 div가 서로 달라붙어 스파게티처럼 보이기 시작했습니다.

그리고 간단한 TranslateX 속성을 사용했을 때, 즉 픽셀을 '추측'했을 때 div가 완전히 왼쪽으로 이동한 후에도 많은 공간이 남아있었습니다. 이는 그들이 합친 너비보다 더 많은 것을 번역하고 있음을 의미했습니다. 추가 공간을 남기지 않고 div가 마지막에 정확히 중지되도록 하려면 적절한 값을 찾아야 했습니다. 오랜 시간 검색 끝에 다양한 솔루션을 제시하는 블로그를 발견했습니다.

많은 해결책이 있었습니다. 그 중 일부는 모듈로 연산자를 사용하고 있었는데, 이는 'for 루프'에서 날짜를 전환할 때 적용했던 순환 배열 논리를 생각나게 했습니다. 여기에는 Math.min, Math.max를 사용한 댓글이 많았습니다. 기본적으로 길이 끝에 도달할 때까지 컨테이너가 이동하게 됩니다. 훌륭한! 그럼 공백은 더 이상 없나요? 그렇게 빠르진 않아요...

이 예와 다른 점 중 하나는 내 컨테이너가 처음에 3~4개의 div를 표시한다는 것입니다. 따라서 오프셋이 0이면 상위 컨테이너에 이미 일정량의 길이가 있는 것입니다.

그들은 숫자 1을 추가하여 이미지를 표시했습니다. 따라서 캐러셀은 배열에 있는 이미지의 인덱스 번호에 따라 1개의 이미지를 앞으로 슬라이드합니다. 예를 들어 컨테이너에 10개의 이미지가 있고 currentImage 변수에 하나를 추가하면 Math.min에서 계산된 값은 '1'이 됩니다. 그런 다음 다른 '1'을 추가하면 현재 이미지는 2가 되고 2 mod 10은 2이므로 값은 Math.min에 의해 2가 됩니다. 이 특별한 예는 슬라이더의 게임을 변경합니다. 만들려고 노력하고 있어요. 내 눈을 사로잡은 코드는 다음과 같습니다.

const daysOfWeek = [
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday",
  "Sunday",
];
// Function to cycle through the days of the week
function cycleDays(index) {
  return daysOfWeek[index % daysOfWeek.length];
}
// Let's cycle through the days:
for (let i = 0; i < 10; i++) {
  console.log(`Day ${i + 1}: ${cycleDays(i)}`);
}

댓글에서 발견된 Richard Kichenama의 뛰어난 솔루션 뒤에 있는 뛰어난 점은 Math.max를 사용하여 값이 0 아래로 떨어지지 않도록 하고 Math.min을 사용하여 최대 길이에 도달할 때까지 변환 값을 계산한다는 것입니다. 이미지 배열입니다.

이제 공백 문제를 어떻게 해결해야 했을까요? 모든 하위 div의 여백을 고려하고 이를 합산하여 하위 div의 전체 길이를 얻어야 했습니다. 그런 다음 마지막 하위 항목에 도달하면 슬라이더의 이동이 중지되어야 합니다. 즉, 전체 너비는 모든 하위 항목 너비에 여백을 더한 합계입니다.

그러나 또 다른 문제가 발생했습니다. 일부 div가 이미 컨테이너에 표시되어 있어 다시 멈췄습니다. 다행히 친구가 와서 구해줬어요. 그들과 문제를 논의한 후 제가 이해한 내용은 다음과 같습니다.

어린이 div의 전체 길이를 고려할 수 없습니다. 컨테이너 길이만큼 공백이 거의 남아있었습니다. 해결책은 하위 컨테이너의 전체 길이(여백 포함)에서 상위 컨테이너의 길이를 빼는 것이었습니다. 이 조정으로 공백 문제가 해결되었습니다. 휴!

일부 코드 예제에는 일종의 '카운터'와 같은 변수가 있었습니다. 번역 속성에 대한 '카운터' 역할을 했습니다. 이 변수가 증가하면 번역 속성도 증가합니다. 다음 버튼과 이전 버튼에 대해 Math.min 및 Math.max 속성을 ​​분리했습니다. 그게 더 도움이 되고 쉬웠어요.

제가 참조한 예에서 코드는 슬라이드 거리를 결정하기 위해 배열의 길이를 사용했지만, 이전에 친구와 논의한 대로 공백을 고려해야 했기 때문에 배열의 길이를 빼야 했습니다. 컨테이너. 이런 식으로 마지막에 추가 공간을 피하면서 div가 특정 양만큼만 이동할 수 있도록 했습니다.

또한 John smilga의 튜토리얼 덕분에 항목의 너비, 높이, 상단 속성을 얻는 방법을 배웠습니다. 올바른 값을 적용하는 것도 힘들었고, 값 중 일부가 문자열이므로 숫자로 변환해야 한다는 사실을 알아내는 것도 힘들었습니다. 구글에서 쉽게 찾아 'parseFloat'을 소개받았습니다.

또한 큰 화면에 3개의 div만 표시하고 작은 화면에 2개의 div만 표시하는 방법을 알려주는 또 다른 유용한 리소스도 발견했습니다. 비결은 컨테이너 너비의 100%를 3(또는 작은 화면의 경우 2)으로 나누고 여백을 빼는 것이었습니다. 이는 컨테이너 내에 완벽하게 맞는 동일한 크기의 div를 허용했습니다(정말 영리합니다!). 마지막으로 최종 기능을 확인하려면 내 GitHub를 방문하세요. 여기 내 저장소에 대한 링크가 있습니다.

크기 조정을 위한 창 이벤트 리스너는 내 컨테이너의 정렬 문제를 해결하는 데 매우 중요했습니다. 크기 조정 시 오프셋을 재설정하여 "FOUC(Flash of Unstyled Content)" 문제를 해결했습니다. maxOffset 계산 방법을 이해하도록 도와준 친구에게 감사 인사를 전하고 싶습니다. 이는 정말 큰 변화였습니다.

마지막으로, 숙련된 모든 개발자에게 감사 인사를 전합니다. 여러분이 공유하는 모든 말은 해당 분야에 처음 입문하는 사람에게 도움이 됩니다. 따라서 우리는 배우고 싶어하는 반대편에서 기다리고 있으므로 귀하 쪽에서 정보를 계속 게시하십시오. 감사합니다!

위 내용은 API 시간별 데이터를 위한 반응형 JavaScript 캐러셀의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!