用JavaScript实现简单的计算器

最新推荐文章于 2025-06-17 16:07:06 发布

sima_dubai

最新推荐文章于 2025-06-17 16:07:06 发布

阅读量8k

点赞数 16

CC 4.0 BY-SA版权

文章标签：计算器 JavaScript 前端

本文链接：https://blog.youkuaiyun.com/sinat_37503265/article/details/90707690

该博客介绍基于JavaScript实现计算器加减乘除等基本功能。先通过div标签搭建骨架，用CSS设置样式形成可视化界面，再用JavaScript实现操作功能，声明操作函数、初始化变量、添加按钮点击响应事件。还总结了清除、多位数操作、连续计算等技术难点及解决办法。

基于JavaScript实现计算器中的加减乘除等基本功能

先通过div标签制作出计算器的基本骨架。

<div id="box">
        <div id="show"></div>
        <div id="clear">C</div>
        <div id="btn-1">1</div>
        <div id="btn-2">2</div>
        <div id="btn-3">3</div>
        <div id="btn-equal">=</div>
        <div id="btn-4">4</div>
        <div id="btn-5">5</div>
        <div id="btn-6">6</div>
        <div id="btn-subtract">-</div>
        <div id="btn-7">7</div>
        <div id="btn-8">8</div>
        <div id="btn-9">9</div>
        <div id="btn-divide">÷</div>
        <div id="btn-multiply">×</div>
        <div id="btn-0">0</div>
        <div id="btn-point">.</div>
        <div id="btn-sum">+</div>
    </div>

结合css给其设置样式，模拟出计算器的静态可视化界面。

        div {
              font-size: 24px;
        }
        #box {
            width: 400px;
            height: 500px;
            margin: 100px auto;
            border: 1px solid #f2f2f2;
         }
        #box div {
            float: left;
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            background-color: #f2f2f2;
            box-sizing: border-box;
            border: 1px solid #999;
            cursor: pointer;
        }
        #box div:hover {
            background-color: #1C87DB;
        }
        #box #show {
            width: 300px;
            height: 100px;
            background-color: #fff;
            cursor: text;
            text-align: left;
        }

计算器可视化静态界面

计算器静态页面

用JavaScript实现其基本操作功能
声明加减乘除等基本操作的函数

        //加减乘除函数声明
        function getSum(a, b) {
            return a + b;
        }

        function getSub(a, b) {
            return a - b;
        }

        function getMul(a, b) {
            return a * b;
        }

        function getDivi(a, b) {
            return a / b;
        }

声明三个变量并进行变量的初始化，其中s1,s2用来记录需要操作的两个数，s3记录运算操作符。

        //s1，s2 记录输入的两个数；s3记录运算符
        var s1, s2, s3;
        //变量初始化
        s1 = '';
        s2 = '';
        s3 = '';

