jquery 实现点击数字的加减
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>jquery 实现点击数字的增加,各减小</title> <!-- 引用百度开发平台 jquery --> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <!-- CREATE TIME 2015/4/4 --> </head> <style> #reduce,#increase{ border:1px solid #ccc; margin:10px; width: 20px; height: 20px; /*display: block;*/ /*float: left;*/ background: #ccc; line-height: 20px; cursor: pointer; } input{border:2px solid #ccc; width:50px; border-radius:3px; text-align: center; } </style> <body> <h1>在jquery 实现 一个页面内的加减</h1> <form action="#" method="post"> <div> <strong>数量:</strong><span id="reduce"> - </span><input type="text" value="1" id="num" name="num"/><span id="increase"> + </span> </div> </form> </body> <script> $(document).ready(function(){ /*加*/ $('#increase').click(function(){ //console.log('increase'); num = parseInt($('#num').val()); //console.log(num); var max = 1000; //console.log(max); /*假如不小于0*/ if(num < 1){ alert('值不能小于1'); return false; } /*假如不能超过最大数*/ if(num > parseInt(max)){ alert('值不能超过'+ max +''); return false; } if(num <= parseInt(max)){ finalnum = $('#num').val(num + 1); //console.log(finalnum); } }); /*减*/ $('#reduce').click(function(){ console.log('reduce'); num = parseInt($('#num').val()); //console.log(num); /*值不能减到小于1*/ if(num > 1 ){ $('#num').val( num - 1); } if(num <= 1 ){ alert('值不能小于1'); return false; } }); }); </script> </html> 渣渣的我,笨笨的学. 如果你发现有不好之处,可以指出来.
本文作者: basve
本文链接: https://www.jianbaizhan.com/article/200
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!