一个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 相关文章推荐
JavaScript字符串String和Array操作的有趣方法
Dec 18 Javascript
使用jquery操作session方法分享
Jan 22 Javascript
jQuery判断对象是否存在的方法
Feb 05 Javascript
详解JavaScript中的异常处理方法
Jun 16 Javascript
JS的框架Polymer中的dom-if和is属性使用说明
Jul 29 Javascript
javascript跨域总结之window.name实现的跨域数据传输
Nov 01 Javascript
基于jquery实现智能提示控件intellSeach.js
Mar 17 Javascript
jQuery实现点击水纹波动动画
Apr 10 Javascript
javascript实现用户点击数量统计
Dec 25 Javascript
Vue 幸运大转盘实现思路详解
May 06 Javascript
微信小程序版本自动更新的方法
Jun 14 Javascript
vue中watch和computed的区别与使用方法
Aug 23 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来与ODBC数据连接
2006/10/09 PHP
PHP微信开发之查询城市天气
2016/06/23 PHP
PHP实现数据库统计时间戳按天分组输出数据的方法
2017/10/10 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
共享自己写一个框架DreamScript
2007/01/20 Javascript
禁止JQuery中的load方法装载IE缓存中文件的方法
2009/09/11 Javascript
Javascript学习笔记1 数据类型
2010/01/11 Javascript
jquery中dom操作和事件的实例学习 下拉框应用
2011/12/01 Javascript
jquery 删除cookie失效的解决方法
2013/11/12 Javascript
jquery 实现input输入什么div图层显示什么
2014/06/15 Javascript
js从Cookies里面取值的简单实现
2014/06/30 Javascript
coffeescript使用的方式汇总
2015/08/05 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
2015/12/02 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
2017/09/19 jQuery
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
2020/07/17 Javascript
详解python数据结构和算法
2019/04/18 Python
Python的赋值、深拷贝与浅拷贝的区别详解
2020/02/12 Python
用canvas做一个DVD待机动画的实现代码
2019/04/12 HTML / CSS
台湾深度自由行旅游平台:Tripbaa趣吧
2017/10/10 全球购物
乌克兰珠宝大卖场:Zlato.ua
2020/09/27 全球购物
俄罗斯三星品牌商店:GalaxyStore
2020/11/04 全球购物
使用Vue.js和MJML创建响应式电子邮件
2021/03/23 Vue.js
物流经理自我评价
2013/09/23 职场文书
十一酒店活动方案
2014/02/20 职场文书
一岗双责责任书
2014/04/15 职场文书
物流管理专业自荐信
2014/06/23 职场文书
临时用工协议书范本
2014/10/29 职场文书
检察院起诉意见书
2015/05/20 职场文书
干部培训简讯
2015/07/20 职场文书
婚礼领导致辞大全
2015/07/28 职场文书
2016猴年春节慰问信
2015/11/30 职场文书
创业计划书之情侣餐厅
2019/09/29 职场文书
浅谈Python类的单继承相关知识
2021/05/12 Python
nodejs利用readline提示输入内容实例代码
2021/07/15 NodeJs
Win11怎么进入安全模式?Windows 11进入安全模式的方法
2021/11/21 数码科技
pandas中pd.groupby()的用法详解
2022/06/16 Python