js 实现网页一个一个字打印出来的效果
简单的js打印机效果## HTML代码 ##在此输入你想打印的东西提交看效果这里是显示效果容器CSS代码a{text-decoration: none;cursor: pointer;}.showbox{width: 980px;height: 600px;margin: 0 auto;background-color: #f7f7f7;}
·
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
更多推荐
已为社区贡献1条内容
所有评论(0)