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

柏箱2024-10-07 8:29

目录

style(内联样式表部分)

body部分

html

script

总的代码

网页演示

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>

网页演示

相关推荐
deli0078 分钟前
DLA 枝晶生长实测：5000 个粒子集体停摆之后，分形维数收敛到 1.70
前端
IT_陈寒17 分钟前
Redis卡顿的锅，这次真不是大key的错
前端·人工智能·后端
可乐鸡翅yeah_23 分钟前
video.js 集成 hls.js 开发 M3U8 播放器，新手高频踩坑
开发语言·前端·javascript·后端·ecmascript·m3u8·音视频在线播放
程序猿追1 小时前
HarmonyOS 6 上做个极简浏览器：Web 组件 + 前进后退 + 加载进度
前端·华为·harmonyos
沐沐师1 小时前
Mybatis 框架教程
前端
三天不学习1 小时前
Tailwind CSS 快速入门（2026 版）：从 v4 零配置上手，到「该不该用、怎么用好」的选型实战
前端·css·tailwind
明月_清风1 小时前
面对陌生的 GitHub 项目无从下手？这 4 个网站帮你快速读懂源码
前端·后端·github
htzyl2062 小时前
前端阶梯——第九章、颜色、文本与背景
前端·css
zhangzeyuaaa2 小时前
Ruby `require` 完全指南：从 `$LOAD_PATH` 到 `require_relative`
服务器·前端·ruby
htzyl2062 小时前
前端阶梯——第八章、CSS入门与选择器
前端·css
热门推荐
01如何新建文件夹？ 电脑新建文件夹的4种方法02历年考研数学一、数学二、数学三真题试卷及答案PDF03国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）04GitHub 镜像站点05轻量化AI渗透武器库｜ARTEX自主攻防系统、资产梳理、漏洞挖掘、链路分析全流程智能化落地06蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接07Telegram APK 下载安装完整指南 — 2026年最新08Windows 10/11 如何退出微软账户并改用本地账户登录（含找不到选项的解决方法）09微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新102026 爱知・名古屋亚运会怎么看？直播平台+赛程安排分享