js 实现网页一个一个字打印出来的效果

HTML代码

<div class="showbox">
    <textarea id="printbox">在此输入你想打印的东西</textarea>
    <a href="javascript:;" class="clickbtn">提交看效果</a>
    <div id="showmsgbox">这里是显示效果容器</div>
</div>

CSS代码

<style type="text/css">
    a{text-decoration: none;cursor: pointer;}
    .showbox{width: 980px;height: 600px;margin: 0 auto;background-color: #f7f7f7;}
    #printbox{width: 400px;height: 400px;resize: none;float: left;}
    .clickbtn{display:inline-block;width: 160px;height: 40px;line-height: 40px;text-align: center;background-color: #EC6941;color: #FFFFFF;float: left;margin-top: 180px;}
    #showmsgbox{width: 400px;height: 400px;resize: none;float: left;border: 1px solid #CCCCCC;}
    </style>

---

函数结构：showText(textbox,showmsgbox,valtype,time,str);
参数说明：
textbox 要取值的文本容器
showmsgbox 用于显示的文本容器
valtype 对应不同的标签，使用不同的赋值方法
其数值可以为以下三种中的一种：
0.”text”
1.”val”
2.”html”
注：数值或者字符串均可，区分大小写。
分别对应节点的三个属性
time 连续出现的两个字符的间隔时间
单位毫秒
可选
默认值100
str 使用规定好的文字字符串

function showText(textbox, showmsgbox, valtype, time,str) {
    var i = 0;
    var loop;
    if(valtype==0||valtype == "text"){
        str=CheckStr(str,textbox);
        loop = setInterval(function() {
            if (i >= str.length || !showmsgbox)
                clearInterval(loop);
                var val=$("#"+showmsgbox).text();
                 val+= str.charAt(i++);
                 $("#"+showmsgbox).text(val);
        }, time ? time : 100);
    }
    else if(valtype==1||valtype == "val"){
        str=CheckStr(str,textbox);
        loop = setInterval(function() {
            if (i >= str.length || !showmsgbox)
                clearInterval(loop);
                var val=$("#"+showmsgbox).val();
                 val+= str.charAt(i++);
                 $("#"+showmsgbox).val(val);
        }, time ? time : 100);
    }
    else if(valtype==2||valtype == "html"){
        str=CheckStr(str,textbox);
        loop = setInterval(function() {
            if (i >= str.length || !showmsgbox)
                clearInterval(loop);
                var val=$("#"+showmsgbox).html();
                 val+= str.charAt(i++);
                 $("#"+showmsgbox).html(val);
        }, time ? time : 100);
    }

}
function CheckStr(str,textbox){
    if(str==""||str==undefined){
        str=$("#"+textbox).val();
    }
    return str;
}

---

百度网盘

http://pan.baidu.com/s/1mhFpxwc

---

如果有好的建议，请联系我QQ：508774301