最近有一个需求,要求用js实现网上的打字测试,测试文稿是给定的一段程序代码,上面包含程序中的各种符号,而且包含汉字的注释,要求时刻监听测试者的打字情况,记录正确率和打字速度,最后还要计算测试者输入的文稿和原文稿的相似度。
请问各位高手,这个需求如何实现啊。

解决方案 »

  1.   

    如果打字时在一个textarea中打字,只要在onchange事件中处理即可
    onchange事件触发后,统计:
    完成百分比、正确率、平均速度等等
    百分比=已打字数/原槁字数
    正确率=已打正确字数/已打总字数
    平均速度=已打字数/总时间
      

  2.   


    <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>看一下,这就是效果!
      

  3.   

    http://blog.csdn.net/lihan6415151528/archive/2009/03/31/4039490.aspx
    我之前写的全文检索,效果很像练习打字的 。呵呵  你输入试试。
      

  4.   

    做了一个小例子,希望对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="";

    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>
      

  5.   

    <script>
    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)"/>
      

  6.   

    没试试prototype等那些框架吗。
      

  7.   

    楼上的朋友,我知道你的程序区分了全角和半角,刚刚又试过了一次,如果是单纯的字符错误,那个正确率的统计是比较好的,但是,中间我缺失了一个字符的时候,正确率的统计就不对了,比如:我把你测试用的那句话改成了“这里是打字测试用的,please write this,谢谢!”,然后我输入“这里打字测试用的,please write this,谢谢!”,我输入的文稿和原稿相比少了第三个字,也就是“是”字,这是的正确率是14%,多谢朋友的帮忙,字符串的匹配在字符的冗余和缺失上真的很困难。
      

  8.   

    恩,我的程序的确是这么统计的,大多数打字程序也都是这么统计的
    这里是打字测试用的,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>
      

  9.   

    我看过很多打字测试的程序,的确都是这样匹配的,但是这个不满足我的需求,我的需求是要计算输入文稿和原文稿的相似度,缺少了一个字符可以按一个字符的错误处理,“这里是打字测试用的,please write this,谢谢!”和“这里打字测试用的,please write this,谢谢!”,这两个字符串只差一个字符,可以说是高度相似的,相似度应该在百分之九十多才对,就是一直都不知道这个该怎么处理才好。
      

  10.   

    关键是算法,能用C实现的算法,用JS肯定也能实现
      

  11.   

    你这个需求太复杂了,好像也不大合理,照你的说法,相似度本身就是很抽象的慨含,比如原文:"abcde",我打"abde",那这两句应该也算高度相似吧.