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

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

三个文件放在同一文件夹下,然后试试效果,我肯定没骗你.

赞 (0)

相关推荐

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

    最有名的例子就是三国志和太阁里给新武将角色分配属性值啦. 在下不才,用javascript做了这么一个功能,顺便把页面中的链接下划线给隐藏掉. 大家看看,有什么更好的优化意见,大家尽管提. 下面是代码: 首先是test.html: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Docum

  • 在js文件中引入（调用）另一个js文件的三种方法

    比如我写了一个JS文件,这个文件需要调用另外一个JS文件,该如何实现呢?下面就总结下在js文件中引入另一个js文件的实现 方法一,在调用文件的顶部加入下例代码 function addScript(url){ document.write("<script language=javascript src="+url+"></script>"); } 注:有时你引用的文件还可能需要引用其他的js,我们需要将需要的那个js文件也以同样的方法引用进

  • 手把手教你自己写一个js表单验证框架的方法

    在表单程序中,在页面上需要很多的Js代码来验证表单,每一个field是否必须填写,是否 只能是数字,是否需要ajax到远程验证,blablabla. 如果一个一个单独写势必非常的繁琐,所以我们的第一个目标就是构建一个类似DSL的东西, 用表述的语句而非控制语句来实现验证. 其次一个个单独写的话还有一个问题就是必须全部验证通过才能提交,但是单独验证会因为 这个特征而增加很多额外的控制代码,且经常会验证不全面.所以第二个目标就是能够全面 的整合整个验证的过程. 最后不能是一个无法扩展的一切写死的实现

  • 用Vue.js实现监听属性的变化

    前言 创建 Vue 实例时,Vue 将遍历 data 的属性,通过 ES5 的 Object.defineProperty 将它们转为 getter/setter,在其内部 Vue 可以追踪依赖.通知变化. const vm = new Vue({ data: {foo: 1} // 'vm.foo' (在内部,同 'this.foo') 是响应的 }) 观察属性变化 Vue 的实例提供了 $watch 方法,用于观察属性变化. const vm = new Vue({ data: {foo:

  • javascript 基础篇1 什么是js 建立第一个js程序

    javascript 基础篇1 什么是js 建立第一个js程序

    javascript是一个基于对象和事件驱动,并且具有安全性的脚本语言,应用很广泛,不仅仅是网页,不要被jsp给困住. 基于对象,就是不需要指定变量的类型,你给他一个3,它知道是整型,如果给赋值'3',它就知道是char. 事件驱动,就是单击啊,之类的事件进行驱动. javascript优点:网页互动性强,简单易用.js主要是基于客户端运行,很大程度上减少了服务器的负荷. javascript是脚本编程语言:采用程序段方式实现,与HTML结合,java的编译器其实就是浏览器本身. 安全性:HTM

  • JS Testing Properties 判断属性是否在对象里的方法

    Testing Properties To check whether an object has a property with a given name. You can do this with the in operator, with the hasOwnProperty() and propertyIsEnumerable() methods, 在JS中判断一个对象是否包含某个属性,可以使用 in,hasOwnProperty() and propertyIsEnumerable()

  • Vue.js教程之计算属性

    Vue.js 的内联表达式非常方便,但它最合适的使用场景是简单的布尔操作或字符串拼接.如果涉及更复杂的逻辑,你应该使用计算属性. 计算属性是用来声明式的描述一个值依赖了其它的值.当你在模板里把数据绑定到一个计算属性上时,Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM.这个功能非常强大,它可以让你的代码更加声明式.数据驱动并且易于维护. 通常情况下,使用计算属性会比使用过程式的$watch回调更合适.比如下面的例子: <div id="demo">{{fullNa

  • 通过BootStrap-select插件 js jQuery控制select属性变化

    bootstrap-select我想大家都不陌生是一个前端下拉框的插件非常好用,在select的标签中设置属性可以做很多功能控制,不过初始化之后怎么去修改网上找遍中文英文也没有一个交代自己研究好久研究出来了,当然有的人会干掉重新生成那样太low,我决定来填补这个空白. js控制select属性变化其实很简单,并不需要 $('#goodsNames').selectpicker('render'); $('#goodsNames').selectpicker('refresh'); 来重新渲染只用

  • 如何判断出一个js对象是否一个dom对象

    我们在写js代码时有时需要判断某个对象是不是DOM对象,然后再进行后续的操作,这里我给出一种兼容各大浏览器,同时又算是比较稳妥的一种方法. 要判断一个对象是否DOM对象,首先想到的无非就是它是否具有DOM对象的各种属性或特征,比如是否有nodeType属性,有tagName属性,等等.判断的特征越多,也就越可靠,因为毕竟我们自定义的js对象也可以有那些属性.还有其他方法吗? 在DOM Level2标准中定义了一个HTMLElement对象,它规定所有的DOM对象都是HTMLElement的实例,

  • 详解JS中的attribute属性

    Attribute是属性的意思,文章仅对部分兼容IE和FF的Attribute相关的介绍. attributes:获取一个属性作为对象getAttribute:获取某一个属性的值 object.getAttributes(attribute) getAttribute方法不属于document对象,所以不能通过document对象获取,只能通过元素节点的调用.例如document.getElementsByTagName("p")[0]. getAttributes("tit

随机推荐