我在CSDN的第一篇博客——js实现简单计算器

本文链接：https://blog.csdn.net/yunmengying/article/details/105331535

写在前边

这是我第一在CSDN发布博客。

在一个月左右的前端基础学习之后，我开始着手自己做一个简单的计算器。

目前实现的功能：加减乘除四则运算，带括号的运算，小数点计算，黑暗/白天模式切换，响应式

UI设计

白天模式

暗黑模式

小窗口

在设计上参考了最近比较火的新拟态设计（并不是特别正规），其实现大致分为

1.凸起按钮

利用右下角的深色阴影和左上角的浅色阴影实现

2.凹陷按钮

利用内部的（inset）左上角深色阴影和内部的右下角浅色阴影实现

3.圆形凸起/凹陷

类似于大头针的感觉的凸起（凹陷感觉是个“坑”的样式），在上述基础上添加一个135度的线性渐变

其实设计上就是模拟左上角的打光实现的阴影让视觉上看起来是凸起或凹陷的，这里有一个网站https://neumorphism.io/#ffffff可以在线生成，弄懂原理之后并不难

代码

接下来是重点的代码部分

目录结构（有能看出来是什么IDE的大神嘛）

calculator.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>计算器</title>
    <link rel="stylesheet" href="css/whiteCal.css" id="mode">
    <link rel="stylesheet" href="css/calculator.css" ><!--宽度大于1019px生效-->
    <link rel="stylesheet"  href="css/calculator-mini.css"><!--宽度小于1019px生效-->
</head>
<body>
<div id="changeButtonDiv">
    <button type="button" id="change" onclick="changeStyle()"></button>
</div>

<div id="content">
    <div id="windowArea">
        <div id="answerArea"></div>
    </div>
    <div id="operatorArea">
        <div id="funcArea">
            <div id="clear" class="button">C</div>
            <div id="brackets" class="button">()</div>
            <div id="backspace" class="button">←</div>
        </div>
        <div id="numbersArea">
            <button type="button" class="button num">1</button><button type="button" class="button num">2</button><button type="button" class="button num">3</button>
            <button type="button" class="button num">4</button><button type="button" class="button num">5</button><button type="button" class="button num">6</button>
            <button type="button" class="button num">7</button><button type="button" class="button num">8</button><button type="button" class="button num">9</button>
            <button type="button" class="button num">.</button><button type="button" class="button num" style="width: 160px;">0</button>

        </div>
        <div id="computeArea">
            <div class="button com" style="clear:left">+</div>
            <div class="button com" style="clear:left">-</div>
            <div class="button com" style="clear:left">*</div>
            <div class="button com" style="clear:left">/</div>
        </div>
        <button class="button" id="compute">=</button>
    </div>
</div>

<script src="js/calculator.js"></script>

</body>
</html>

html的部分没什么好说的，基础的结构，变量名起的比较规范，不需要注释应该也可以看懂

css

css部分采用分离式写法，将有关颜色的部分与大小位置等样式分开写，方便颜色的切换。

实际上还有一种颜色切换的方式，给所有涉及颜色的元素添加一个统一的类，用js控制，黑色添加black类，白色添加white类，再在对应的类下写相应的样式（想法来自后来写的翻页时钟）

正常模式下的calculator.css（只包含大小和样式）

@media  screen and (min-width:1019px) {
    * {
        margin: 0;
        padding: 0
    }

    /**
    *计算器面板
     */
    #content {
        width: 1000px;
        height: 700px;
        margin: 20px auto;
        text-align: center;
        border-radius: 50px;
    }

    /**
    *视窗区
     */
    #windowArea {
        float: left;
        width: 500px;
        height: 700px;
        box-sizing: border-box;
        border-radius: 50px 20px 20px 50px;
    }

    /**
    *视窗面板
     */
    #answerArea {
        width: 450px;   height: 650px;
        margin: 20px;   box-sizing: border-box;
        border-radius: 50px;
        word-break: break-all;
        font-size: 50px;      padding-top: 30px;
    }

    /**
    *操作区面板
     */
    #operatorArea {
        float: right;
        width: 500px;
        height: 700px;
        box-sizing: border-box;
        border-radius: 20px 50px 50px 20px;
        font-size: 30px;
    }

    /**
    *功能区
     */
    #funcArea {
        float: left;
        margin-left: 40px;
        margin-top: 50px;
        width: 400px;
    }

    /**
    *符号区
     */
    #computeArea {
        float: left;
    }

    /**
    *数字区
     */
    #numbersArea {
        float: left;
        margin-left: 40px;
        width: 290px;
        height: 380px;
        border-radius: 100px;
    }

    /**
    *按键
     */
    .button {
        float: left;
        width: 70px;
        height: 70px;
        line-height: 70px;
        margin-left: 20px;
        margin-top: 20px;