Texto "마법"escrito automaticamente com JavaScript
4470 단어 htmlwebdevjavascript
“Raios, herege! Estás a me dizer que os escritos surgirão sozinhos? Isso não é feitiço, ou bruxaria?”
Não é mágica. É 자바스크립트. Vamos desenrolar isso abaixo:
Antes de tudo, precisamos criar, no nosso HTML, um elemento para receber o feitiço, digo, o texto criado. Pode ser um parágrafo (p) ou até um cabeçalho (h1, h2...). Basta ser de texto e ter um id. Lembrando que o id precisa ser exclusivo desse elemento.
<h1 id="magic-text"></h1>
Pro nosso caso, vamos usar um h1 com a id magic-text.
Seguida, criamos 및 importamos o arquivo JavaScript que, pro nosso exemplo, será o script.js:
<script src="script.js"></script>
já no script.js, vamos criar uma constante para interagir com nosso h1, usando o método querySelector, que nos permite selecionar elementos usando os mesmos seletores que vemos no CSS.
nosso caso, vamos usar a id precedida pelo #.
const magicTextHeader = document.querySelector('#magic-text');
O método querySelector pode ser usado, tanto no documento, como em outros elementos, após declarados, selecionando seus revivos filhos.
Em seguida, criamos uma constante com o texto a ser usado:
const text = 'Texto inserido automagicamente com JavaScript!';
Por fim, declaramos uma variável que servirá para nos ajudar a "percorrer"o texto:
let indexCharacter = 0;
writeText()에 텍스트를 반환하는 기능:
function writeText() {
magicTextHeader.innerText = text.slice(0, indexCharacter);
indexCharacter++;
if(indexCharacter > text.length - 1) {
setTimeout(() => {
indexCharacter = 0;
}, 2000);
}
}
원래는 내부 텍스트에 h1을 포함하거나 .slice() 방법을 사용하거나 일정한 텍스트를 수정하지 않고 문자를 사용하거나 배열을 사용하는 경우가 많습니다. sintaxe do .slice() é
.slice(a,b)
, onde a é a chave inicial do trecho a ser retornado e b é a chave final desse mesmo trecho. 첫 번째 텍스트가 다시 시작되고, 0과 최종적으로 인덱스 캐릭터가 용맹해지며, 캐릭터가 점점 더 증가하고, 보증이 실행되기 전에 기능이 다시 작동하고, 문자가 더 많이 사용됩니다.Em seguida, usamos uma condicional para verificar se a indexCharacter é igual a última posição do texto (
text.length - 1
; como a primeira chave é 0, a última será o tamanho (length) do texto menos 1). Verdadeira에 대한 조건, indexCharacter será zerada, depois de um setTimeout de 2000 miissegundos, fazendo com que o texto volte a ser "digitado"do início.E para executar essa função de forma contínua, garantindo or incremento da indexCharacter e o efeito desejado para nosso texto, usamos um setInterval que executará a função writeText a cada 100 miissegundos:
setInterval(writeText, 100);
E a mágica está concluída!
Você pode ver um exemplo aqui .
E conferir minha versão do código aqui .
E, opcionalmente, usar os estilos que usei lá:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
background: darkred;
color: #FFF;
}
h1 {
font-size: 2rem;
max-width: 400px;
text-align: center;
}
Esse artigo foi inspirado em um do do Florin Pop, que tem tutorialis e desafios incríveis pra quem está iniciando. Conteúdo em inglês.
O arqueiro na capa ea zoeira com a fogueira são uma menção honrosa a comunidade, a melhor turma do Feudo Brasil.
Nos vemos na próxima! 그란데 아브라소!
Reference
이 문제에 관하여(Texto "마법"escrito automaticamente com JavaScript), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/owilliamgoncalves/texto-magico-escrito-automaticamente-com-javascript-1akh텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)