既然上面的只是为了显示,那为什么不把上面的不用TEXTAREA显示呢?直接显示在页面上要容易很多
解决方案 »
- 怎样获取之前一个页面的URL?
- TEXTAREA 可放图图片,为什么select不可放,应该有办法吧,哪位老大想想办法啊
- window.open 返回值问提!
- 一段简单的代码怎么就出错了?
- 车辆行驶时,在地图上显示它的行驶轨迹!
- 求支持拖拽的数据库版树(TREE),
- 关于links 的onclick事件问题?? 怎么在body 的 onLoad 事件中禁用 所有的联接???
- javascript中赋值为什么会出这样的问题?
- 请问 meizz(梅花雨) :
- ios下qq浏览器jquery ajax请求state为0
- 正则如何截取这样的字符
- 用Ajax方法在一个id为A的Div里写入数据,时出现空白页面
直接显示在页面上也行,只要背景色能跟随下面的textarea光标位置相应移动。
<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>
<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>
<div> ==>输入标点符号时英文状态
<input type= "text" ==>智能abc半角
ie能正确比较标点符号,ff不能<div> ==>英文状态
<input type= "text" ==>英文状态
ie不能比较标点符号,ff能<div> ==>智能abc半角
<input type= "text" ==>智能abc全角角
ie能正确比较标点符号,ff不能