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


Posted in Javascript onSeptember 29, 2009

最有名的例子就是三国志和太阁里给新武将角色分配属性值啦.
在下不才,用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; 
}

三个文件放在同一文件夹下,然后试试效果,我肯定没骗你.
Javascript 相关文章推荐
页面版文本框智能提示JS代码
Nov 20 Javascript
解决iframe的frameborder在chrome/ff/ie下的差异
Aug 12 Javascript
js 一个关于图片onload加载的事
Nov 10 Javascript
JQuery判断HTML元素是否存在的两种解决方法
Dec 26 Javascript
js限制文本框只能输入中文的方法
Aug 11 Javascript
如何检测JavaScript的各种类型
Jul 30 Javascript
js实现对table的增加行和删除行的操作方法
Oct 13 Javascript
JS实现探测网站链接的方法【测试可用】
Nov 08 Javascript
vue服务端渲染的实例代码
Aug 28 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
Aug 31 Javascript
vue+elementUI组件table实现前端分页功能
Nov 15 Javascript
vue 解决provide和inject响应的问题
Nov 12 Javascript
IE FF OPERA都可用的弹出层实现代码
Sep 29 #Javascript
javascript 表单验证常见正则
Sep 28 #Javascript
javascript 页面划词搜索JS
Sep 28 #Javascript
jquery 模式对话框终极版实现代码
Sep 28 #Javascript
javascript的onchange事件与jQuery的change()方法比较
Sep 28 #Javascript
支持ie与FireFox的剪切板操作代码
Sep 28 #Javascript
javaScript 简单验证代码(用户名,密码,邮箱)
Sep 28 #Javascript
You might like
php下将图片以二进制存入mysql数据库中并显示的实现代码
2010/05/27 PHP
thinkPHP5分页功能实现方法分析
2017/10/25 PHP
PHP使用PDO操作sqlite数据库应用案例
2019/03/07 PHP
javascript Split方法,indexOf方法、lastIndexOf 方法和substring 方法
2009/03/21 Javascript
document.compatMode介绍
2009/05/21 Javascript
Javascript中的变量使用说明
2010/05/18 Javascript
nodejs 后缀名判断限制代码
2011/03/31 NodeJs
jQuery判断iframe中元素是否存在的方法
2013/05/11 Javascript
JS画线(实例代码)
2013/11/20 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
2013/12/02 Javascript
jQuery实现统计输入文字个数的方法
2015/03/11 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
2016/11/28 Javascript
深入理解JavaScript 参数按值传递
2017/05/24 Javascript
对Vue table 动态表格td可编辑的方法详解
2018/08/28 Javascript
vue init webpack 建vue项目报错的解决方法
2018/09/29 Javascript
实现高性能javascript的注意事项
2019/05/27 Javascript
webpack4 从零学习常用配置(小结)
2019/05/28 Javascript
JS中的算法与数据结构之列表(List)实例详解
2019/08/16 Javascript
微信小程序缓存支持二次开发封装实现解析
2019/12/16 Javascript
[02:42]DOTA2城市挑战赛收官在即 四强之争风起云涌
2018/06/05 DOTA
go和python调用其它程序并得到程序输出
2014/02/10 Python
Python和php通信乱码问题解决方法
2014/04/15 Python
python实现读取命令行参数的方法
2015/05/22 Python
tensorflow 1.0用CNN进行图像分类
2018/04/15 Python
Python编程深度学习绘图库之matplotlib
2018/12/28 Python
Python安装Flask环境及简单应用示例
2019/05/03 Python
解决.ui文件生成的.py文件运行不出现界面的方法
2019/06/19 Python
python将excel转换为csv的代码方法总结
2019/07/03 Python
ITK 实现多张图像转成单个nii.gz或mha文件案例
2020/07/01 Python
Visual-Click葡萄牙:欧洲领先的在线眼镜商
2020/02/17 全球购物
PHP如何自定义函数
2016/09/16 面试题
飞利信loadrunner和软件测试笔试题
2012/09/22 面试题
高级工程师英文求职信
2014/03/19 职场文书
2014年小学教研工作总结
2014/12/06 职场文书
redis 限制内存使用大小的实现
2021/05/08 Redis
解析Redis Cluster原理
2021/06/21 Redis