实现一个简单的加减按钮

最新推荐文章于 2024-05-31 07:18:46 发布

蒲小若

最新推荐文章于 2024-05-31 07:18:46 发布

阅读量9.8k

点赞数 1

分类专栏：前端开发经验总结录

本文链接：https://blog.csdn.net/qq_39585562/article/details/77343327

版权

前端开发经验总结录专栏收录该内容

40 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<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>
	</head>
	<body>
		<div class="box">
			<div id="left"><</div>
			<div id="center">5</div>
			<div id="right">></div>
		</div>
	</body>
</html>

蒲小若

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
实现一个简单的加减按钮

.box{ width: 192px; height: 50px; margin: 0 auto; margin-top: 100px; border: 1px solid red; } #left,#center,#right{ float: left; width: 50px; height: 50px; li
复制链接

扫一扫

专栏目录