一个JS小玩意几个属性相加不能超过一个特定值.

所属分类：网络编程 / JavaScript 阅读数： 1712

收藏 0赞 0分享

最有名的例子就是三国志和太阁里给新武将角色分配属性值啦.
在下不才,用javascript做了这么一个功能,顺便把页面中的链接下划线给隐藏掉.
大家看看,有什么更好的优化意见,大家尽管提.
下面是代码:
首先是test.html:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<META NAME="Generator" CONTENT="EditPlus"> 
<META NAME="Author" CONTENT=""> 
<META NAME="Keywords" CONTENT=""> 
<META NAME="Description" CONTENT=""> 
<script language="JavaScript" src="util.js" type="text/JavaScript"></script> 
<link rel="stylesheet" href="link.css" type="text/css"> 
</HEAD> 
<BODY > 
<form name="Register1Form" method="POST" > 
<table> 
<tr> 
<td height="30" bordercolor="#FFFFFF" bgcolor="#D0E8FF" class="font1"><div align="right">username</div></td> 
<td height="30" bordercolor="#FFFFFF" bgcolor="#D0E8FF" class="font1"> <div align="center"> 
<input name="username" type="text" size="10" maxlength="10" value="1"> 
</div></td> 
<td height="30" bordercolor="#FFFFFF" bgcolor="#D0E8FF" class="bg2"> 
<div align="center"><font color="#FF0000"><font color="#FF0000"><font face="黑体"><a href="" onclick="javascript:add(Register1Form);return false;" class="A">＋</a></font></font></font></div& gt;</td> 
<td height="30" bordercolor="#FFFFFF" bgcolor="#D0E8FF" class="bg2"> 
<div align="center"><font color="#FF0000"><font color="#FF0000"><font face="黑体"><a href="" onclick="javascript:subtration(Register1Form);return false;" class="A">－</a></font></font></font></div& gt;</td> 
</tr> 
<tr> 
<td height="30" bordercolor="#FFFFFF" bgcolor="#D0E8FF" class="font1"><div align="right">meili</div></td> 
<td height="30" bordercolor="#FFFFFF" bgcolor="#D0E8FF" class="font1"> <div align="center"> 
<input name="meili" type="text" size="10" maxlength="10" value="1"> 
</div></td> 
<td height="30" bordercolor="#FFFFFF" bgcolor="#D0E8FF" class="bg2"> 
<div align="center"><font color="#FF0000"><font color="#FF0000"><font face="黑体"><a href="" onclick="javascript:add2(Register1Form);return false;" class="A">＋</a></font></font></font></div& gt;</td> 
<td height="30" bordercolor="#FFFFFF" bgcolor="#D0E8FF" class="bg2"> 
<div align="center"><font color="#FF0000"><font color="#FF0000"><font face="黑体"><a href="" onclick="javascript:subtration2(Register1Form);return false;" class="A">－</a></font></font></font></div& gt;</td> 
</tr> 
</table> 
</form> 
</body> 
</html> 

还有link.css:

复制代码代码如下:

 
.A { 
text-transform: none; 
text-decoration: none; 
} 
.a:hover { 
text-decoration: underline 
} 

最后是util.js(这个代码比较长了):

复制代码代码如下:

 
var flag=false; 
function add(formname){ 
if (formname.username.value == "") { 
alert("请输入一个正整数"); 
formname.username.focus(); 
return false; 
} 
flag = checkscope(formname); 
if(flag==false){ 
return false; 
} 
if( parseInt(formname.username.value)>0){ 
formname.username.value =parseInt(formname.username.value)+1; 
if(parseInt(formname.username.value)+parseInt(formname.meili.value)>10){ 
alert("输入的整数之和不得大于10"); 
formname.username.value =10-parseInt(formname.meili.value); 
return false; 
}else 
return true; 
}else{ 
alert("输入的整数必须大于0"); 
formname.username.value =1; 
return false; 
} 
} 
function subtration(formname){ 
if (formname.username.value == "") { 
alert("请输入一个正整数"); 
formname.username.focus(); 
return false; 
} 
flag = checkscope(formname); 
if(flag==false){ 
return false; 
} 
if( parseInt(formname.username.value)>1){ 
formname.username.value =parseInt(formname.username.value)-1; 
if(parseInt(formname.username.value)+parseInt(formname.meili.value)>10){ 
alert("输入的整数之和不得大于10"); 
formname.username.value =10-parseInt(formname.meili.value); 
return false; 
}else 
return true; 
}else if(parseInt(formname.username.value) ==1){ 
alert("已经是最小值,不能再减了"); 
return false; 
}else{ 
alert("输入的整数必须大于1"); 
formname.username.value =1; 
return false; 
} 
} 
function add2(formname){ 
if (formname.meili.value == "") { 
alert("请输入一个正整数"); 
formname.meili.focus(); 
return false; 
} 
flag = checkscope(formname); 
if(flag==false){ 
return false; 
} 
if( parseInt(formname.meili.value)>0){ 
formname.meili.value =parseInt(formname.meili.value)+1; 
if(parseInt(formname.username.value)+parseInt(formname.meili.value)>10){ 
alert("输入的整数之和不得大于10"); 
formname.meili.value =10-parseInt(formname.username.value); 
return false; 
}else 
return true; 
}else{ 
alert("输入的整数必须大于0"); 
formname.meili.value=1; 
return false; 
} 
} 
function subtration2(formname){ 
if (formname.meili.value == "") { 
alert("请输入一个正整数"); 
formname.meili.focus(); 
return false; 
} 
flag = checkscope(formname); 
if(flag==false){ 
return false; 
} 
if( parseInt(formname.meili.value)>1){ 
formname.meili.value =parseInt(formname.meili.value)-1; 
if(parseInt(formname.username.value)+parseInt(formname.meili.value)>10){ 
alert("输入的整数之和不得大于10"); 
formname.meili.value =10-parseInt(formname.username.value); 
return false; 
}else 
return true; 
}else if(parseInt(formname.meili.value) ==1){ 
alert("已经是最小值,不能再减了"); 
return false; 
}else{ 
alert("输入的整数必须大于1"); 
formname.meili.value=1; 
return false; 
} 
} 
function checkscope(formname){ 
if((parseInt(formname.username.value)>9)||(parseInt(formname.username.value)<1)){ 
alert("username输入数字超出允许的范围1-9"); 
formname.username.value=1; 
formname.username.focus(); 
return false; 
} 
if((parseInt(formname.meili.value)>9)||(parseInt(formname.meili.value)<1)){ 
alert("meili输入数字超出允许的范围1-9"); 
formname.meili.value=1; 
formname.meili.focus(); 
return false; 
} 
return true; 
} 