目录
style(内联样式表部分)
css
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.calculator {
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: white;
width: 300px;
}
.input-group {
display: flex;
flex-direction: row;
margin-bottom: 10px;
}
.input-group label {
width: 100px;
text-align: right;
padding-right: 10px;
}
.input-group input {
flex-grow: 1;
}
.result {
margin-top: 20px;
text-align: center;
}
</style>设置了元素选择器（body）和很多类选择器。
font-family: 页面使用的字体
display: flex: 使用弹性盒子布局
justify-content: center: 内容居中对齐
align-items: center: 垂直居中对齐
height: 100vh: 高度为视口高度
background-color: 背景颜色
padding: 内边距
border: 边框样式
border-radius: 圆角
background-color: 背景颜色
width: 宽度
flex-direction: row: 子元素水平排列
margin-bottom: 下边距
text-align: right: 文本右对齐
padding-right: 右边距
flex-grow: 1: 填充剩余空间
text-align: 文本居中对齐
body部分
html
css
<div class="calculator">
<h2>四则运算计算器</h2>
<div class="input-group">
<label for="num1">数字 1:</label>
<input type="number" id="num1" required>
</div>
<div class="input-group">
<label for="operator">运算符:</label>
<select id="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
</div>
<div class="input-group">
<label for="num2">数字 2:</label>
<input type="number" id="num2" required>
</div>
<button id="calculateButton">计算</button>
<div class="result">
<p>结果: <span id="result"></span></p>
</div>定义数字 1 的输入框：
label: 标签（num1）。
input: 输入框，类型为数字（number），要求必填（required）。
定义运算符的选择框：
label: 标签（operator）。
select: 下拉选择框（加减乘除四个选项）。
option: 选项。
定义数字 2 的输入框：
label: 标签（num2）。
input: 输入框，类型为数字（number），要求必填（required）。
提交按钮（button），用于触发计算操作。
定义结果（result）显示区域：
div: 包装元素result。
p: 段落，包含结果显示文本。
span: 用于显示计算结果。
script
css
<script>
// 获取元素引用
var num1Input = document.getElementById("num1");
var num2Input = document.getElementById("num2");
var operatorSelect = document.getElementById("operator");
var calculateButton = document.getElementById("calculateButton");
var resultSpan = document.getElementById("result");
// 添加点击事件监听器
calculateButton.addEventListener('click', function() {
var num1 = parseFloat(num1Input.value);
var num2 = parseFloat(num2Input.value);
var operator = operatorSelect.value;
var result = performCalculation(num1, num2, operator);
resultSpan.textContent = result;
});
// 计算函数
function performCalculation(num1, num2, operator) {
switch (operator) {
case '+':
return num1 + num2;
case '-':
return num1 - num2;
case '*':
return num1 * num2;
case '/':
if (num2 === 0) {
alert("除数不能为零！");
return null;
}
return num1 / num2;
default:
alert("无效的运算符！");
return null;
}
}
</script>
css
// 获取元素引用
var num1Input = document.getElementById("num1");
var num2Input = document.getElementById("num2");
var operatorSelect = document.getElementById("operator");
var calculateButton = document.getElementById("calculateButton");
var resultSpan = document.getElementById("result");定义5个变量获取页面上的各个元素引用：
num1Input: 数字 1 的输入框。
num2Input: 数字 2 的输入框。
operatorSelect: 运算符选择框。
calculateButton: 计算按钮。
resultSpan: 显示结果的 span 元素。
css
calculateButton.addEventListener('click', function() {
var num1 = parseFloat(num1Input.value);
var num2 = parseFloat(num2Input.value);
var operator = operatorSelect.value;
var result = performCalculation(num1, num2, operator);
resultSpan.textContent = result;
});添加点击事件监听器：
如果用户点击了button，就将输入的num1赋值给num1，输入的num2赋值给num2，输入的运算符赋值给operator，将result使用performCalculation函数计算出，并将结果更新到页面的结果显示区域。
parseFloat: 将字符串转换为浮点数。
value: 获取输入框的值。
css
// 计算函数
function performCalculation(num1, num2, operator) {
switch (operator) {
case '+':
return num1 + num2;
case '-':
return num1 - num2;
case '*':
return num1 * num2;
case '/':
if (num2 === 0) {
alert("除数不能为零！");
return null;
}
return num1 / num2;
default:
alert("无效的运算符！");
return null;
}计算函数：
检测不同的运算符，如果是加减乘就进行对应的运算，如果是除法要特判一下除数不能为0，如果为0就使用alert弹出警告。
如果输入的运算符不是加减乘除中的一种，同样要使用alert发出警告，无效的运算符。
总的代码
css
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>四则运算计算器</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.calculator {
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: white;
width: 300px;
}
.input-group {
display: flex;
flex-direction: row;
margin-bottom: 10px;
}
.input-group label {
width: 100px;
text-align: right;
padding-right: 10px;
}
.input-group input {
flex-grow: 1;
}
.result {
margin-top: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="calculator">
<h2>四则运算计算器</h2>
<div class="input-group">
<label for="num1">数字 1:</label>
<input type="number" id="num1" required>
</div>
<div class="input-group">
<label for="operator">运算符:</label>
<select id="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
</div>
<div class="input-group">
<label for="num2">数字 2:</label>
<input type="number" id="num2" required>
</div>
<button id="calculateButton">计算</button>
<div class="result">
<p>结果: <span id="result"></span></p>
</div>
</div>
<script>
// 获取元素引用
var num1Input = document.getElementById("num1");
var num2Input = document.getElementById("num2");
var operatorSelect = document.getElementById("operator");
var calculateButton = document.getElementById("calculateButton");
var resultSpan = document.getElementById("result");
// 添加点击事件监听器
calculateButton.addEventListener('click', function() {
var num1 = parseFloat(num1Input.value);
var num2 = parseFloat(num2Input.value);
var operator = operatorSelect.value;
var result = performCalculation(num1, num2, operator);
resultSpan.textContent = result;
});
// 计算函数
function performCalculation(num1, num2, operator) {
switch (operator) {
case '+':
return num1 + num2;
case '-':
return num1 - num2;
case '*':
return num1 * num2;
case '/':
if (num2 === 0) {
alert("除数不能为零！");
return null;
}
return num1 / num2;
default:
alert("无效的运算符！");
return null;
}
}
</script>
</body>
</html>网页演示
