使用 JavaScript 实现简易计算器

引言

在 Web 开发中，利用 JavaScript 可以轻松地实现各种功能，包括制作一个简易的计算器。本文将详细介绍如何使用 HTML 和 JavaScript 来创建一个简单的在线计算器，并解释其中的关键代码和技术点。

效果图

在这里插入图片描述

1. HTML 结构

首先，我们需要构建计算器的 HTML 结构。我们将使用一个包含按钮和输入框的表单来创建这个计算器。

HTML 代码：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>JavaScript计算器</title>
    <style>
        /* 样式代码 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font: 14px Arial, sans-serif;
        }
        html {
            height: 100%;
            background-color: #ddd;
        }
        #big {
            margin: 15px auto;
            width: 330px;
            height: 470px;
            background-color: #789;
            border: 1px solid #342;
            padding: 15px;
        }
        #top {
            height: 20px;
        }
        #title {
            float: left;
            line-height: 30px;
        }
        #author {
            float: right;
            line-height: 30px;
        }
        #import {
            margin-top: 15px;
        }
        #dataname {
            margin-top: 5px;
            width: 300px;
            height: 40px;
            text-align: right;
            padding-right: 10px;
            font-size: 20px;
        }
        #key {
            border: 1px solid #ddd;
            height: 293px;
            margin-top: 25px;
            padding: 16px;
        }
        .buttons {
            float: left;
            width: 52px;
            height: 36px;
            text-align: center;
            background-color: #eee;
            margin: 0 18px 20px 0;
        }
        .buttons:hover {
            color: white;
            background-color: blue;
        }
        #bottom {
            margin-top: 20px;
            height: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="big">
        <div id="top">
            <span id="title">JavaScript计算器</span>
            <span id="author">@飞扬设计开发</span>
        </div>
        <div id="import">
            <div id="data"><input type="text" id="dataname"></div>
        </div>
        <div id="key">
            <!-- 数字和运算符按钮 -->
            <input type="button" id="CE" onclick="clearnum()" value="CE" class="buttons">
            <input type="button" id="C" onclick="clearnum()" value="C" class="buttons">
            <input type="button" id="Back" onclick="back()" value="Back" class="buttons">
            <input type="button" id="/" onclick="calc(this.id)" value="/" class="buttons" style="margin-right:0px">
            <input type="button" id="7" onclick="calc(this.id)" value="7" class="buttons">
            <input type="button" id="8" onclick="calc(this.id)" value="8" class="buttons">
            <input type="button" id="9" onclick="calc(this.id)" value="9" class="buttons">
            <input type="button" id="*" onclick="calc(this.id)" value="*" class="buttons" style="margin-right:0px">
            <input type="button" id="4" onclick="calc(this.id)" value="4" class="buttons">
            <input type="button" id="5" onclick="calc(this.id)" value="5" class="buttons">
            <input type="button" id="6" onclick="calc(this.id)" value="6" class="buttons">
            <input type="button" id="-" onclick="calc(this.id)" value="-" class="buttons" style="margin-right:0px">
            <input type="button" id="1" onclick="calc(this.id)" value="1" class="buttons">
            <input type="button" id="2" onclick="calc(this.id)" value="2" class="buttons">
            <input type="button" id="3" onclick="calc(this.id)" value="3" class="buttons">
            <input type="button" id="+" onclick="calc(this.id)" value="+" class="buttons" style="margin-right:0px">
            <input type="button" id="±" onclick="calc(this.id)" value="±" class="buttons">
            <input type="button" id="0" onclick="calc(this.id)" value="0" class="buttons">
            <input type="button" id="." onclick="calc(this.id)" value="." class="buttons">
            <input type="button" id="=" onclick="eva()" value="=" class="buttons" style="margin-right:0px">
        </div>
        <div id="bottom">
            <span id="welcome">欢迎使用JavaScript计算器</span>
        </div>
    </div>
    <script>
        var number = 0; // 定义第一个输入的数据
        function calc(number) {
            // 获取当前输入
            if (number == "%") {
                document.getElementById('dataname').value = Math.round(document.getElementById('dataname').value) / 100;
            } else {
                document.getElementById('dataname').value += document.getElementById(number).value;
            }
        }

        function eva() {
            // 计算输入结果
            document.getElementById("dataname").value = eval(document.getElementById("dataname").value);
        }

        function clearnum() {
            // 清零
            document.getElementById("dataname").value = null;
            document.getElementById("dataname").focus();
        }

        function back() {
            // 退格
            var arr = document.getElementById("dataname");
            arr.value = arr.value.substring(0, arr.value.length - 1);
        }
    </script>
</body>
</html>
2. JavaScript 功能实现

接下来，我们来解释一下 JavaScript 的功能实现部分。

2.1 calc(number) 函数

这个函数负责将用户点击的数字或运算符添加到输入框中。

function calc(number) {
    // 如果点击的是百分号，则将输入框的值转换为百分数
    if (number == "%") {
        document.getElementById('dataname').value = Math.round(document.getElementById('dataname').value) / 100;
    } else {
        // 否则，将点击的值追加到输入框中
        document.getElementById('dataname').value += document.getElementById(number).value;
    }
}
2.2 eva() 函数

此函数用于计算输入框中的表达式，并将结果显示在输入框中。

function eva() {
    document.getElementById("dataname").value = eval(document.getElementById("dataname").value);
}
2.3 clearnum() 函数

此函数用于清除输入框中的内容。

function clearnum() {
    document.getElementById("dataname").value = null;
    document.getElementById("dataname").focus();
}
2.4 back() 函数

此函数用于删除输入框中的最后一个字符。

function back() {
    var arr = document.getElementById("dataname");
    arr.value = arr.value.substring(0, arr.value.length - 1);
}
3. CSS 样式

为了使计算器看起来更美观，我们还为计算器添加了一些基本的 CSS 样式。

CSS 代码：

/* 样式代码 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font: 14px Arial, sans-serif;
}
html {
    height: 100%;
    background-color: #ddd;
}
#big {
    margin: 15px auto;
    width: 330px;
    height: 470px;
    background-color: #789;
    border: 1px solid #342;
    padding: 15px;
}
#top {
    height: 20px;
}
#title {
    float: left;
    line-height: 30px;
}
#author {
    float: right;
    line-height: 30px;
}
#import {
    margin-top: 15px;
}
#dataname {
    margin-top: 5px;
    width: 300px;
    height: 40px;
    text-align: right;
    padding-right: 10px;
    font-size: 20px;
}
#key {
    border: 1px solid #ddd;
    height: 293px;
    margin-top: 25px;
    padding: 16px;
}
.buttons {
    float: left;
    width: 52px;
    height: 36px;
    text-align: center;
    background-color: #eee;
    margin: 0 18px 20px 0;
}
.buttons:hover {
    color: white;
    background-color: blue;
}
#bottom {
    margin-top: 20px;
    height: 20px;
    text-align: center;
}
结论

通过本文，我们学习了如何使用 HTML 和 JavaScript 构建一个简易的在线计算器。从 HTML 结构的设计到 JavaScript 功能的实现，再到 CSS 样式的美化，每一个步骤都至关重要。希望这篇教程能帮助你理解如何利用前端技术创建实用的小工具。

扩展阅读

posted @   燕鹏  阅读(157)  评论(0)  编辑  收藏  举报  
（评论功能已被禁用）
相关博文：
· 使用 HTML 和 JavaScript 实现随机点名器
· Python使用tkinter库实现简易计算器
· 请实现一个计算器的功能
· JS_实现简单计算器
· 使用 HTML、CSS 和 JavaScript 的实时计算器
阅读排行：
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
历史上的今天：
2023-10-25 Thinkphp无限分类函数
点击右上角即可分享
微信分享提示