JS写的一段打字测验的程序的详细介绍

JS写的一段打字测验的程序的详细介绍

从数据库中取出一段文字，分多行放到页面上，每行文字下面留一空行供用户对照输入，输入的过程中记录错误的字数。不需要判断时间速度等因素。

完整代码
<TITLE>aa</TITLE>
<META HTTP-EQUIV=Content-Type CONTENT=text/html; charset=gb2312>

<input id=inpu_onoff type=button value='Start' onclick='f_start()'>

<br>
<input name="Input" id=inpu_text style='font-size:24px' size=49 maxlength=50>
<input id=inpu_type readonly size=49 maxlength=50 style='font-size:24px'>
<input id=inpu_wrong readonly size=49 maxlength=50 style='font-size:24px'>

<p><input name=radi_resource type=radio onclick=f_set_res()>Article
<input name=radi_resource type=radio onclick=f_set_res()>Full
<input name=radi_resource type=radio onclick=f_set_res() checked>DVORAK
<input name=radi_resource type=radio onclick=f_set_res()>Alpha
<input name=radi_resource type=radio onclick=f_set_res()>Number
<input name=radi_resource type=radio onclick=f_set_res()>Empty

<input id=chec_ifrandom type=checkbox checked>Random

<br><textarea id=text_sample rows=5 cols=80></textarea>

<p>

<table width=100%>
<tr>
<td width=40%>
<input id=inpu_speed readonly>Char/Minute
<br><input id=inpu_right readonly>Right Rate
<br><input id=inpu_disptime readonly>Cost Time
<br><input id=inpu_righttype readonly>Input Right
<br><input id=inpu_ttltype readonly>Input Total
</td>
<td>
<p><textarea id=text_result rows=8 cols=30></textarea>Result History
</td>
</tr>
</table>

<script>/////////////////END BOX//////////////////</script>

<script>/////////////////START HIDDEN//////////////////</script>
<input name="Input2" id=Input style='display:none'>
<textarea id=text_article style='display:none'>

The Dvorak Keyboard

Almost everyone knows that the QWERTY keyboard was designed by Christopher Sholes to prevent the arms in old manual

typewriters from jamming. Fewer people know that a University of Washington professor and efficiency fanatic, August Dvorak

(a cousin of the composer), in 1936, designed a keyboard to maximize efficiency (by placing common letters on the home row),

