JavaScript의 티커 기능 이해
Ticker는 디지털 사이니지 애플리케이션이나 홍보 매체로 자주 사용되는 텍스트를 실행합니다. 이 텍스트는 관심을 끄는 방식으로 뉴스, 광고, 공지 사항 등의 정보를 표시할 수 있습니다. 텍스트 실행은 일반적으로 HTML 및 CSS로 구현되며 JavaScript 없이도 작동할 수 있습니다. 하지만 많은 소프트웨어에서도 더 나은 일정 관리 및 제어를 위해 이 기능을 제공합니다.
이 글에서는 제가 Codewars에 대한 도전 과제를 통해 접한 JavaScript의 티커 기능이 어떻게 작동하는지에 대해 설명합니다. 이 기능을 사용하면 JavaScript를 사용하여 스크롤 텍스트 효과를 만들 수 있습니다.
티커는 가로로 이동하는 텍스트로, 최신 뉴스, 공지사항, 광고 등 지속적으로 업데이트되는 정보를 표시하기 위해 다양한 애플리케이션에서 자주 사용됩니다. 이러한 효과는 디지털 화면이나 전자 게시판에서 확인할 수 있으며, 일반적으로 HTML, CSS, JavaScript를 사용하여 구현할 수 있습니다.
아래에서 논의할 JavaScript의 티커 기능은 웹 애플리케이션에서 동적 실행 텍스트 효과를 생성하기 위한 솔루션을 제공합니다.
다음은 우리가 논의할 티커 함수 코드입니다.
const ticker = (text, width, tick) => {
const display = ' '.repeat(width); // 1
text = display + text + display; // 2
tick = tick % (text.length - width); // 3
return text.slice(tick, tick + width); // 4
}
이 함수에는 세 가지 매개변수가 있습니다.
다음은 이 기능의 각 단계에 대한 기술적인 설명입니다.
const display = ' '.repeat(width);
첫 번째 단계에서는 반복() 메서드를 사용하여 너비만큼 공백이 포함된 빈 문자열을 만듭니다. Repeat() 함수는 지정된 문자(이 경우 공백)를 width에 지정된 횟수만큼 반복합니다.
예:
너비가 5인 경우 표시 변수에는 5개의 공백으로 구성된 문자열 ''이 포함됩니다.
text = display + text + display;
두 번째 단계에서는 텍스트(텍스트) 앞뒤에 표시 문자열(공백)을 추가합니다. 이렇게 하면 텍스트 양쪽에 여유 공간이 있어 텍스트가 잘리지 않고 이동(스크롤)할 수 있는 공간이 제공됩니다.
예:
주어진 텍스트가 'Hello'이고 너비가 5라고 가정합니다. 그러면 이 줄 뒤의 텍스트는 다음과 같습니다.
const ticker = (text, width, tick) => {
const display = ' '.repeat(width); // 1
text = display + text + display; // 2
tick = tick % (text.length - width); // 3
return text.slice(tick, tick + width); // 4
}
이렇게 하면 텍스트의 왼쪽과 오른쪽에 충분한 여백이 생겨서 원활한 이동이 가능합니다.
const display = ' '.repeat(width);
세 번째 단계에서는 모듈러스 연산자(%)를 사용하여 눈금 값이 유효한 범위 내에 있고 공백으로 묶인 텍스트의 길이를 초과하지 않는지 확인합니다.
text.length - 너비 값은 래핑된 텍스트의 전체 길이(공백 포함)에서 표시하려는 디스플레이 너비(너비)를 뺀 값입니다. 이렇게 하면 눈금으로 지정된 텍스트 이동이 표시 가능한 텍스트 길이를 초과하지 않게 됩니다.
예:
공백을 추가한 후 텍스트의 길이가 15(예: ' Hello ')이고 너비가 5이면 text.length - 너비가 10이 됩니다. 즉, 눈금이 범위 내에 있는지 확인하기만 하면 됩니다. 0~9. 이는 누락된 부분 없이 텍스트의 움직임이 지속적으로 유효하도록 보장합니다.
text = display + text + display;
마지막 단계에서는 슬라이스() 메서드를 사용하여 눈금 위치에서 시작하여 눈금 너비 위치까지 텍스트 문자열의 일부를 가져옵니다. Slice() 함수는 해당 위치에 해당하는 문자열 부분을 반환합니다.
예:
예를 들어, Tick = 3이고 width = 5인 경우 코드 Slice(3, 8)은 문자열 ' Hello '에서 하위 문자열 'Hello'를 생성합니다.
이런 방식으로 너비와 일치하는 길이로 텍스트의 일부를 표시합니다. 이 함수가 다른 눈금 값으로 호출될 때마다 표시된 텍스트가 이동하여 이동 또는 스크롤 효과를 생성합니다.
코드에서 이 함수를 사용하는 예를 살펴보겠습니다.
' Hello '
발생 과정은 다음과 같습니다.
다음 호출에서 틱 값을 높이면 텍스트가 더 이동하여 표시되는 텍스트 부분이 변경됩니다.
티커 함수를 호출할 때마다 틱 값이 변경되기 때문에 이동 효과가 생성됩니다. 눈금 값이 증가하면 표시되는 텍스트 부분도 변경됩니다. 틱이 텍스트를 동적으로 스크롤하므로 움직이는 효과를 제공합니다.
이 효과를 추가로 테스트하려면 틱 값을 주기적으로 증가시켜 루프에서 티커 함수를 호출할 수 있습니다. 예를 들어 setInterval()을 사용하여 몇 초마다 디스플레이를 업데이트합니다.
비슷한 도전에 관심이 있으시면 Codewars를 통해 이 기능을 발견했는데, 이는 JavaScript 프로그래밍 기술을 향상시키는 재미있는 연습입니다.
행운을 빕니다. 이 기사가 JavaScript에서 티커 효과가 어떻게 작동하는지 이해하는 데 도움이 되기를 바랍니다!
위 내용은 JavaScript의 티커 기능 이해: 작동 방식 및 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
