非常不错的模拟打字效果，目前仅支持纯文本、BR标签、和P标签

非常不错的模拟打字效果，目前仅支持纯文本、BR标签、和P标签_典型特效

php中文网

发布： 2016-05-16 19:13:13

原创

1945人浏览过

一个朋友急着用，所以写了这个效果，代码还有改进得地方，大家可以尝试去修改以使更简洁，然后帖出来大家一起分享

<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css"> 
body{margin:0px;font:"宋体" 12px; background-color:#000; color:#fff} 
</style>
<script type="text/javascript"> 
var typer={ 
    container : null, 
    speed : 100 , 
    innerHTML : null , 
    curpos : 0, 
    interval1 : null, 
    interval2 : null, 
    init : function(obj,speed){ 
        typer.container = obj; 
        if(speed)typer.speed = speed; 
        typer.start(); 
    }, 
    start : function(){ 
        typer.innerHTML = clearSpace(typer.container.innerHTML).toLowerCase();

typer.container.innerHTML = ""; 
        typer.interval1 = setInterval("typer.type()",typer.speed); 
    }, 
    type : function(){ 
        if(typer.curpos<typer.innerHTML.length){ 
            if(typer.container.innerHTML.substring(typer.container.innerHTML.length-1)!="_"){ 
                typer.container.innerHTML +="_";

}else{ 
                var tempStr = ""; 
                if(typer.innerHTML.length>=typer.curpos+4){ 
                    if(typer.innerHTML.substring(typer.curpos,typer.curpos+4)=="") { 
                        tempStr=""; 
                        typer.curpos = typer.curpos+4; 
                    }else if(typer.innerHTML.substring(typer.curpos,typer.curpos+4)=="
"){ 
                        tempStr="
"; 
                        typer.curpos = typer.curpos+4; 
                    }else{ 
                        if(typer.innerHTML.length>=typer.curpos+3 && typer.innerHTML.substring(typer.curpos,typer.curpos+3)=="<p>"){ 
                            tempStr="<p>"; 
                            typer.curpos = typer.curpos+3; 
                        }else{ 
                            tempStr=typer.innerHTML.substring(typer.curpos,typer.curpos+1); 
                            typer.curpos++; 
                        } 
                    } 
                }else if(typer.innerHTML.length>=typer.curpos+3){ 
                    if(typer.innerHTML.substring(typer.curpos,typer.curpos+3)=="<p>"){ 
                        tempStr="<p>"; 
                        typer.curpos = typer.curpos+3; 
                    }else{ 
                        tempStr=typer.innerHTML.substring(typer.curpos,typer.curpos+1); 
                        typer.curpos++;     
                    } 
                }else{ 
                        tempStr=typer.innerHTML.substring(typer.curpos,typer.curpos+1); 
                        typer.curpos++;         
                } 
                typer.container.innerHTML = typer.container.innerHTML.substring(0,typer.container.innerHTML.length-1)+tempStr;         
            } 
        }else{ 
            clearInterval(typer.interval1); 
            typer.interval2 = setInterval("typer.last()",typer.speed); 
        } 
    }, 
    last : function(){ 
        if(typer.container.innerHTML.substring(typer.container.innerHTML.length-1)!="_") 
            typer.container.innerHTML +="_"; 
        else 
            typer.container.innerHTML = typer.container.innerHTML.substring(0,typer.container.innerHTML.length-1); 
    }

}

function clearSpace(str){ 
    if(str!=""){ 
        str = str.replace(/^\s*/g,"").replace(/\s*$/g,""); 
    } 
    return str; 
} 
</script><div id="view" style="font:'宋体' 12px; background-color:#000; color:#fff"> 
姓名: 冷风 
 
Email: cityvoice@hotmail.com 
 
籍贯: 湖南 
<p>爱好:打球，旅游，玩星际，唱歌</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/2219">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680146436592.png" alt="神卷标书">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/2219">神卷标书</a>
                            <p>神卷标书，专注于AI智能标书制作、管理与咨询服务，提供高效、专业的招投标解决方案。支持一站式标书生成、模板下载，助力企业轻松投标，提升中标率。</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="神卷标书">
                                <span>39</span>
                            </div>
                        </div>
                        <a href="/ai/2219" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="神卷标书">
                        </a>
                    </div>
                 
</div>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

大家都在看：

Js值传递和引用传递的不同前端JS怎样调用Spring定时调度任务_前端JS调用Spring定时调度任务的实现步骤 js观察者模式和订阅模式的区别 Mongoose _id字段自定义为Number类型：实现与验证 JavaScript待办列表：实现点击“完成”按钮切换列表项背景色的正确方法