话不多说我们上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			input[type='button']{
   width: 50px;height: 50px;}
			//设置输入框的宽高都为50px
			.mydiv{
   width: 215px;height: 250px;border: 1px solid black;margin: 0 auto;}
			//设置计算器的边框的大小和居中对齐
		</style>
		<script>
			function setVal(myval){
   str =  document.getElementById("mytext1").value+=myval;}
			//此函数是累加输入框的内容到str 
			function cale(){
    document.getElementById("mytext1").value = eval(str);}
			//计算器计算的主要功能通过elval函数来实现的
			//eval函数的主要功能就是字符串的的数值计算
			function zro(){
   document.getElementById("mytext1").value ="";}
			//此功能是清空输入框的内容实现归0
		</script>
	</head>
	<body>
		<div class="mydiv">
			<input id="mytext1" style="width: 210px; height: 40px;"  type="text" /><br />
			<input  type="button" value="7" onclick="setVal('7')"/>
			<input type="button" value="8" onclick="setVal('8')"/>
			<input type="button" value="9" onclick="setVal('9')"/>
			<input  type="button" value="+" onclick="setVal('+')"/>
			<input type="button" value="4" onclick="setVal('4')"/>
			<input type="button" value="5" onclick="setVal('5')"/>
			<input  type="button" value="6" onclick="setVal('6')"/>
			<input type="button" value="-" onclick="setVal('-')"/>
			<input type="button" value="1" onclick="setVal('1')"/>
			<input  type="button" value="2" onclick="setVal('2')"/>
			<input type="button" value="3" onclick="setVal('3')"/>
			<input type="button" value="*" onclick="setVal('*')"/>
			<input type="button"  value="0" onclick="setVal('0')"/>
			<input type="button"  value="归零" onclick="zro()"/>
			<input  type="button" value="=" onclick="cale()"/>
			<input type="button" value="/" onclick="setVal('/')"/>	
		</div>
	</body>
</html>

代码很少功能也不完善，适合初级入门找找代码的实现感