一个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 相关文章推荐
一端时间轮换的广告
Jun 26 Javascript
ppk谈JavaScript style属性
Oct 10 Javascript
事件模型在各浏览器中存在差异
Oct 20 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
Jun 26 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
Jun 19 Javascript
基于jQuery实现响应式圆形图片轮播特效
Nov 25 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
Aug 25 Javascript
jquery层级选择器的实现(匹配后代元素div)
Sep 05 Javascript
利用js判断手机是否安装某个app的多种方案
Feb 13 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
利用d3.js力导布局绘制资源拓扑图实例教程
Jan 08 Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
Jul 11 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文件下载处理方法分析
2015/04/22 PHP
jquery下将选择的checkbox的id组成字符串的方法
2010/11/28 Javascript
javascript中比较字符串是否相等的方法
2013/07/23 Javascript
jquery $.each() 使用小探
2013/08/23 Javascript
jquery弹出框的用法示例(一)
2013/08/26 Javascript
自己使用jquery写的一个无缝滚动的插件
2014/04/30 Javascript
jquery调取json数据实现省市级联的方法
2015/01/29 Javascript
js实现砖头在页面拖拉效果
2020/11/20 Javascript
js多个物体运动功能实例分析
2016/12/20 Javascript
jQuery获取Table某列的值(推荐)
2017/03/03 Javascript
nodejs连接mysql数据库及基本知识点详解
2018/03/20 NodeJs
vue element upload实现图片本地预览
2019/08/20 Javascript
Vue extend的基本用法(实例详解)
2019/12/09 Javascript
mpvue实现微信小程序快递单号查询代码
2020/04/03 Javascript
JavaScript使用prototype属性实现继承操作示例
2020/05/22 Javascript
jQuery使用jsonp实现百度搜索的示例代码
2020/07/08 jQuery
vue tab切换,解决echartst图表宽度只有100px的问题
2020/07/19 Javascript
[49:35]KG vs SECRET 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python任务调度实例分析
2015/05/19 Python
python中__slots__用法实例
2015/06/04 Python
Python实现二叉堆
2016/02/03 Python
python 获取网页编码方式实现代码
2017/03/11 Python
python中p-value的实现方式
2019/12/16 Python
CSS3中的5个有趣的新技术
2009/04/02 HTML / CSS
基于Jquery和Css3代码制作可以缩放的搜索框
2015/11/19 HTML / CSS
美国网上订购鲜花:FTD
2016/09/23 全球购物
美国体育用品在线:Modell’s Sporting Goods
2018/06/07 全球购物
城市轨道专业个人求职信范文
2013/09/23 职场文书
求职简历中的自我评价分享
2013/12/08 职场文书
法律六进活动方案
2014/03/13 职场文书
口才训练演讲稿范文
2014/09/16 职场文书
2014医学院领导干部四风对照检查材料思想汇报
2014/09/16 职场文书
2016年教代会开幕词
2016/03/04 职场文书
nginx 反向代理之 proxy_pass的实现
2021/03/31 Servers
Python 详解通过Scrapy框架实现爬取CSDN全站热榜标题热词流程
2021/11/11 Python
golang连接MySQl使用sqlx库
2022/04/14 Golang