当前位置：首页 > news >正文

使用JavaScript写一个网页端的四则运算器

news 2025/5/6 15:58:08

style(内联样式表部分)

body部分

html

script

总的代码

网页演示

style(内联样式表部分)

 <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

 <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

<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>

        // 获取元素引用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 元素。

  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: 获取输入框的值。

 // 计算函数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发出警告，无效的运算符。

总的代码

<!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>