如何在网页中实现打字效果

如何在网页中实现打字效果

具体步骤：

1.先插入要显示打字效果的容器。

<span id="demo"></span>

2.加入脚本。

<script defer>

var text="JavaScript实现的打字效果"

var delay=200

var i=0

function scrollit(){

demo.innerText=text.slice(0,i++)+"_"         

if(i>text.length){

    i=0

    setTimeout("scrollit()",delay*10)       

}

else setTimeout("scrollit()",delay)             

}

scrollit()

</script>

3.完整代码。

<span id="demo"></span>

<script defer>

var text="JavaScript实现的打字效果"    //预定文字

var delay=200                         //文字出现的时间间隔

var i=0                               //初始化变量 i

function scrollit(){

//设置 id 为 demo 的对象内的文字为从变量 text 的 0 开始到 i 间的文字加"_"

demo.innerText=text.slice(0,i++)+"_"   

if(i>text.length){              //当 i 大于 text 的文本长度时

    i=0                           //重设 i 为 0，使文字重新从第一个文字出现

//延时执行scrollit()函数,delay*10是为了让显示完整文字的时间长一点

    setTimeout("scrollit()",delay*10)  

}

    //否则在delay毫秒后再次执行scrollit()函数

else setTimeout("scrollit()",delay)             

}

scrollit() //调用scrollit()函数

</script>