html代碼如下<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Printer Demo</title>
<style>
* {
margin: 0;
border: 0;
padding: 0;
font-family: "Courier New", Courier, monospace;
}
#show-board {
height: 360px;
color: #333;
padding: 10px;
font-family:"宋體";
font-size:30px;
}
</style>
</head>
<body>
<div id="window">
<div id="title-bar"></div>
<div id="show-board"></div>
</div>
<script src="javascript/printer.js"></script>
<script>
var str = '總得分：90.69分\n';
str += '計算公式如下：\n';
str += 'echo You can browse more from zhiqing.ingo\n';
str += 'echo Thanks!\n';
str += 'exit\n';
Printer.init(str, {
selector: 'show-board',
}).print();
</script>
</body>
</html>js代碼如下
(function(root, factory){
if(typeof define === 'function' && define.amd){
define([], factory);
}else{
root.Printer = factory(root);
}
}(this, function(root){
var Printer = {};
Printer.printer = {"version": "0.0.1"};
var init_options = {
"speed" : 50, //文字的速度
"selector" : 'canvas', //要打印到的標籤的ID
"startIndex" : 0, //從第幾個字符開始打印
"endIndex" : 0, //打印到第幾個字符結束
"hasCur" : true, //是否有光標
"curId" : 'cur', //光標的ID
"curStr" : '_', //光標字符
"curStyle" : 'font-weight: bold;', //光標的樣式（CSS樣式）
"curSpeed" : 100, //光標的速度（ms）
"lnStr": ""
};
var str = "", options = init_options;
var flwCurTimer, dom, curObj, reStr='', curSwitch,index=0;
Printer.init = function(arg_str, arg_options){
str = arg_str;
for( var option in arg_options ){
options[option] = arg_options[option];
}
dom = document.getElementById(options.selector);
index = options.startIndex;
options.endIndex = options.endIndex == 0 ? str.length : options.endIndex
options.hasCur && flwCur();
return this;
}
Printer.print = function(){ //打印函數
for(var i=0; i<str.length; i++) {
(function(index){
setTimeout(function(){
if (str.charAt(index) === '\n'){
reStr += '<br>' + options.lnStr;
} else {
reStr += str.charAt(index);
}
dom.innerHTML= options.lnStr + reStr
}, options.speed * (index + 1))
})(i);
}
setTimeout(function(){
if(options.hasCur){
var element = document.createElement("span");
element.id = options.curId
dom.appendChild(element);
curObj = document.getElementById(options.curId);
clearTimeout(flwCurTimer);
setInterval(chCur, options.curSpeed);
}
}, options.speed * str.length)
}
function flwCur(){ //跟隨光標
dom.innerHTML += '<span id="'+options.curId+'" style="'+options.curStyle+'">'+options.curStr+'</span>';
flwCurTimer = setTimeout(flwCur, 1.5 * options.speed);
}
function chCur(){ //閃爍光標
curObj.innerHTML = curSwitch ? options.curStr : "";
curSwitch = !curSwitch
}
return Printer;
}));