做了一个小例子,希望对lz有帮助^_^(只支持IE喔)<html><head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>test</title> <script> var over = false; function aaa(obj){ var str = $("d").innerText; var len = getLen(str); var typeLater = obj.value; var typeLaterLen = getLen(typeLater); if(typeLaterLen>=len&&!over){ over = true; $("d2").innerText = "100%"; obj.disabled=true; }else if(typeLaterLen>=len){ $("d2").innerText = "100%"; }else{ $("d2").innerText = parseInt(typeLaterLen*100/len)+"%"; } $("d1").innerText = compareStr(str,typeLater);
} function $(id){ return document.getElementById(id); } //区分半角和全角 function getLen(str){ var count = 0; for(var i=0;i<str.length;i++){ if(str.charCodeAt(i)>128){ count+=2; }else{ count++; } } return count; } //比较2个字符串的匹配情况 function compareStr(str1,str2){ var len = Math.min(getLen(str1),getLen(str2)); var success = 0;//成功字数 var fail = 0;//失败字数 var i = 0; var j = 0; var newstr1=""; var newstr2="";
onchange事件触发后,统计:
完成百分比、正确率、平均速度等等
百分比=已打字数/原槁字数
正确率=已打正确字数/已打总字数
平均速度=已打字数/总时间
<html>
<head></head>
<body>
<div id="div1"></div>
<script type="text/javascript">
var oSee=document.getElementById("div1");
var letter='看一下吧,这就是效果,应该还不错呀';
var count=0;
function type()
{
if(count<=letter.length)
{
oSee.innerHTML=letter.substring(0,count);
count++;
}
else
{
window.clearInterval(IntervalID);
}
}
var IntervalID=window.setInterval(type,500);
</script>
</body>
</html>看一下,这就是效果!
我之前写的全文检索,效果很像练习打字的 。呵呵 你输入试试。
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>test</title>
<script>
var over = false;
function aaa(obj){
var str = $("d").innerText;
var len = getLen(str);
var typeLater = obj.value;
var typeLaterLen = getLen(typeLater);
if(typeLaterLen>=len&&!over){
over = true;
$("d2").innerText = "100%";
obj.disabled=true;
}else if(typeLaterLen>=len){
$("d2").innerText = "100%";
}else{
$("d2").innerText = parseInt(typeLaterLen*100/len)+"%";
}
$("d1").innerText = compareStr(str,typeLater);
}
function $(id){
return document.getElementById(id);
}
//区分半角和全角
function getLen(str){
var count = 0;
for(var i=0;i<str.length;i++){
if(str.charCodeAt(i)>128){
count+=2;
}else{
count++;
}
}
return count;
}
//比较2个字符串的匹配情况
function compareStr(str1,str2){
var len = Math.min(getLen(str1),getLen(str2));
var success = 0;//成功字数
var fail = 0;//失败字数
var i = 0;
var j = 0;
var newstr1="";
var newstr2="";
while(success+fail<len){
if(getLen(newstr1)==getLen(newstr2)){
var strChar1=str1.charAt(i++);
var strChar2=str2.charAt(j++);
newstr1+=strChar1;
newstr2+=strChar2;
if(strChar1==strChar2){
success+=getLen(strChar1);
}else{
fail+=getLen(strChar1);
}
}else if(getLen(newstr1)>getLen(newstr2)){
var strChar2=str2.charAt(j++);
newstr2+=strChar2;
}else{
var strChar1=str1.charAt(i++);
newstr1+=strChar1;
fail+=getLen(strChar1);
}
}
if(len==0){
return "0%";
}else{
return parseInt(success*100/len)+"%";
}
}
</script>
</head><body>
<div id="d">这里是原稿,是练习打字用的!^_^</div>
<textarea rows=10 cols=40 onpropertychange="aaa(this)"></textarea><br>
正确率:<div id=d1></div>
完成率:<div id=d2></div>
</body></html>
function check2(value){
if(value!="") {
var divCT=document.getElementById("divCT");
//想把原来有可能出错的内容的hmtl标记使用正则表达式过滤掉然后再比较
var tempCT=divCT.innerHTML.replace(/<[^>]*>|<\/[^.]*>/gi,"");
var Index=value.length<tempCT.length?value.length:tempCT.length;
var result="";
for(var i=0;i<Index;i++) {
if(tempCT.charAt(i)==value.charAt(i))result+=tempCT.charAt(i);//连接正确的
else result+="<font color='red'>"+tempCT.charAt(i)+"</font>";//加上出错的格式化信息
}
if(Index<tempCT.length) result+=tempCT.substring(Index);
divCT.innerHTML=result;//设置结果
}
}
</script>
<h1>打字练习</h1>
<div id='divCT'>你好吗?我很好啊,谢谢你噶!</div>
<input type="text" id="txt3" style="width:300px" onkeyup="check2(this.value)"/>
这里是打字测试用的,please write this,谢谢!
这里打字测试用的,please write this,谢谢!
匹配3个字:"这里","谢谢"的第一个谢字
正确率:6/42=14%稍微改了一下,应该更直观
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>test</title>
<script>
var str = "";
window.onload=function (){
str = $("d").innerText;
};
var over = false;
function aaa(obj){
var len = getLen(str);
var typeLater = obj.value;
var typeLaterLen = getLen(typeLater);
if(typeLaterLen>=len&&!over){
over = true;
$("d2").innerText = "100%";
obj.disabled=true;
}else if(typeLaterLen>=len){
$("d2").innerText = "100%";
}else{
$("d2").innerText = parseInt(typeLaterLen*100/len)+"%";
}
$("d1").innerText = compareStr(str,typeLater);
}
function $(id){
return document.getElementById(id);
}
//区分半角和全角
function getLen(str1){
var count = 0;
for(var i=0;i<str1.length;i++){
if(str1.charCodeAt(i)>128){
count+=2;
}else{
count++;
}
}
return count;
}
//比较2个字符串的匹配情况
function compareStr(str1,str2){
var len = Math.min(getLen(str1),getLen(str2));
var success = 0;//成功字数
var fail = 0;//失败字数
var i = 0;
var j = 0;
var newstr1="";
var newstr2="";
var resultStr = "";
while(success+fail<len){
if(getLen(newstr1)==getLen(newstr2)){
var strChar1=str1.charAt(i++);
var strChar2=str2.charAt(j++);
newstr1+=strChar1;
newstr2+=strChar2;
if(strChar1==strChar2){
success+=getLen(strChar1);
resultStr+="<font color=blue>"+strChar1+"</font>";
}else{
fail+=getLen(strChar1);
resultStr+="<font color=red>"+strChar1+"</font>";
}
}else if(getLen(newstr1)>getLen(newstr2)){
var strChar2=str2.charAt(j++);
newstr2+=strChar2;
}else{
var strChar1=str1.charAt(i++);
newstr1+=strChar1;
fail+=getLen(strChar1);
resultStr+="<font color=red>"+strChar1+"</font>";
}
}
$("d").innerHTML = resultStr+str.substring(i);
if(len==0){
return "0%";
}else{
return parseInt(success*100/len)+"%";
}
}
</script>
</head><body>
<div id="d">这里是打字测试用的,please write this,谢谢!</div>
<textarea rows=10 cols=40 onpropertychange="aaa(this)"></textarea><br>
正确率:<div id=d1></div>
完成率:<div id=d2></div>
</body></html>