本文主要和大家分享JS实现逐字出现效果代码,最近看到一个简单实用的逐字出现动画效果,自己简单写了一个,小技巧,可以值得保存。
先上效果图:
源码:
<!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>
相关推荐:
Atas ialah kandungan terperinci JS实现逐字出现效果代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!