Heim > Artikel > Web-Frontend > JS erkennt, dass der Effektcode Wort für Wort erscheint

JS erkennt, dass der Effektcode Wort für Wort erscheint

小云云Original: 2018-03-26 17:37:122481Durchsuche

Dieser Artikel teilt Ihnen hauptsächlich den JS-Code mit, um den wortweisen Erscheinungsbildeffekt zu erzielen. Kürzlich habe ich einen einfachen und praktischen wortweisen Animationseffekt gesehen und es lohnt sich, es zu sparen.

Zuerst das Rendering:

Quellcode:

<!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>

Verwandte Empfehlungen:

Informationstext, der Wort für Wort in JS erscheint und Tippeffekte imitiert_Texteffekte

Das obige ist der detaillierte Inhalt vonJS erkennt, dass der Effektcode Wort für Wort erscheint. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：js-Ereignisstrom und erweiterte AnwendungsbeispieleNächster Artikel：js-Ereignisstrom und erweiterte Anwendungsbeispiele

In Verbindung stehende Artikel

Mehr sehen