console
function Typewriter (sSelector, nRate) {
function clean () {
clearInterval(nIntervId);
bTyping = false;
bStart = true;
oCurrent = null;
aSheets.length = nIdx = 0;
}
function scroll (oSheet, nPos, bEraseAndStop) {
if (!oSheet.hasOwnProperty('parts') || aMap.length < nPos) { return true; }
var oRel, bExit = false;
if (aMap.length === nPos) { aMap.push(0); }
while (aMap[nPos] < oSheet.parts.length) {
oRel = oSheet.parts[aMap[nPos]];
scroll(oRel, nPos + 1, bEraseAndStop) ? aMap[nPos]++ : bExit = true;
if (bEraseAndStop && (oRel.ref.nodeType - 1 | 1) === 3 && oRel.ref.nodeValue) {
bExit = true;
oCurrent = oRel.ref;
sPart = oCurrent.nodeValue;
oCurrent.nodeValue = '';
}
oSheet.ref.appendChild(oRel.ref);
if (bExit) { return false; }
}
aMap.length--;
return true;
}
function typewrite () {
if (sPart.length === 0 && scroll(aSheets[nIdx], 0, true) && nIdx++ === aSheets.length - 1) { clean(); return; }
oCurrent.nodeValue += sPart.charAt(0);
sPart = sPart.slice(1);
}
function Sheet (oNode) {
this.ref = oNode;
if (!oNode.hasChildNodes()) { return; }
this.parts = Array.prototype.slice.call(oNode.childNodes);
for (var nChild = 0; nChild < this.parts.length; nChild++) {
oNode.removeChild(this.parts[nChild]);
this.parts[nChild] = new Sheet(this.parts[nChild]);
}
}
var
nIntervId, oCurrent = null, bTyping = false, bStart = true,
nIdx = 0, sPart = "", aSheets = [], aMap = [];
this.rate = nRate || 100;
this.play = function () {
if (bTyping) { return; }
if (bStart) {
var aItems = document.querySelectorAll(sSelector);
if (aItems.length === 0) { return; }
for (var nItem = 0; nItem < aItems.length; nItem++) {
aSheets.push(new Sheet(aItems[nItem]));
}
bStart = false;
}
nIntervId = setInterval(typewrite, this.rate);
bTyping = true;
};
this.pause = function () {
clearInterval(nIntervId);
bTyping = false;
};
this.terminate = function () {
oCurrent.nodeValue += sPart;
sPart = "";
for (nIdx; nIdx < aSheets.length; scroll(aSheets[nIdx++], 0, false));
clean();
};
}
var oTWExample1 = new Typewriter( '#article, h1, #info, #copyleft', 15);
var oTWExample2 = new Typewriter('#controls');
onload = function () {
oTWExample1.play();
oTWExample2.play();
};
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>JavaScript Typewriter</title>
</head>
<body>
<p id="controls" style="text-align: center;">[ <span class="intLink" onclick="oTWExample1.play();">Play</span> | <span class="intLink" onclick="oTWExample1.pause();">Pause</span> | <span class="intLink" onclick="oTWExample1.terminate();">Terminate</span> ]</p>
<div id="info">《黄金时代》开篇便写陈清扬找王二证明她不是破鞋：“我在山下14队，她在山上15队。有一天她从山上下来，和我讨论她不是破鞋的问题”，但王二偏要说陈清扬是破鞋，“所谓破鞋，乃是一个指称，大家说你是破鞋，你就是破鞋，没什么道理可讲。大家说你偷了汉，你就是偷了汉，这也没什么道理可讲”。然后，王二解释陈清扬被称为破鞋的原因：“大家都认为，结了婚的女人不偷汉，就该面色黝黑，乳房下垂；而你脸不黑而且白，乳房不下垂而且高耸，所以你是破鞋。假如你不想当破鞋，就要把脸弄黑，把乳房弄下垂，以后别人就不说你是破鞋。当然，这样很吃亏，假如你不想吃亏，就该去偷汉子来。这样你自己也认为自己是个破鞋。别人没有义务先弄明白你是否偷汉再决定是否管你叫破鞋。你倒有义务叫别人无法叫你破鞋。”后来陈清扬又下山找王二，因为传闻她和王二在搞破鞋，她要王二给出他们清白无辜的证明。而王二倒倾向于证明自己的不无辜。后来，王二以“伟大的友谊”之名和陈清扬搞起了“破鞋”，然后出逃，离开了农场，先是到后山，后来又驻扎在章风山。半年后，在陈清扬的建议下，他们又主动回到农场，“出斗争差”，写交代材料，如此，直到“文革”结束</div>
<h1>JavaScript Typewriter</h1>
<div id="article">
<p>一、中的豪杰们，杀人放火的事是家常便饭，可一听说及时雨的大名，立即倒身便拜。我也像那些草莽英雄，什么都不信，唯一不能违背的就是义气。只要你是我的朋友，哪怕你十恶不赦，为天地所不容，我也要站到你身边——王小波《黄金时代》二、中年妇女在中国是一种自然灾害，这倒不是因为她们不好看，而是因为她们故意要恶心人！——王小波《黄金时代》三、这个故事告诉我们，随着医学的发展，干点缺德事不要紧，生孩子没屁眼可以做人工肛门，怕什么？——王小波《黄金时代》四、所谓虚伪，打个比方来说，不过是脑子里装个开关罢了。无论遇到什么问题，必须做出判断：事关功利或逻辑。扳到功利一边，咱就喊皇帝万岁万万岁，扳到逻辑一边，咱们就从大前提，小前提，得到必死的结论。由于这一重担，虚伪的人显得迟钝，有时候弄不利索，还要犯大错误。——王小波《黄金时代》五、我想起拉封丹的一个寓言：有两个朋友住在一个城里，其中一个深夜去找另一个。那人连忙爬起来，披上铠甲，右手执剑，左手执钱袋，叫他的朋友进来说：“朋友，你深夜来访，必有重大的原因。如果你欠了债，这儿有钱。如果你遭人侮辱，我立刻去为你报仇。如果你是清夜无聊，这儿有美丽的女奴供你排遣。”——王小波《黄金时代》六、那些小山上长满了草，草下是红土。上午风从山上往平坝里吹，冷得像山上的水，下午风吹回来，带着燥热和尘土。陈清扬来找我时，乘着白色的风。风从衣服下面钻进来，流过全身，好像爱抚和嘴唇。——王小波《黄金时代》七、这是与生俱来的积习，根深蒂固。放声大哭从一个梦境进入另一个梦境，这是每个人都有的奢望。——王小波《黄金时代》八、“黄瓜愿意开一朵花，就开一朵花；愿意结一个黄瓜，就结一个黄瓜。愿意结个大的就结个大的，愿意结个小的就结个小的。若都不愿意，就是一个黄瓜也不结，一朵花也不开，也没有人问它。”《黄金时代》九、我们俩吵架时，仍然是不着一丝。我的小和尚依然直挺挺，在月光下披了一身塑料，倒是闪闪发光。——王小波《黄金时代》十、线条嫣然一笑，展开手中的折扇，扇面上有极好的两个隶字：“有主”。——黄小波《黄金时代》</p>
<form>
<p>随机输入：<input type="text" /><br />
<textarea style="width: 400px; height: 200px;">
那一天我二十一岁，在我一生的黄金时代，我有好多奢望。我想爱，想吃，还想在一瞬间变成天上半明半暗的云。后来我才知道，生活就是个缓慢受锤的过程，人一天天老下去，奢望也一天天消失，最后变得像挨了锤的牛一样。可是我过二十一岁生日时没有预见到这一点。我觉得自己会永远生猛下去，什么也锤不了我。
</textarea></p>
<input type="submit" value="Send" />
</form>
<p>陈清扬说，人活在世上、就是为了忍受摧残，一直到死。想明了这一点，一切都能泰然处之。要说明她怎会有这种见识，一切都要回溯到那一回我从医院回来，从她那里经过进了山。我叫她去看我，她一直在犹豫。等到她下定了决心，穿过中午的热风，来到我的草房前面，那一瞬间，她心里有很多美丽的想像。等到她进了那间草房，看见我的小和尚直挺挺，像一件丑恶的刑具。那时她惊叫起来，放弃了一切希望。</p>
<p>陈清扬说，在此之前二十多年前一个冬日 ，她走到院子里去。那时节她穿着棉衣，艰难地爬过院门的门槛。忽然一粒砂粒钻进了她的眼睛。这是那么的疼，冷风又是那样的割脸，眼泪不停地流。她觉得难以忍受，立刻大哭起来，企图在一张小床上哭醒，这是与生俱来的积习，根深蒂固。放声大哭从一个梦境进入另一个梦境，这是每个人都有的奢望。</p>
</div>
</body>
</html>
span.intLink, a, a:visited {
cursor: pointer;
color: #000000;
text-decoration: underline;
}
#info {
width: 180px;
float: right;
background-color: #eeeeff;
padding: 4px;
overflow: auto;
font-size: 12px;
margin: 4px;
border-radius: 5px;
}