<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>JS打字练习</title>
<script type="text/javascript">
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(/<BR>/g, '\n');
divTxt = divTxt.replace(/<br>/g, '\n');
var top = 18;
var left = 0;
var error = 0;
var lost = 0;
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 (divTxt.charAt(i) == '\n' || divTxt.charAt(i) == '\r') {
if (divTxt.charAt(i) == '\n') {
top += 60;
left = 0;
}
continue;
}
var charWidth = divTxt.charCodeAt(i) > 255 ? 24 : 13;
var span = document.createElement('span');
span.style.position = 'absolute';
span.style.width = charWidth + 'px';
span.style.height = '24px';
span.style.top = top + 'px';
span.style.left = left + 'px';
span.style.zIndex = 1;
span.style.backgroundColor = color;
divMain.appendChild(span);
left += charWidth;
if (left > 780 - charWidth) {
top += 60;
left = 0;
if (divTxt.charAt(i + 1) == ' ' || divTxt.charAt(i + 1) == '\n') {
i++;
lost++;
}
}
}
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 selectText() {
var selText = getObj('selText');
var txt = getObj(selText.value).value;
txt = txt.replace(/\r/g, '');
txt = txt.replace(/\n/g, '<br>');
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);
}
</script>
</head>
<body>
<div style="margin:5px 0px;">
<select id="selText" onchange="selectText();">
<optgroup label="英文">
<option value="txtEn1">Three passions</option>
<option value="txtEn2">Mother & Child1</option>
<option value="txtEn3">Mother & Child2</option>
<option value="txtEn4">Mother & Child3</option>
</optgroup>
<optgroup label="中文">
<option value="txtCh1">被风吹过的日子</option>
<option value="txtCh2">背影</option>
</optgroup>
</select>
<input id="btnStart" onclick="btnStartClick();" type="button" value="开 始" />
总字数：<span id="spanAllNum">0</span>
键入字数：<span id="spanNum">0</span>
错误数：<span id="spanError">0</span>
正确率：<span id="spanRate">0</span>
速度：<span id="spanSpeed">0</span>
用时：<span id="spanTime">0</span>
</div>
<div style="display:none;">
<textarea id="txtEn1">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.
</textarea>
<textarea id="txtEn2">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.
</textarea>
<textarea id="txtEn3">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, T
