JS在线打字练习

JS在线打字练习！是不是很怀旧哦！呵呵！

// var autoRun = null;
var time = 0;
var numAll = 0;
function changeText() {
clearText();

var txt = getObj('txtInput').value;
txt = txt.replace(/\r\n/g, '\n');
var divTxt = getObj('divText').innerHTML;
divTxt = divTxt.replace(/ /g, ' ');
divTxt = divTxt.replace(/ /g, ' ');
divTxt = divTxt.replace(/\r/g, '');
divTxt = divTxt.replace(/\n/g, '');
divTxt = divTxt.replace(/ /g, ' ');
divTxt = divTxt.replace(/
/g, '\n');
divTxt = divTxt.replace(/
/g, '\n');
var top = 18;
var left = 0;
var error = 0;
var lost = 0;
var spanObj = null;
for (var i = 0; i < divTxt.length; i++) {
if (i >= txt.length + lost) {
break;
}

var color = 'green';
if (txt.charAt(i - lost) != divTxt.charAt(i)) {
error++;
color = 'red';
}
if (spanObj && spanObj.color != color) {
addSpan(spanObj);
spanObj = null;
}

if (divTxt.charAt(i) == '\n' || divTxt.charAt(i) == '\r') {
if (divTxt.charAt(i) == '\n') {
top += 60;
left = 0;
addSpan(spanObj);
spanObj = null;
}
continue;
}

var charWidth = divTxt.charCodeAt(i) > 255 ? 24 : 13;
if (!spanObj) {
spanObj = new Object();
spanObj.top = top;
spanObj.left = left;
spanObj.color = color;
spanObj.height = 24;
spanObj.width = charWidth;
}
else {
spanObj.width += charWidth;
}

left += charWidth;
if (left > 780 - charWidth) {
top += 60;
left = 0;
addSpan(spanObj);
spanObj = null;
if (divTxt.charAt(i + 1) == ' ' || divTxt.charAt(i + 1) == '\n') {
i++;
lost++;
}
}
}
if (spanObj) {
addSpan(spanObj);
spanObj = null;
}
getObj('spanError').innerHTML = error;
getObj('spanNum').innerHTML = txt.length;
getObj('spanRate').innerHTML = Math.round(100 - (error / txt.length) * 100) + '%';
getObj('spanSpeed').innerHTML = Math.round(txt.length / time * 60) + '字/分';
}

function addSpan(spanObj) {
if (!spanObj) {
return;
}
var span = document.createElement('span');
span.style.position = 'absolute';
span.style.width = spanObj.width + 'px';
span.style.height = spanObj.height + 'px';
span.style.top = spanObj.top + 'px';
span.style.left = spanObj.left + 'px';
span.style.zIndex = 1;
span.style.backgroundColor = spanObj.color;
getObj('divMain').appendChild(span);
}

