前端案例：简易计算器（html+css+JavaScript）

本文章介绍了使用HTML+CSS+JavaScript制作一个简易计算器。

文章共3,786字 · 阅读需要大约13分钟

一键AI生成摘要，助你高效阅读

问答

多喝热水_starry

3667人浏览 · 2023-09-19 22:38:02

多喝热水_starry · 2023-09-19 22:38:02 发布

一、效果图

在这里插入图片描述

二、实现代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算器</title>
    <style>
        /* 设置顶部标题栏样式 */
        #top {
            width: 450px;
            height: 50px;
            margin: auto;
            background-color: #4278bb;
            border-radius: 10px 10px 0px 0px;
        }

        /* 设置标题样式 */
        #calc-title {
            font-size: 22px;
            color: white;
            float: left;
            margin: 10px 10px 0px 200px;
        }

        /* 设置结果显示样式 */
        #result {
            width: 445px;
            height: 60px;
            margin: auto;
            font-size: 40px;
            background-color: white;
            border: solid 3px #4278bb;
        }

        /* 设置按钮样式 */
        #button {
            width: 450px;
            height: 422px;
            background-color: #4278bb;
            margin: auto;
        }

        #button div {
            width: 108px;
            height: 80px;
            float: left;
            background-color: #7ecbff;
            margin: 2px;
            line-height: 80px;
            text-align: center;
            font-size: 26px;
        }

        #button div:hover {
            background-color: rgb(48, 149, 203);
        }
    </style>
    <script type="text/javascript">
        // 传递输入的数字
        function clickNumber(number) {
            var result = document.getElementById("result");
            result.innerHTML = result.innerHTML + number;
        }
        //传递输入运算符
        function clickOperator(operator) {
            var result = document.getElementById("result");
            var string = result.innerHTML;
            var len = string.length;
            var last = string.charAt(len - 1);
            if (last == "+" || last == "-" || last == "*" || last == "/" || last == "%") {
                var temp = string.substr(0, len - 1) + operator;
                result.innerHTML = temp;
            } else {
                result.innerHTML += operator;
            }
        }
        // 输入小数点
        function clickPonit() {
            var result = document.getElementById("result");
            var string = result.innerHTML;
            var len = string.length;
            var last = string.charAt(len - 1);
            if (last !== ".") {
                result.innerHTML = result.innerHTML + ".";
            } else {
                result.innerHTML = result.innerHTML;
            }
        }
        // 清空输入
        function clearresult() {
            var result = document.getElementById("result");
            result.innerHTML = "";
        }
        // 删除操作
        function del() {
            var result = document.getElementById("result");
            var string = result.innerHTML;
            if (string.length > 0) {
                result.innerHTML = string.slice(0, -1);
            }
        }
        // 计算结果eval参数
        function doCalc() {
            var result = document.getElementById("result");
            var expression = result.innerHTML;
            result.innerHTML = eval(expression);
        }
    </script>
</head>

<body>
    <div id="top">
        <div id="calc-title">计算器</div>
    </div>
    <div id="result">
    </div>
    <div id="button">
        <div onclick="clearresult()">AC</div>
        <div onclick="clickOperator('/')">÷</div>
        <div onclick="clickOperator('*')">x</div>
        <div onclick="del()">删除</div>
        <div onclick="clickNumber(7)">7</div>
        <div onclick="clickNumber(8)">8</div>
        <div onclick="clickNumber(9)">9</div>
        <div onclick="clickOperator('%')">%</div>
        <div onclick="clickNumber(4)">4</div>
        <div onclick="clickNumber(5)">5</div>
        <div onclick="clickNumber(6)">6</div>
        <div onclick="clickOperator('-')">-</div>
        <div onclick="clickNumber(1)">1</div>
        <div onclick="clickNumber(2)">2</div>
        <div onclick="clickNumber(3)">3</div>
        <div onclick="clickOperator('+')">+</div>
        <div></div>
        <div onclick="clickNumber(0)">0</div>
        <div onclick="clickPonit()">.</div>
        <div onclick="doCalc()">=</div>
    </div>
</body>
</html>

三、解决BUG：避免连续输入运算符

判断最后一个字符是否是运算符，如果是运算符，输入时进行替换。

function clickOperator(operator) {  
    var result = document.getElementById("result");  
    var string = result.innerHTML;  
    var len = string.length;  
    var last = string.charAt(len - 1);  
  
    if (last == "+" || last == "-" || last == "*" || last == "/" || last == "%") {  
        var temp = string.substr(0, len - 1) + operator;  
        result.innerHTML = temp;  
    } else {  
        result.innerHTML += operator;  
    }  
}