순수 자바 스크립트를 사용하여 유형 효과 만들기

3030 단어 htmlcssjavascript
당신이 이것을 읽고 있다면 당신은 기본적인 수학 및 자바스크립트 지식을 가지고 있을 수 있으므로 여기서는 외부 라이브러리 없이 순수 자바스크립트를 사용하여 간단한 타자기 효과를 만드는 방법을 가르쳐 드리겠습니다.

그래서 그것을 시작하자
먼저 효과/애니메이션을 추가하려는 요소를 만듭니다.

<h1 id="type"></h1>

여기에서 <h1> 태그와 함께 id="type" 태그를 사용하고 있습니다.
이제 먼저 변수를 정의하는 자바스크립트 코드를 살펴보겠습니다.

var i = 0 //no of words which will be 0 at first
var txt = "the text u want to display" 
var speed = 50 // try changing this to experiment ;)

이제 여기서 현실이 되자

function typeWriter() {
  if (i < txt.length) {
    document.getElementById("type").innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
}

이제 내가 여기서 한 일을 말하겠습니다. 최종 길이가 만족될 때까지 우리가 공급한 속도로 각 문자를 표시하여 유형 효과를 만듭니다. :)
이제 실행하고 싶을 때 함수를 호출합니다. 여러 가지 방법으로 호출할 수 있지만 몇 가지 간단한 방법은 onclick 또는 onload입니다.
여기 내가 그것을 사용한 방법입니다

<body onload="typeWriter()">
  <h1 id="type"></h1>
</body>

Here is a code for those who will skip all the above thing and just want the code
[LeetCode] 824. Goat Latin
centos 7 nginx 를 설치 하 는 두 가지 방법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage