JavaScript项目组成部分：JavaScript制作简易计算器及制作原理

大拇指的约定

已于 2024-07-02 15:54:38 修改

阅读量488

点赞数 12

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript

于 2024-07-02 15:31:55 首次发布

本文链接：https://blog.csdn.net/qq_52530691/article/details/140126467

版权

JavaScript 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

一. HTML 部分代码及代码解释

HTML 页面为了方便大家的理解，所用的 class 和 id 都是英语单词。所以可以直接翻译使用，对阅读页面没有什么影响。

1.1 HTML 页面结构

页面由四部分组成：

结果显示框：显示计算公式和最终的计算结果
数字区域：数字一到九组成
符号部分：由数字0和加减乘除符号组成
等号部分：点击算出结果

1.2 HTML代码部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义计算器</title>

    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="computer">

        <!-- 结果显示框 -->
        <div class="outcome" >
            <span id="outcome"></span>
        </div>

        <!--数字区域-->
        <!-- 统一添加点击事件 -->
        <!-- 可以直接传值 -->
        <div class="number">
            <div id="one" onclick="getSymbol(1)">1</div>
            <div id="two" onclick="getSymbol(2)">2</div>
            <div id="three" onclick="getSymbol(3)">3</div>
            <div id="four" onclick="getSymbol(4)">4</div>
            <div id="five" onclick="getSymbol(5)">5</div>
            <div id="six" onclick="getSymbol(6)">6</div>
            <div id="seven" onclick="getSymbol(7)">7</div>
            <div id="eight" onclick="getSymbol(8)">8</div>
            <div id="nine" onclick="getSymbol(9)">9</div>
        </div>

        <!-- 数字0 和 加减乘除符号-->
         <div class="symbol">
            <div id="zer" onclick="getSymbol(0)">0</div>
            <div id="addition" onclick="getSymbol('+')">+</div>
            <div id="multiplication" onclick="getSymbol('*')">*</div>
            <div id="delete" onclick="deleteLastOne()">退格</div>
            <div id="remainder" name="求余数" onclick="getSymbol('%')">%</div>
            <div id="subtraction" onclick="getSymbol('-')">-</div>
            <div id="division" onclick="getSymbol('/')">/</div>
            <div id="cleared" onclick="cleared()">清空</div>
         </div>

         <!-- 等于符号 -->
         <div class="amount"  onclick="evaluation()">
            <span id="amount" >=</span>
         </div>
    </div>
</body>
<script type="text/javascript" src="index.js"></script>
</html>

二. CSS 部分代码及代码解释

此部分代码样式很简单，没有背景和各种插图，大家要是不喜欢的话，可以看完逻辑之后自己添加。

2.1 CSS 代码解释

连续点击会出现选中文本效果，设置此代码以禁止选中文本

    user-select:none; /*文本禁止选中*/

用绝对定位设置垂直水平居中

    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;

水平方向超出部分设置为滚动条，竖直方向上隐藏

    overflow-x: scroll;
    overflow-y: hidden;

利用伪类和伪元素给滚动条添加样式

::-webkit-scrollbar {
    display: none; 
  }

利用网络模型布局，减少CSS代码的使用量

    display: grid;
    grid-template-columns: 1fr 1fr 1fr;

2.2 CSS代码部分


/* -----------------------------------------页面整体部分---------------------------------------*/
html,body{
    font-family: "STXinwei";
    font-size: 36px;
    margin: 0;
    user-select:none; /*文本禁止选中*/
}



/* -----------------------------------------计算器整体部分---------------------------------------*/
.computer{

    border: 1px solid black;
    height:420px;
    width: 300px;

    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

/* -----------------------------------------结果显示框---------------------------------------*/

.outcome{

    border: 1px solid black;
    height: 60px;
    line-height: 60px;
    width: 80%;
    margin: 10px auto;
    overflow-x: scroll;
    overflow-y: hidden;
}

::-webkit-scrollbar {
    display: none; 
  }

/* -----------------------------------------数字区域---------------------------------------*/

.number{
    width: 80%;
    text-align: center;
    border: 1px solid black;
    margin: 30px auto  0;

    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.number div{
    margin: 8px ;
    border: 1px solid black;
}

/* -----------------------------------------符号部分---------------------------------------*/

.symbol{
    width: 80%;
    text-align: center;
    border: 1px solid black;
    margin: 20px auto  0;

    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.symbol div{
    margin: 8px ;
    border: 1px solid black;
    font-size: 18px;
}

/* -----------------------------------------等号部分---------------------------------------*/

.amount{
    width: 80%;
    border: 1px solid black;
    margin: 10px auto  0;
    text-align: center;
}

三. JS 部分代码及代码解释

代码逻辑比较简单，但是性价比高，省去了大多数JavaScript代码，达到了精简代码的作用效果。

3.1 代码逻辑解释

在全局条件下获取结果显示框
getSymbol() 函数获取需要计算的公式
evaluation() 函数计算出结果
辅助功能： deleteLastOne() 删除最后一个数字或者符号
辅助功能：cleared() 函数情况内容

3.2 函数解释

charAt() 方法返回字符串中指定索引（下标）处的字符。第一个字符的索引是 0，第二个是 1，以此类推。

// 测试
let test = "lmh0715";
console.log(test.charAt(0))

eval() 函数会将传入的字符串当做 JavaScript 代码进行执行。（需要记住）

// 测试
console.log(eval('2 + 2'));

3.3 JavaScript代码部分

// 获取结果显示框
let outcome = document.getElementById("outcome")

// 获取需要计算的公式
function getSymbol(symbol){
    
    outcome.innerHTML += symbol
}

// 计算出结果
function evaluation(){

    let lastSymbol = outcome.innerHTML.charAt(outcome.innerHTML.length-1)

    if( lastSymbol === "+" || lastSymbol === "-" ||lastSymbol === "*" ||lastSymbol === "/" ||lastSymbol === "%"){
        alert("输入计算公式错误")
        return
    }

    let value = eval(outcome.innerHTML)
    outcome.innerText = value
}

// 删除最后一个数字 或者符号
function deleteLastOne(){
    let length = outcome.innerHTML.slice(0,-1)
    outcome.innerHTML = length
}

// 清空
function cleared(){
    outcome.innerHTML = ""
}