文字打字機效果,可換字體樣式
阿新 • • 發佈:2017-08-07
back cnblogs time rand 是個 child 好日子 blog var
<div id="text">你好,歡迎光臨,今天是個好日子!</div> <script> $(function() { daziji("#text", 150); //調用打字機函數 }) </script>
js
function daziji(dazijiDiv, dazijiTime) { var text1 = $(dazijiDiv).text(), text2 = text1, lentext = text2.length, textArray = text2.split(""); $(dazijiDiv).empty();for (i = 0; i < text2.length; i++) { $(dazijiDiv).append(‘<span style="display:none">‘ + textArray[i] + ‘</span>‘); } dazijiShow(dazijiDiv, lentext, dazijiTime); } var dazijiN = 0; function dazijiShow(d, e, f) { $(d).children("span").eq(dazijiN).show().css({ color:‘#‘ + Math.floor(Math.random() * 16777215).toString(16) }); if (dazijiN < e) { dazijiN++; setTimeout("dazijiShow(‘" + d + "‘," + e + "," + f + ")", f) } else { dazijiN = 0; setTimeout("dazijiShow(‘" + d + "‘," + e + "," + f + ")", f); }; }
文字打字機效果,可換字體樣式