一个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 相关文章推荐
jquery复选框CHECKBOX全选、反选
Aug 30 Javascript
什么是JavaScript
Aug 13 Javascript
JavaScript实现生成GUID(全局统一标识符)
Sep 05 Javascript
jQuery中is()方法用法实例
Jan 06 Javascript
script标签属性用type还是language
Jan 21 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
May 09 Javascript
jquery代码规范让代码越来越好看
Feb 03 Javascript
javascript获取以及设置光标位置
Feb 16 Javascript
Vue学习之路之登录注册实例代码
Jul 06 Javascript
python爬取安居客二手房网站数据(实例讲解)
Oct 19 Javascript
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
Mar 13 Javascript
如何在vue 中引入使用jquery
Nov 10 jQuery
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
19个Android常用工具类汇总
2014/12/30 PHP
php将日期格式转换成xx天前的格式
2015/04/16 PHP
PHP中的类型约束介绍
2015/05/11 PHP
Symfony2获取web目录绝对路径、相对路径、网址的方法
2016/11/14 PHP
PHP编程获取音频文件时长的方法【基于getid3类】
2017/04/20 PHP
使用WAMP搭建PHP本地开发环境
2017/05/10 PHP
ThinkPHP框架实现的微信支付接口开发完整示例
2019/04/10 PHP
php版本CKEditor 4和CKFinder安装及配置方法图文教程
2019/06/05 PHP
常用js脚本
2006/12/03 Javascript
ExtJS 2.0实用简明教程 之获得ExtJS
2009/04/29 Javascript
js word表格动态添加代码
2010/06/07 Javascript
js实现简单登录功能的实例代码
2013/11/09 Javascript
JavaScript动态插入script的基本思路及实现函数
2013/11/11 Javascript
node.js中的fs.mkdirSync方法使用说明
2014/12/17 Javascript
js获取微信版本号的方法
2015/05/12 Javascript
浅析jQuery中使用$所引发的问题
2016/05/29 Javascript
XMLHttpRequest Level 2 使用指南
2016/08/26 Javascript
数组Array的排序sort方法
2017/02/17 Javascript
vue根据值给予不同class的实例
2018/09/29 Javascript
vue基本使用--refs获取组件或元素的实例
2019/11/07 Javascript
浅谈es6中的元编程
2020/12/01 Javascript
linux下python抓屏实现方法
2015/05/22 Python
Python实现E-Mail收集插件实例教程
2019/02/06 Python
Python实现的爬取百度文库功能示例
2019/02/16 Python
Python第三方库face_recognition在windows上的安装过程
2019/05/03 Python
Python递归求出列表(包括列表中的子列表)的最大值实例
2020/02/27 Python
Python使用OpenPyXL处理Excel表格
2020/07/02 Python
python中类与对象之间的关系详解
2020/12/16 Python
html5+css3之制作header实例与更新
2020/12/21 HTML / CSS
简单整理HTML5的基本特性和语法
2016/02/18 HTML / CSS
使用placeholder属性设置input文本框的提示信息
2020/02/19 HTML / CSS
党的生日演讲稿
2014/09/10 职场文书
工程竣工验收申请报告
2015/05/15 职场文书
礼貌问候语大全
2015/11/10 职场文书
加强党性修养心得体会
2016/01/21 职场文书
MySQL基于索引的压力测试的实现
2021/11/07 MySQL