search

Home >Web Front-end >JS Tutorial >JS realizes the effect code appearing word by word

JS realizes the effect code appearing word by word

小云云
小云云Original
2018-03-26 17:37:122512browse

This article mainly shares with you the JS code to achieve the word-by-word appearance effect. Recently, I saw a simple and practical word-by-word animation effect. I simply wrote one myself. It is a small trick and is worth saving.

First the renderings:


Source code: 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="showStr"></p>
<p style="display:none" id="string">
逐字出来的效果，哈哈哈哈哈哈哈哈哈
</p>  
<script type="text/javascript">
  var index = 0;  
  var str = document.getElementById("string").innerHTML;  
  setInterval(function() {  
   if(index == str.length) { 
//清除定时器
clearInterval();
//若要让效果无限循环，把index归0即可
// index = 0;
}  
var a = document.getElementById("showStr")
a.innerText = str.substring(0, index++);
},400)
</script>
</body>
</html>

Related recommendations:

Information text appearing word by word in JS that imitates typing effects_Text effects

The above is the detailed content of JS realizes the effect code appearing word by word. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：js event stream and extended application examplesNext article：js event stream and extended application examples

Related articles

See more