saber 酱的抱枕

Fly me to the moon

04/5
2015
学习

js制作文字逐字出现的效果

saber 撰写 2条回复 1,852次查看

js文字逐字出现的效果
使用了js的substring()方法截取字符串，并使用定时器控制字符增加的间隔时间。代码如下：

    <div class="textbox" style="text-align: center;font-family:  Microsoft YaHei;"></div>
    <script type="text/javascript">
    	var textword="Darkness cannot drive out darkness; only light can do that. Hate cannot drive out hate; only love can do that.";
    	var textbox=document.getElementsByClassName("textbox")[0];
    	var textlength=1;
    	var startAdd;
    	function textwordAdd () {
    		textbox.innerText=textword.substring(0, textlength);
    		if (textlength<=textword.length) {
    			textlength++;
    		}else{
    			clearInterval(startAdd);
    		};
    	}
    	startAdd=setInterval(textwordAdd, 100);
    </script>

定时器单独设置了一个变量。如果直接用window.setInterval和window.clearInterval的方式的话，清除定时器是无效的。
参考：JS截取字符串substr 和 substring方法

js制作文字逐字出现的效果