一个控制字数的网页特效,使用js控制限制文字个数,并列出百分比，同时用柱状图表示,同样代码简单,容易理解,可以复制到html文件里直接运行,也可以加以修饰美化,被限制的文字个数是可变,可以任意要求,同时你可以改成你输入了多少个字。代码如下。
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
<HEAD>
<TITLE>www.wangzhiguang.com.cn</TITLE>
</HEAD>
<BODY>
<script type=”text/JavaScript”>
function textCounter(field,counter,maxlimit,linecounter) {
var fieldWidth = parseInt(field.offsetWidth);
var charcnt = field.value.length;
if (charcnt > maxlimit) {
field.value = field.value.substring(0, maxlimit);
}
else {
var percentage = parseInt(100 – (( maxlimit – charcnt) * 100)/maxlimit) ;
document.getElementById(counter).style.width = parseInt((fieldWidth*percentage)/100)+”px”;
document.getElementById(“progressbar2”).innerHTML=”已输: “+percentage+”%”;
setcolor(document.getElementById(counter),percentage,”background-color”);
}
}
function setcolor(obj,percentage,prop){
obj.style[prop] = “rgb(80%,”+(100-percentage)+”%,”+(100-percentage)+”%)”;
}
</script>
<p>限制：120字节</P>
<form>
<textarea rows=”5″ cols=”40″ name=”maxcharfield” id=”maxcharfield” onKeyDown=”textCounter(this,’progressbar1′,120)” onKeyUp=”textCounter(this,’progressbar1′,120)” onFocus=”textCounter(this,’progressbar1′,120)” ></textarea><br />
<div id=”progressbar1″ style=”width:1px;height:14px;background-color:navy;”></div>
<div id=”progressbar2″></div>
<script>textCounter(document.getElementById(“maxcharfield”),”progressbar1″,120)</script>
</form>
</BODY>
</HTML>