and make the stronger fingers of the hands do most of the work.
I was surprised by the factoid (gathered from Grolier's Encyclopedia) that part of the QWERTY layout was driven by the

decision to place all of the letters in the word "typewriter" on the top row so that salesmen wouldn't have to hunt and peck.

I've always been bothered by poor design or engineering, so ever since hearing about the Dvorak keyboard I wanted to switch.

I finally took the plunge in 1989 and haven't regretted it. Since then, because of repetitive stress injuries (RSI) and

carpal tunnel syndrome, many people have asked me about the Dvorak keyboard, and bit by bit I've become something of an

evangelist.

Pictured below is the Dvorak keymapping. I learned it by printing out a diagram like this one, and placing it next to my

terminal. I regained comfort after a couple weeks, and eventually passed my old speed. It is definitely more comfortable than

QWERTY. An unintended side effect is that it is a pretty effective security device (just ask any of my coworkers).

</textarea>

<script>/////////////////END HIDDEN//////////////////</script>

<script>/////////////////START JS//////////////////</script>
<script>

/////////////////START USER JS FUNCTION//////////////////

f_start() ///auto start, when onload run the main

function f_start() //reset all, set text, get ready to go
{
inpu_text.value=''
inpu_type.value=''
inpu_wrong.value=''

inpu_curtime.value=0

inpu_speed.value='0.00'
inpu_right.value='0.00%'
inpu_disptime.value='0:0:0.0'
inpu_righttype.value=0
inpu_ttltype.value=0

inpu_onoff.outerHTML="<input id=inpu_onoff type=button value='......:::::: 3 ::::::......' onclick='f_stop()' disabled>"
f_set_res()
f_readygo()
}

function f_stop() //when end typing stop time
{
clearTimeout(tt_timeout)
inpu_type.readOnly=true
inpu_onoff.outerHTML="<input id=inpu_onoff type=button value='Start' onclick='f_start()'>"
inpu_onoff.focus()
f_result()
}

function f_readygo() //2~~~1...GO!!! when ready start time & input
{
tt_timeout=setTimeout("inpu_onoff.value='~~~~~~~~~~~~~~~~~~2'",1000)
tt_timeout=setTimeout("inpu_onoff.value='1............'",2000)
tt_timeout=setTimeout("inpu_onoff.value='!!!!!!!!!!!!!!!!!! GO !!!!!!!!!!!!!!!!!!'",3000)
tt_timeout=setTimeout('f_settext()',3000)
tt_timeout=setTimeout('inpu_type.readOnly=false;inpu_type.focus()',4000)
tt_timeout=setTimeout("inpu_onoff.value='Stop';inpu_onoff.disabled=false",4000)
tt_timeout=setTimeout('f_refresh()',4000)
}

function f_settext() //random or not
{
if(chec_ifrandom.checked==1)
{
f_randomtext()
}
else
{
f_ordertext()
}
}

function f_ordertext() //show 50 order words in input box
{
temp_array=text_sample.value.split('/r/n').join('')
temp_random=Math.round(Math.random()*(temp_array.length-50))
inpu_text.value=temp_array.substr(temp_random,50)
}

function f_randomtext() //show 50 random chars in input box
{
temp_array=text_sample.value.split('/r/n').join('')
temp_random=temp_array
inpu_text.value=''
for(i=0;i<50;i++)
{
char_rand=temp_random.charAt(Math.round(Math.random()*(temp_random.length-1)))
inpu_text.value+=char_rand
}
}

function f_result() //show speed & right & time & input
{
text_result.value+=inpu_speed.value+'/t'+'Char/Minute'+'/n'
text_result.value+=inpu_right.value+'/t'+'Right Rate'+'/n'
text_result.value+=inpu_disptime.value+'/t'+'Cost Time'+'/n'
text_result.value+=inpu_righttype.value+'/t'+'Input Right'+'/n'
text_result.value+=inpu_ttltype.value+'/t'+'Input Total'+'/n'
text_result.value+=Date()+'/n'+'/n'
text_result.scrollTop+=110
}

function f_refresh()
{
f_show_time()
f_show_record()
tt_timeout=setTimeout('f_refresh()',100) //refresh time per 0.1seconds
}

function f_show_time()
{
inpu_curtime.value++ //set time into input box

temp=new Array

temp[0]=parseInt(inpu_curtime.value) //get real millions
temp[1]=parseInt(inpu_curtime.value/10) //get real seconds
temp[2]=parseInt(inpu_curtime.value/10/60) //get real minutes
temp[3]=parseInt(inpu_curtime.value/10/60/60) //get real hours

temp[0]=temp[0]%10 //only millions
temp[1]=temp[1]%60 //only seconds
temp[2]=temp[2]%60 //only minutes
temp[3]=temp[3] //only hours

inpu_disptime.value=temp[3]+':'+temp[2]+':'+temp[1]+'.'+temp[0] //put time into input box
}

function f_show_record()
{
inpu_ttltype.value=inpu_type.value.length
inpu_speed.value=(inpu_ttltype.value/(inpu_curtime.value/10)*60).toFixed(2)

//Input Right Begin
inpu_righttype.value=inpu_ttltype.value
inpu_wrong.value=''
for(i=0;i<inpu_ttltype.value;i++)
{
if(inpu_text.value.charAt(i)!=inpu_type.value.charAt(i)) //diff text & type
{
inpu_righttype.value-- //if diff
inpu_wrong.value+='?' //type wrong alert
}
else //same (type right)
{
inpu_wrong.value+=' ' //show type right
}
}
//Input Right End

//Right Rate Begin
if(inpu_ttltype.value==0)
inpu_right.value='0.00%'
else
inpu_right.value=(inpu_righttype.value/inpu_ttltype.value*100).toFixed(2)+'%'
//Right Rate End
}

function f_set_res() //show radio
{
if(radi_resource[0].checked==true)
{
text_sample.value=text_article.value
}
else if(radi_resource[1].checked==true)
{
text_sample.value='`1234567890[]/~!@#$%^&*(){}|/',.pyfgcrl/="<>PYFGCRL?+aoeuidhtns-AOEUIDHTNS_;qjkxbmwvz:QJKXBMWVZ '
}
else if(radi_resource[2].checked==true)
{
text_sample.value='/',.pyfgcrlaoeuidhtns;qjkxbmwvz'
}
else if(radi_resource[3].checked==true)
{
text_sample.value='abcdefghijklmnopqrstuvwxyz'
}
else if(radi_resource[4].checked==true)
{
text_sample.value='1234567890'
}
else if(radi_resource[5].checked==true)
{
text_sample.value=''
}
}

/////////////////END USER JS FUNCTION//////////////////

/////////////////START SYSTEM JS FUNCTION//////////////////

function document.onkeydown()
{
if(event.keyCode==13&&inpu_onoff.value=='Stop')
{
f_stop()
return false
}
}

/////////////////END SYSTEM JS FUNCTION//////////////////

</script>
<script>/////////////////END JS//////////////////</script>

<SCRIPT>
document.execCommand("stop") //Do not run the following rubbish code
</SCRIPT>
<!-- MyStyle
<input id=inpu_abc onclick='f_abc()'>
<script>
function f_abc()
{
alert()
}
</script>
-->