프론트 엔드에 타자기 플러그인을 구현하는 방법에 대한 자세한 설명

이 기사는 프론트 엔드에서 타자기 플러그인을 구현하는 방법에 대해 주로 설명합니다. 관심 있는 친구는 아래를 살펴보는 것이 모든 사람에게 도움이 되기를 바랍니다.

머리말

인터넷에서 발견한 dom 노드 수정 방법은 크로스엔드에서 사용할 수 없습니다. 호환성 솔루션은 다음과 같습니다. 콜백 함수를 사용하고 입력이 변경될 때마다 콜백을 호출합니다. 그리고 업데이트된 문자열을 버려 사용자가 후속 렌더링을 직접 처리할 수 있도록 하여 크로스 플랫폼이 가능하고 모든 터미널에서 정상적으로 사용할 수 있도록 합니다.

가장 간단한 타자기

const dom = document.querySelector('.content')
const data = '最简单的打字效果代码'.split('')
let index = 0
function writing(index) {
    if (index <p>간단히 타이머를 통해 텍스트를 추가하는 가장 간단한 타자기입니다. 이 예를 통해 구체적인 구현 아이디어를 얻을 수 있습니다. 물론 일부 기능 또는 성능 문제에는 여전히 필요한 문제가 있습니다. 지속적으로 최적화되어야 하지만 이를 기반으로 플러그인을 설계할 수 있습니다. </p><h2 data-id="heading-3">1. 역방향 삭제 애니메이션을 추가했습니다</h2><p>현재 타이핑 상태를 추가합니다</p><p>상태가 "typing"이면 앞으로 타이핑을 의미하고, 그렇지 않으면 역방향 삭제를 의미합니다. </p><p>그런 다음 삭제 부분을 처리합니다. 부분은 앞으로 추가하는 것과 동일하며, 마지막 문자를 삭제한 후 상태를 "입력 중"으로 변경해야 합니다</p><h2 data-id="heading-4">2 추가하는 속도를 제어할 수 있고, 뒤로 삭제하는 속도를 제어할 수 있습니다</h2><p> 그런 다음에도 할 수 있습니다. 현재 상태로 판단할 수 있는 앞으로 추가 또는 뒤로 삭제 속도를 사용자 정의하세요</p><h2 data-id="heading-5">3. 입력 텍스트는 단일 문자열 또는 문자열 배열이 될 수 있으며</h2><p> 문자열 전달을 지원합니다. 단일 문자열 대신 배열 , 실제 요구 사항은 여러 문자열 사이를 회전하는 것일 수 있기 때문입니다. 우선 단일 문자의 논리에 대해서는 말할 것도 없습니다. 문자열 배열의 경우 현재 타자기를 결정하려면 색인을 추가해야 합니다. </p><p>changeTextIndex 함수를 통해 현재 문자열을 지속적으로 업데이트하여 문자열 배열을 반복하는 효과를 얻을 수 있습니다</p><p>4. 지연을 켜세요</p><h2 data-id="heading-6">문자열의 시작과 끝 사이에 지연을 추가하세요</h2> <p> 각 타이핑 세션 후 대기 시간을 제어하는 ​​데 사용됩니다</p><p>5. 타이핑 중지</p><h2 data-id="heading-7">타자기가 너무 오랫동안 작동하는 경우 하단 레이어는 타이머를 통해 구현되므로 사용하지 않을 때는 꺼야 합니다. 예를 들어, 홈 페이지에서 타자기가 인스턴스화되었지만 다른 페이지에 들어갈 때 타자기가 더 이상 필요하지 않은 경우 이를 중지해야 합니다. </h2><p>현재 타자기를 중지하는 함수를 인스턴스에 바인딩합니다. 호출되면 다음 타이머에 null 값이 할당되어 타자기가 중지됩니다. </p><p>6. 콜백을 사용하여 미니 프로그램 문제 해결</p><h2 data-id="heading-8">위 코드에서는 dom 노드를 수정하여 타자기 문자를 변경했으므로 dom이나 dom 수정이 없는 미니 프로그램이나 기타 api에서는 그렇지 않습니다. 더 긴 작업 innerhtml일 경우 플러그인에서 지원하지 못하므로 호환이 됩니다. callBackText를 통해 현재 문자열을 저장한 후 이 문자열을 어떻게 사용할지 결정하는 함수를 사용합니다</h2><p>콜백이 있을 때. , 콜백을 통해 문자열 콜백의 우선 순위를 지정하고 비즈니스가 문자열을 가져오고 변경 로직을 자체적으로 처리하도록 하여 타이핑 효과가 더 이상 환경에 의존하지 않고 어디에서나 달성될 수 있도록 합니다. </p><p>여기 내 uniapp 프로젝트의 예가 있습니다</p><p></p><p><img src="https://img.php.cn/upload/article/000/000/020/a4e713f7104ede389fda47b0c65e7107-1.png" alt="프론트 엔드에 타자기 플러그인을 구현하는 방법에 대한 자세한 설명" loading="lazy"></p><p><img src="https://img.php.cn/upload/article/000/000/020/924bcf309a473f761e178442d2a375be-2.png" alt="프론트 엔드에 타자기 플러그인을 구현하는 방법에 대한 자세한 설명" loading="lazy">효과: </p><p></p><p><img src="https://img.php.cn/upload/article/000/000/020/924bcf309a473f761e178442d2a375be-3.gif" alt="프론트 엔드에 타자기 플러그인을 구현하는 방법에 대한 자세한 설명" loading="lazy">타사 typed.js 라이브러리</p><h2 data-id="heading-9">대부분의 논리는 구체적으로 </h2>[typed.js]-JavaScript를 참조합니다. 타이핑 애니메이션 라이브러리<p><a href="https://www.php.cn/link/128250b0e8e7e1ea6558acef9834081a" target="_blank" title="https://mattboldt.github.io/typed.js/docs/" ref="nofollow noopener noreferrer"><p>이 플러그인은 지원하는 기능이 typed.js만큼 좋지는 않지만 더 가볍고 필요한 기능을 더 많이 정의할 수 있습니다. </p>
<h2 data-id="heading-10">요약</h2>
<p> 가장 간단한 타자기 효과는 타이머를 사용하여 일정 시간이 지난 후 노드 내용 텍스트를 직접 업데이트하는 것입니다. 이를 기반으로 확장하여 보다 완전한 타자기 업데이트도 가능합니다. in.</p>
<p>추천 학습: "<a href="https://www.php.cn/course/list/1.html" target="_blank">웹 프론트엔드 개발</a>"</p></a></p>

위 내용은 프론트 엔드에 타자기 플러그인을 구현하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!