JavaScript 计算器的制作及详细解释适合你

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简易计算器</title>
<style>
.calculator { /*盒子的类*/
width: 500px;
height: 400px;
margin: 400px auto; /*px 代表盒子边距的距离-->*/
border: dashed #58e55e; /*边缘线条样式加颜色*/
padding: 10px; /*内边距距离*/
border-radius: 60px; /*边缘四个角圆角距离*/
/*box-shadow: 0 80px 100px rgba(0, 0, 0, 0.1);*/ /*阴影效果*/
}
.calculator input[type="text"] { /*这是定位的那个显示框*/
width: 100%;
margin-bottom: 30px; /*底部外边距30，给第一行留间距的*/
/*padding: 10px;*/ /*内边距的*/
}
.calculator input[type="button"] { /*数字按键些*/
width: 20%;
padding: 20px;
margin-left: 15px;
margin-bottom: 30px; /*按键大小*/
/*box-sizing: border-box;*/
}

</style>
</head>
<body>

<div class="calculator">
<input type="text" id="display" disabled>
<input type="button" value="1" οnclick="addToDisplay('1')">
<input type="button" value="2" οnclick="addToDisplay('2')">
<input type="button" value="3" οnclick="addToDisplay('3')">
<input type="button" value="+" οnclick="addToDisplay('+')">
<input type="button" value="4" οnclick="addToDisplay('4')">
<input type="button" value="5" οnclick="addToDisplay('5')">
<input type="button" value="6" οnclick="addToDisplay('6')">
<input type="button" value="-" οnclick="addToDisplay('-')">
<input type="button" value="7" οnclick="addToDisplay('7')">
<input type="button" value="8" οnclick="addToDisplay('8')">
<input type="button" value="9" οnclick="addToDisplay('9')">
<input type="button" value="*" οnclick="addToDisplay('*')">
<input type="button" value="0" οnclick="addToDisplay('0')">
<input type="button" value="C" οnclick="clearDisplay()">
<input type="button" value="=" οnclick="calculate()">
<input type="button" value="/" οnclick="addToDisplay('/')">
</div>

<script>
function addToDisplay(value) { //点击鼠标的时候就会调用方法并且将value值传过来
var displayElement= document.getElementById('display');
var currentValue=displayElement.value
var newValue=currentValue+value;//当点第一次1的时候前两行不起作用，因为框里面没有东西，
当第二次点击的时候，就获取了框内的1和当前点击按钮的value值
displayElement.value=newValue;//这里每次更新框框内按钮的数字包括加减号，显示出来
}

function clearDisplay() {
document.getElementById('display').value = '';
}

function calculate() {
var expression = document.getElementById('display').value;//获取框内的所有字符
var result = eval(expression);//eval内置计算函数计算上面框内的字符
document.getElementById('display').value = result;

//querySelectorAll，它用于获取文档中匹配指定 CSS 选择器的所有元素，返回的是一个 NodeList 对象。
}
</script>

</body>
</html>