简易计算器做法-CSDN博客

本文链接：https://blog.csdn.net/qq_64276680/article/details/127187642

css代码：

*{
			margin: 0;
			padding: 0;
		}
		.big{
			/*设置弹性盒子*/
			display: flex;
			/*子元素以竖列排列，一共有6列*/
			flex-direction:column;
			background: black;
			width: 500px;
			height: 600px;
			/*左右均匀排列*/
			justify-content: space-around;
			/*上下均匀排列*/
			align-items: center;
		}
		.one{
			display: flex;
			/*以行排列*/
			flex-direction: row;
			width:350px;
			height: 70px;
			justify-content: space-between;
			align-items: center;
		}
		input{
			width:350px;
			height: 70px;
			border-radius: 20%;
		}
		.number{
			width: 70px;
			height: 70px;
			background: white;
			border-radius: 20%;
		}
		/*设置AC和0方块的宽度*/
		.x{
			width: 130px;
		}

html代码：

<body>
		<div class="big">
			<input type="text" id="inp"/>
			<div class="one">
				<button onclick="clears()" class="number x">AC</button>
				<button onclick="a('/')" class="number">/</button>
				<button onclick="a('%')" class="number">%</button>
			</div>
			<div class="one">
				<button onclick="a(7)" class="number">7</button>
				<button onclick="a(8)" class="number">8</button>
				<button onclick="a(9)" class="number">9</button>
				<button onclick="a('+')" class="number">+</button>
			</div>
			<div class="one">
				<button onclick="a(4)" class="number">4</button>
				<button onclick="a(5)" class="number">5</button>
				<button onclick="a(6)" class="number">6</button>
				<button onclick="a('-')" class="number">-</button>
			</div>
			<div class="one">
				<button onclick="a(1)" class="number">1</button>
				<button onclick="a(2)" class="number">2</button>
				<button onclick="a(3)" class="number">3</button>
				<button onclick="a('*')" class="number">*</button>
			</div>
			<div class="one">
				<button onclick="a(0)" class="number x">0</button>
				<button onclick="a('.')" class="number">.</button>
				<button onclick="res()" class="number">=</button>
			</div>
		</div>
		
	</body>

js代码：

function a(n){
		//获取input的id
		var inp=document.getElementById("inp");
		//将传入的参数n赋值给input的value
		inp.value=inp.value+n;
	}
	function res(){
		var inp=document.getElementById("inp");
		//eval方法计算input的值再赋值给value
		inp.value=eval(inp.value);  
	}
	//AC清空数据
	function clears(){
		inp.value=" ";
	}