简单的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