간단한 가감 단추를 실현하다



	
		
		
		<style type="text/css">
			
			.box{
				width: 192px;
				height: 50px;
				margin: 0 auto;
				margin-top: 100px;
				border: 1px solid red;
			}
			#left,#center,#right{
				float: left;
				width: 50px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				background: #eee;
				font-weight: bold;
				font-size: 18px;
				cursor: pointer;
			}
			#center{
				width: 90px;
				background: #fff;
				cursor: auto;
			}
			#right{
				float: right;
				cursor: pointer;
			}
		</style>
		<script type="text/javascript">
			if (window.addEventListener) {
				window.addEventListener("load",init);
			} else if(window.attachEvent()){   //IE      addEventListener
				window.attachEvent("onload",init);  //IE              on
			}
		
			function init(){
				var left = document.getElementById("left");
				left.onclick = function (){
					leftNum();   
				}
				
				var right = document.getElementById("right");
				right.onclick = function (){
					rightNum();
				}
				
				function leftNum(){
					var center = document.getElementById("center").innerHTML;
					if (center > 1) {   //          1
						center--;       //  
						currentNum(center);  //          
					} else{
						alert("        ！！！");
					}
				}
				
				function rightNum(){
					var center = document.getElementById("center").innerHTML;
					if (center < 10) {   //               
						center++  //  
						currentNum(center);   //           
					} else{
						alert("         ！！！");
					}
				}
				
				function currentNum(num){
					center.innerHTML = num;   //          
				}
			}
			
		</script>
	
	
		<div class="box">
			<div id="left"><</div>
			<div id="center">5</div>
			<div id="right">></div>
		</div>
	

</code></pre> 
  <br/> 
 </div> 
</div>
                            </div>
                        </div>
간단한 가감 단추를 실현하다

좋은 웹페이지 즐겨찾기
