数字加减控件实现
2017-12-25 10:59
225 查看
效果:
样式:
jsp:
js实现加减效果:
样式:
.gw_num{border: 1px solid #dbdbdb;width: 110px;line-height: 26px;overflow: hidden;} .gw_num em{display: block;height: 26px;width: 31px;float: left;color: #7A7979;border-right: 1px solid #dbdbdb;text-align: center;cursor: pointer;font-style:normal;} .gw_num .num{display: block;float: left;text-align: center;width: 42px;font-style: normal;font-size: 14px;line-height: 24px;border: 0;} .gw_num em.add{float: right;border-right: 0;border-left: 1px solid #dbdbdb;}
jsp:
<tbody> <c:forEach items="${uservos}" var="uservo"> <tr> <td >${uservo.username}<input type="hidden" name="names" value="${uservo.username}"/></td> <td align="center"> <div class="gw_num"> <em class="jian">-</em> <input type="text" value="${uservo.score==null?100:uservo.score}" name="scores" class="num" readonly/> <em class="add">+</em> </div> </td> </tr> </c:forEach> </tbody>
js实现加减效果:
$(".add").click(function(){ var n=$(this).prev().val(); var num=parseInt(n)+1; if(num>120){ return;} $(this).prev().val(num); }); //减的效果 $(".jian").click(function(){ var n=$(this).next().val(); var num=parseInt(n)-1; if(num<60){ return;} $(this).next().val(num); });
相关文章推荐
- JavaScript实现的可变动态数字键盘控件三种方式
- Android利用布局实现伪自定义商品数量加减控件
- 实现大数字加减。
- 基于input文本框实现的数字控件
- VC6下使编辑控件只能输入数字的简单实现
- Js中实现日期加减--字符串转换成数字进行运算
- iOS cocos2d 实现RollNumber(数字滚动效果)控件效果源码
- OCX控件打包成CAB并实现数字签名过程
- js金额数字格式化实现代码(加减逗号处理)
- JavaScript实现的可变动态数字键盘控件三种方式
- 在GridView控件内文本框实现TextChanged事件,勾选复选框时 :textbox文本框可编辑,编辑文本框的数字后 总金额会重新计算并统计
- python实现输入数字的连续加减方法
- iOS 滚动数字控件:DPScrollNumberLabel 实现
- Delphi控件TEdit只接受数字键和退格键的实现方法
- js控制文本框输入的内容为(数字、字母、汉字)(一、js在控件中实现)
- JavaScript实现的可变动态数字键盘控件三种方式
- Unity 2048数字控件Num的代码实现
- 实现点击加减数字进行变化
- jQuery实现购物车数字加减效果
- OCX控件打包成CAB并实现数字签名过程