如何用JAVASCRIPT实现打字测试的功能？

既然上面的只是为了显示，那为什么不把上面的不用TEXTAREA显示呢？直接显示在页面上要容易很多

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

"既然上面的只是为了显示，那为什么不把上面的不用TEXTAREA显示呢？直接显示在页面上要容易很多"
直接显示在页面上也行，只要背景色能跟随下面的textarea光标位置相应移动。
我把问题简化一下吧，如何通过javascript动态改变文字背景色？
动态显示时间进度条,IE6和FF2下通过
<html>
<head>
<title>时间进度条效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script type='text/javascript'>
function Process(t,l)
{
  this.ns=navigator.appName.indexOf("Netscape")!=-1?true:false;
  this.TotalSecond=t*60;
  this.width=l;
  this.interval=null;
  this.MS=null;
  this.Percent=null;
  this.UseSecond=0;
}
Process.prototype.AddProcessBar=function()
{
  var ms=document.createElement("table");
  ms.style.backgroundColor='#000000';
  ms.id="MoveTB";
  ms.style.width=0;
  ms.boder=0;
  ms.cellspacing=0;
  ms.cellpadding=0;
  var td1=document.createElement("td");
  td1.style.height=10;
  var tr1=document.createElement("tr");
  tr1.appendChild(td1);
  ms.appendChild(tr1);
  ms.style.display="none";
  var bar=document.createElement("table");
  bar.style.height=22;
  bar.border=1;
  var tr=document.createElement("tr");
  var td=document.createElement("td");
  td.valign='middle';
  td.style.width=this.width;
  td.appendChild(ms);
  tr.appendChild(td);
  td=document.createElement("td");
  td.id='percent';
  td.width=65;
  td.align='center';
  var TNode=document.createTextNode("0%");
  td.appendChild(TNode);
  tr.appendChild(td);
  bar.appendChild(tr);
  if(this.ns)
    document.body.appendChild(bar);
  else
    document.write(bar.outerHTML);
  this.MS=document.getElementById('MoveTB');
  this.Percent=document.getElementById('percent');
}
Process.prototype.StartProcess=function()
{
  if(this.interval==null)
  {
    if(this.UseSecond>=this.TotalSecond) this.UseSecond=1;
    this.MS.style.display="";
    this.MS.style.width=(this.UseSecond/this.TotalSecond)*(this.width-10);
    this.interval=setInterval("Bar.StartProcess()",1000);

  }
  else
  {
    this.UseSecond++;
    if(this.UseSecond>=this.TotalSecond)
    {
      this.Percent.innerHTML="100%";
      this.MS.style.width=this.width;
      clearInterval(this.interval);
      this.interval=null;
      alert('时间到！');
    }
    else
    {
      this.MS.style.width=(this.UseSecond/this.TotalSecond)*this.width;
      this.getPercent();
    }
  }
}
Process.prototype.getPercent=function()
{
  var p=(this.UseSecond/this.TotalSecond)*100;
  var str=Math.floor(p*100)/100+"";//JavaScript计算结果保留2位小数位方法
  var Flag=0;
  if(str.indexOf(".")==-1)
  {
    str+=".";
    Flag=2;
  }
  for(var i=0;i<Flag;i++)
    str+="0";
  this.Percent.innerHTML=str+"%";
}
Process.prototype.Reset=function()
{
  clearInterval(this.interval);
  this.interval=null;
  this.MS.style.width=0;
  this.MS.style.display="none";
  this.Percent.innerHTML="0%";
  this.UseSecond=0;
}
Process.prototype.Pause=function()
{
  if(this.interval!=null)
  {
    clearInterval(this.interval);
    this.interval=null;
  }
  else
  {
    this.interval=setInterval("Bar.StartProcess()",1000);
  }
}
</script>
</head>
<body>
<script type="text/javascript">
var Bar=new Process(1,302);
Bar.AddProcessBar();
</script>
<input type='button' value='Start' onclick='Bar.StartProcess()'/>　<input type='button' value='Pause' onclick='Bar.Pause()'/>　<input type='button' value='Reset' onclick='Bar.Reset()'/>
</body>
</html>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link href="images/web.css" rel="stylesheet" type="text/css">
</head>
<body>
<script type='text/javascript'>
//应为text类型的value不支持html代码，所以没办法直接设置不同的值的颜色为红色
function check1()
{
  var txt1=document.getElementById("txt1");
  var txt2=document.getElementById("txt2");
  if(txt1.value!=txt2.value)
  {
    alert('值不一样！');
    txt1.style.backgroundColor='red';
  }
}
//第2中方法，是div和text的比较，可以设置不同的颜色,并且可以一边输入一边比较
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>以下为2种比较，你看你需要哪一种！</h1><br/><br/><br/>
<h1><i>第一种比较</i></h1><br/>
<input type="text" id="txt1" style="width:300px"/><br/>
<input type="text" id="txt2" style="width:300px"/><br/>
<input type='button' value='比较' onclick="check1()"/><br/><br/><br/><h1><i>第2种比较</i></h1>
<div id='divCT'>你好吗?我很好啊,谢谢你噶!</div>
<input type="text" id="txt3" style="width:300px" onkeyup="check2(this.value)"/><br/>
<i><font color='red'>注意你的<div>中的<font color="black">符号</font>输入要在英文状态下的，要不对比不了！
text中的符号默认为英文状态的，除非你在text中输入时把输入法改为<font color="black">全角输入</font>。<br /></font></i>
</body>
</html>
郁闷,刚才在ff下测试了下,发现ie的标点符号输入的编码实现有大大的问题.ff下能和你输入div和text时所处于的输入状态一样,但ie要提升一级,垃圾啊.中文字符的比较没问题.例如
<div>                ==>输入标点符号时英文状态
<input type= "text"  ==>智能abc半角
ie能正确比较标点符号,ff不能<div>                ==>英文状态
<input type= "text"  ==>英文状态
ie不能比较标点符号,ff能<div>                ==>智能abc半角
<input type= "text"  ==>智能abc全角角
ie能正确比较标点符号,ff不能