一个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 盒模型 尺寸深入理解
Dec 31 Javascript
下拉列表select 由左边框移动到右边示例
Dec 04 Javascript
js出生日期 年月日级联菜单示例代码
Jan 10 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
Mar 16 Javascript
javascript对JSON数据排序的3个例子
Apr 12 Javascript
原生Javascript封装的一个AJAX函数分享
Oct 11 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
Sep 17 Javascript
在bootstrap中实现轮播图实例代码
Jun 11 Javascript
帝国cms首页列表页实现点赞功能
Oct 30 Javascript
Vue Echarts实现可视化世界地图代码实例
May 07 Javascript
ES6 Promise对象的含义和基本用法分析
Jun 14 Javascript
基于javascript处理二进制图片流过程详解
Jun 08 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
是否存在第一台收音机的说法
2021/03/01 无线电
PHP中的一些常用函数收集
2015/05/26 PHP
PHP实现抓取迅雷VIP账号的方法
2015/07/30 PHP
jquery 1.4.2发布!主要是性能与API
2010/02/25 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
2013/12/06 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
2016/09/14 Javascript
微信小程序 实现动态显示和隐藏某个控件
2017/04/27 Javascript
Vue.js中组件中的slot实例详解
2017/07/17 Javascript
iscroll动态加载数据完美解决方法
2017/07/18 Javascript
基于vue1和vue2获取dom元素的方法
2018/03/17 Javascript
微信小程序基于Taro的分享图片功能实践详解
2019/07/12 Javascript
如何给element添加一个抽屉组件的方法步骤
2019/07/14 Javascript
vue实现匀速轮播效果
2020/06/29 Javascript
使用Python脚本对Linux服务器进行监控的教程
2015/04/02 Python
浅谈Python 集合(set)类型的操作——并交差
2016/06/30 Python
python+opencv轮廓检测代码解析
2018/01/05 Python
Python cv2 图像自适应灰度直方图均衡化处理方法
2018/12/07 Python
python连接mongodb集群方法详解
2020/02/13 Python
python数据库操作mysql:pymysql、sqlalchemy常见用法详解
2020/03/30 Python
python批量检查两个对应的txt文件的行数是否一致的实例代码
2020/10/31 Python
用python制作个视频下载器
2021/02/01 Python
Stuart Weitzman美国官网:美国奢华鞋履品牌
2016/08/18 全球购物
第二层交换机和路由器的区别?第三层交换机和路由器的区别?
2013/05/23 面试题
暑期社会实践感言
2014/02/25 职场文书
初中学生期末评语
2014/04/24 职场文书
演讲稿祖国在我心中
2014/05/04 职场文书
幼儿园课题实施方案
2014/05/14 职场文书
求职信名称怎么写
2014/05/26 职场文书
机械专业求职信范文
2014/07/15 职场文书
绿色环保家庭事迹材料
2014/08/31 职场文书
企业反腐倡廉心得体会
2015/08/15 职场文书
情感电台广播稿
2015/08/18 职场文书
简历上的自我评价,该怎么写呢?
2019/06/13 职场文书
CSS3 制作的图片滚动效果
2021/04/14 HTML / CSS
Python与C++中梯度方向直方图的实现
2022/03/17 Python
Python内置包对JSON文件数据进行编码和解码
2022/04/12 Python