JS让网页上文字出现键盘打字的打字效果

浏览数：22 / 时间：2015年06月09日

　一个挺简单的网页特效：JS让网页上文字出现键盘打字的打字效果实现

　　演示地址：http://codepen.io/guihailiuli/pen/jPOYMZ

以代码形式实现过程分析：

<html>
<head>
<title>打字效果</title>
<meta http-equiv="Content-Type" Content="text/html;charset=gb2312" />
<style type="text/css">
body{
    font-size:14px;
    font-color:#purple;
    font-weight:bolder;
}
</style>
</head>
<body>
最新内容: <a id = "Hotnews" href="" target="_blank"> </a>   
<script language="javascript">
    var NewsTime = 2000;       //每条信息完整出现后停留时间
    var TextTime = 100;       //每条信息中的字出现的间隔时间
    
    var newsi = 0;
    var txti = 0;
    var txttimer;     //调用setInterval的返回值，用于取消对函数的周期性执行
    var newstimer;
    
    var newstitle = new Array();       //以数组形式保存每个信息的标题
    var newshref = new Array();     //以数组形式保存信息标题的链接
    
    newstitle[0] = "欢迎来到我的博客";      //显示在网页上的文字内容和对应的链接
    newshref[0] = "http://www.cnblogs.com/guihailiuli/";
    
    newstitle[1] = "http://www.cnblogs.com/guihailiuli/";
    newshref[1] = "http://www.cnblogs.com/guihailiuli/";
    
    newstitle[2] = "博客园欢迎你哦";
    newshref[2] = "http://www.cnblogs.com";
    
    newstitle[3] = "ByeBye~~";
    newshref[3] = "http://www.cnblogs.com";
    
    function shownew(){
        hwnewstr=newstitle[newsi];       //通过newsi传递，依次显示数组中的内容
        newslink=newshref[newsi];         //依次显示文字对应的链接
         
        if(txti>=hwnewstr.length){
            clearInterval(txttimer);   //一旦超过要显示的文字长度，清除对shownew()的周期性调用
            clearInterval(newstimer);  
            newsi++;     //显示数组中的下一个
            
            if(newsi>=newstitle.length){
                newsi = 0;   //当newsi大于信息标题的数量时，把newsi清零，重新从第一个显示
            }
            newstimer = setInterval("shownew()",NewsTime);     //间隔2000ms后重新调用shownew()
            txti = 0;    
            return;
        }
        clearInterval(txttimer);   
        document.getElementById("Hotnews").href = newslink;   
        document.getElementById("Hotnews").innerHTML = hwnewstr.substring(0,txti+1);     //截取字符，从第一个字符到txti+1个字符
        
        txti++;   //文字一个个出现
        txttimer = setInterval("shownew()",TextTime);      
    }
    shownew();

</script>
</body>
</html>