function selectText() {
var selText = getObj('selText');
var txt = getObj(selText.value).value;
txt = txt.replace(/\r/g, '');
txt = txt.replace(/–/g, '-');
txt = txt.replace(/\n/g, '
');
var divText = getObj('divText');
txt = txt.replace(/ /g, ' ');
txt = txt.replace(/ /g, ' ');
divText.innerHTML = txt;
numAll = txt.length;
getObj('spanAllNum').innerHTML = txt.length;
getObj('btnStart').value = '开 始';
clearText();
getObj('spanError').innerHTML = '0';
getObj('spanTime').innerHTML = '0';
getObj('spanRate').innerHTML = '0';
getObj('spanSpeed').innerHTML = '0';
getObj('spanNum').innerHTML = '0';
getObj('txtInput').value = '';
getObj('txtInput').disabled = true;
if (autoRun) {
window.clearInterval(autoRun);
}
}

function clearText() {
var divMain = getObj('divMain');
var spans = divMain.getElementsByTagName('span');
while (spans.length > 0) {
divMain.removeChild(spans[0]);
}
}

function btnStartClick() {
if (autoRun) {
window.clearInterval(autoRun);
}
var btnStart = getObj('btnStart');
var txtInput = getObj('txtInput');
var divText = getObj('divText');
if (btnStart.value == '开 始') {
clearText();
txtInput.style.height = Math.max(500, divText.offsetHeight) + 'px';
txtInput.value = '';
txtInput.disabled = false;
txtInput.focus();
getObj('spanError').innerHTML = '0';
getObj('spanTime').innerHTML = '0';
getObj('spanRate').innerHTML = '0';
getObj('spanSpeed').innerHTML = '0';
getObj('spanNum').innerHTML = '0';
numAll = 0;
numError = 0;
numInput = 0;
btnStart.value = '结 束';
time = 0;
autoRun = window.setInterval(timer, 1000);
}
else {
btnStart.value = '开 始';
}
}

function timer() {
time++;
var str = '';
var fen = Math.floor(time / 60);
if (fen > 0) {
str += fen + '分';
}
getObj('spanTime').innerHTML = str + (time - fen * 60) + '秒';
var txt = getObj('txtInput').value;
txt = txt.replace(/\r\n/g, '\n');
getObj('spanSpeed').innerHTML = Math.round(txt.length / time * 60) + '字/分';
}

function getObj(id) {
return document.getElementById(id);
}
// ]]>

Three passions
Mother & Child1
Mother & Child2
Mother & Child3

被风吹过的日子
背影

总字数：0
键入字数：0
错误数：0
正确率：0
速度：0
用时：0

Three passions, simple but overwhelmingly strong, have governed my life: the longing for love, the search for knowledge, and unbearable pity for the suffering of mankind. These passions, like great winds, have blown me hither and thither, in a wayward course, over a deep ocean of anguish, reaching to the very verge of despair.
I have sought love, first, because it brings ecstasy –ecstasy so great that I would often have sacrificed all the rest of life for a few hours of this joy. I have sought it, next, because it relieves loneliness--that terrible loneliness in which one shivering consciousness looks over the rim of the world into the cold unfathomable lifeless abyss. I have sought it, finally, because in the union of love I have seen, in a mystic miniature, the prefiguring vision of the heaven that saints and poets have imagined. This is what I sought, and though it might seem too good for human life, this is what- at last- I have found.

It was Christmas 1961. I was teaching in a small town in Ohio where my twenty-seven third graders eagerly anticipated the great day of gifts giving.
A tree covered with tinsel and gaudy paper chains graced one corner. In another rested a manger scene produced from cardboard and poster paints by chubby, and sometimes grubby, hands. Someone had brought a doll and placed it on the straw in the cardboard box that served as the manger. It didn't matter that you could pull a string and hear the blue-eyed, golden-haired dolly say, "My name is Susie." "But Jesus was a boy baby!" one of the boys proclaimed. Nonetheless, Susie stayed.

Each day the children produced some new wonder -- strings of popcorn, hand-made trinkets, and German bells made from wallpaper samples, which we hung from the ceiling. Through it all she remained aloof, watching from afar, seemingly miles away. I wondered what would happen to this quiet child, once so happy, now so suddenly withdrawn. I hoped the festivities would appeal to her. But nothing did. We made cards and gifts for mothers and dads, for sisters and brothers, for grandparents, and for each other. At home the students made the popular fried marbles and vied with one another to bring in the prettiest ones. " You put them in a hot frying pan, Teacher. And you let them get real hot, and then you watch what happens inside. But you don't fry them too long or they break."So, as my gift to them, I made each of my students a little pouch for carrying their fried marbles. And I knew they had each made something for me: bookmarks carefully cut, colored, and sometimes pasted together; cards and special drawings; liquid embroidery doilies, hand-fringed, of course.

After school the children left in little groups, chattering about the great day yet to come when long-hoped-for two-wheelers and bright sleds would appear beside their trees at home. She lingered, watching them bundle up and go out the door. I sat down in a child-sized chair to catch my breath, hardly aware of what was happening, when she came to me with outstretched hands, bearing a small white box, unwrapped and slightly soiled, as though it had been held many times by unwashed, childish hands. She said nothing. "For me?" I asked with a weak smile. She said not a word, but nodded her head. I took the box and gingerly opened it. There inside, glistening green, a fried marble hung from a golden chain. Then I looked into that elderly eight-year-old face and saw the question in her dark brown eyes. In a flash I knew -- she had made it for her mother, a mother she would never see again, a mother who would never hold her or brush her hair or share a funny story, a mother who would never again hear her childish joys or sorrows. A mother who had taken her own life just three weeks before.

请允许我把我的19岁埋藏在童真和幼稚里，允许我留下支离破碎的思想。
我在云端站了许久，风吹过那次高考我摔的很重，很痛！
风筝飞得离天很近，一定要抓住那跟线，别让它迷失了方向，我怕它随风卷起沙子飞进我的眼睛。高考是个意外，无意中那跟线我没有抓牢。
清楚的记得在火车站送朋友远方留学的情景，那时以外的没有哭。
而就在一转身，寂寞就在一转眼看见了．我看着窗外的月月红花，一月复一月的花开花又落；我望着鸟儿飞累了在枝头休息片刻后又消失在云里，向东还是向西我却茫然；楼下依旧有行人在闲谈，我固执的遗视那条一天都只有一趟火车经过的铁路，没有理会那闲言的内涵。寂寞成了我生活中的久居者。肆意地在我生命中打滚，我无法摆脱它，任由它无理的撕打我的脆弱。
在一个空旷和高远的地方，我冷静而决绝的告诉自己：只有那风和云在一直追随自己．寂寞永远是留给思考者和白抛弃者的．在《我们远去的青春》里。我赶上了李然的忧伤，看到里李然眼中的茫然。庆幸的是他并不孤单，这是他和我唯一不同的。
那个秋天孤寂来得很快，他没有留给我一丝躲闪的余地使，我措手不及。
跟着月亮我一步一步往回走，秋天的风打在脸上感觉寂寞。孤独是很难承受的，尤其是寂寞的长夜：俯视燥杂的大街人来人往；灯火辉煌的长街闪闪灯光，这样我望了好久，于是灯火开始变的稀疏，人们走累了躲进了小宅，我敢肯定他们也怕黑。沉默吧黑夜！于是虫儿也为沉没打鸣。不知何时手中已多了那支被高考遗弃数月的钢笔，人们说文字可以记录时光，那定也能记载忧伤并憧憬未来。
我努力爬上曾经那朵踩过的云。那朵我曾在上面摔下来的云，那上面依旧有风，风的力量似乎加强了，只是我习惯了那风，习惯了被风吹落又重新爬上去，不想一再重复就是三月。
时间的岁片轻易的击中我脆弱的神经，使我感官反应不及，口干舌燥，神经有一种幸福中浸啧出来的痛楚，直至迷茫。
当秋叶告别了枝头，大雁已离开寒北到南方找到住所，我开始变的恍惚。因为我在寂寞中实在呆的太久了。我勇敢的从那陪我漂泊了数月的云上纵身一跃跳了下来，我没有想过会折断一条腿或是一只手，我只想跳下来。因为我厌倦了那风，厌倦了那风把我从这边吹到那头。
当蜘蛛网无情的查封了我的炉台；
当灰烬的余烟叹息着贫困的悲哀；
我依旧固执的扑平失望的灰烬；
美丽的雪花写下：相信未来。
果真一不留神没有抓牢的线让其风卷起了沙子飞进了我的眼睛。一哭就是三个月。但我今天却很高兴。因为我摆脱了那风和云荣幸的上岗了。就在那些被风吹过的那些日子之后。
风把那云慢慢的吹向西行，直至跌落在山的那头。
我与父亲不相见已二年余了，我最不能忘记的是他的背影。
那年冬天，祖母死了，父亲的差使也交卸了，正是祸不单行的日子。我从北京到徐州，打算跟着父亲奔丧回家。到徐州见着父亲，看见满院狼籍的东西，又想起祖母，不禁簌簌地流下眼泪。父亲说：“事已如此，不必难过，好在天无绝人之路！”
父亲回家变卖典质，还了亏空，又借钱办了丧事。这些日子，家中光景很是惨淡，一半为了丧事，一半为了父亲的赋闲。丧事完毕，父亲要到南京谋事，我也要回北京念书，我们便同行。
到南京时，有朋友约去游逛，勾留了一日；第二日上午便须渡江到浦口，下午上车北去。父亲因为事忙，本已说定不送我，叫旅馆里一个熟识的茶房陪我同去。他再三嘱咐茶房，甚是仔细。但他还是(终于)不放心，怕茶房不妥帖，颇踌躇了一会。其实我那年已二十岁，北京已来往过两三次，是没有什么要紧的了。他踌躇了一会，终于决定，还是自己送我去。我两三回劝他不必去，他只说：“不要紧，他们去不好！ ” !
我们过了江，进了车站，我买票，他忙着照顾(看)行李。行李太多了，得向脚夫行些小费，才可过去。他便又忙着和他们讲价钱，我那时真是聪明过分，总觉他说话不大漂亮，非自己插嘴不可。但他终于讲定了价钱，就送我上车。他给我拣定了靠车门的一张椅子；我将他给我做的紫毛大衣铺好座位。他嘱我路上小心，夜里要警醒些，不要受凉。又嘱托茶房好好照应我。我心里暗笑他的迂；他们只认得钱,托他们直(真)是白托！而且我这样大年纪的人，难道还不能料理自己么？唉，我现在想想，那时真是太聪明了！

// selectText();
// ]]>
在IE8、Chrome下测试通过！应该BUG还有，但已经能用！

IE和Chrome对字符处理有很多差异，并在制作中发现很多问题，等明天在终结了！睡觉了！

单文件下载：http://files.cnblogs.com/zjfree/JPLX2.rar

另一个 在线指法练习【怀旧版】

2010-12-02修正

性能优化 （将相邻同样颜色的SPAN合并为一个）

“–” 字符问题 （当输入–时，会计算两个字符）

ps:博客园编辑器中的select元素还是添加不上onchange事件，只能使用onclick事件了！汗一个！