管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

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

　　最有名的例子就是三国志和太阁里给新武将角色分配属性值啦.

　　在下不才,用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;

　　}

　　三个文件放在同一文件夹下,然后试试效果,我肯定没骗你.

教程首页 更多教程