为各个按钮添加点击响应事件

        // 添加鼠标响应事件
        var show = document.getElementById('show');
        //清除记录事件，只需将s1,s2,s3还有显示文本框中的内容全部置为空即可
        document.getElementById('clear').onclick = function () {
            show.innerText = '';
            s1 = '';
            s2 = '';
            s3 = '';
        }
        //s3为空时，将再次获取的值与s1原字符串进行拼接，并将字符串s1的结果显示在显示文本框中；反之，则将获取的值与字符串s2进行拼接，并将s2显示在文本框中。
        document.getElementById('btn-1').onclick = function () {
            if (s3 == '') {
                s1 += '1';
                show.innerText = s1;
            } else {
                s2 += '1';
                show.innerText = s2;
            }
        }
        document.getElementById('btn-2').onclick = function () {
            if (s3 == '') {
                s1 += '2';
                show.innerText = s1;
            } else {
                s2 += '2';
                show.innerText = s2;
            }
        }
        document.getElementById('btn-3').onclick = function () {
            if (s3 == '') {
                s1 += '3';
                show.innerText = s1;
            } else {
                s2 += '3';
                show.innerText = s2;
            }
        }
        document.getElementById('btn-4').onclick = function () {
            if (s3 == '') {
                s1 += '4';
                show.innerText = s1;
            } else {
                s2 += '4';
                show.innerText = s2;
            }
        }
        document.getElementById('btn-5').onclick = function () {
            if (s3 == '') {
                s1 += '5';
                show.innerText = s1;
            } else {
                s2 += '5';
                show.innerText = s2;
            }
        }
        document.getElementById('btn-6').onclick = function () {
            if (s3 == '') {
                s1 += '6';
                show.innerText = s1;
            } else {
                s2 += '6';
                show.innerText = s2;
            }
        }
        document.getElementById('btn-7').onclick = function () {
            if (s3 == '') {
                s1 += '7';
                show.innerText = s1;
            } else {
                s2 += '7';
                show.innerText = s2;
            }
        }
        document.getElementById('btn-8').onclick = function () {
            if (s3 == '') {
                s1 += '8';
                show.innerText = s1;
            } else {
                s2 += '8';
                show.innerText = s2;
            }
        }
        document.getElementById('btn-9').onclick = function () {
            if (s3 == '') {
                s1 += '9';
                show.innerText = s1;
            } else {
                s2 += '9';
                show.innerText = s2;
            }
        }
        document.getElementById('btn-0').onclick = function () {
            if (s3 == '') {
                s1 += '0';
                show.innerText = s1;
            } else {
                s2 += '0';
                show.innerText = s2;
            }
        }
        document.getElementById('btn-point').onclick = function() {
            if (s3 == '') {
                if(s1 != ''){
                    s1 += '.';
                    show.innerText = s1;
                }
            }
            else {
                if(s2 != ''){
                    s2 += '.';
                    show.innerText = s2;
                }
            }
        }
        document.getElementById('btn-sum').onclick = function () {
            s3 = "+";
        }
        document.getElementById('btn-subtract').onclick = function () {
            s3 = "-";
        }
        document.getElementById('btn-multiply').onclick = function () {
            s3 = "*";
        }
        document.getElementById('btn-divide').onclick = function () {
            s3 = "/";
        }
        //等号事件响应：当s3获取的值为加号，则调用求和函数；当获取的值为减号，则调用求差函数；若获取的值为星号，则调用乘积函数；否则调用求商函数；
        document.getElementById('btn-equal').onclick = function () {
            if (s3 == '+') {
                s1 = parseFloat(s1);
                s2 = parseFloat(s2);
                show.innerText = getSum(s1, s2);
                s1 = getSum(s1,s2);
                s2 = '';
                s3 = '';
            } else if (s3 == '-') {
                s1 = parseFloat(s1);
                s2 = parseFloat(s2);
                show.innerText = getSub(s1, s2);
                s1 = getSub(s1,s2);
                s2 = '';
                s3 = '';
            } else if (s3 == '*') {
                s1 = parseFloat(s1);
                s2 = parseFloat(s2);
                show.innerText = getMul(s1, s2);
                s1 = getMul(s1,s2);
                s2 = '';
                s3 = '';
            } else {
                s1 = parseFloat(s1);
                s2 = parseFloat(s2);
                show.innerText = getDivi(s1, s2);
                s1 = getDivi(s1,s2);
                s2 = '';
                s3 = '';
            }
        }

技术难点总结
如何实现清除操作？
只需将字符串s1,s2,s3等置为空字符串，并同时让显示文本框show.innerText = ‘’;这样便可实现清除操作；
如何实现多位数的操作？
首先判断用户有没有输入操作运算符，如用户还没有输入操作运算符，即s3 = '‘时，只需将用户输入的值拼接到字符串s1后面，并同时让其显示在显示框中（show.innerText = s1）;若用户已经输入操作运算符，即s3 !=’'时，将用户输入的值拼接到字符串s2后面，并同时让其显示在显示框中（show.innerText = s2）。
如何实现方便用户的连续计算操作？
在每次运算结束后将运算的结果赋值给s1,同时将s2,s3置为空字符串即可实现。
测试结果