jquery 实现点击数字的加减

作者：basve - 2015年04月05日

<!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"> +&nbsp;</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 许可协议。转载请注明出处！