【前端demo】简易计算器 原生实现

文章目录

其他demo:https://blog.csdn.net/karshey/article/details/132585901

效果

参考:

js实现仿华为手机计算器,兼容电脑和手机屏幕_dengluandai1740的博客-CSDN博客

Javascript iOS Style Calculator

Javascript Calculator

代码

本想尝试不用eval()而是手动实现的,后来发现细节太多了,越写问题越多。。所以就算了

思路:

  • 把点击的数字或符号拼接为字符串,每次点击=时直接放到eval中计算
  • 注意将x改为*
  • html用table实现,占两行的=用rowspan实现

注意,table的margin是失效的。

html

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</title>
    <link rel="stylesheet" href="style.css">

<body>
    <div class="calculator">
        <div class="screen">
            <div class="in" id="in"></div>
            <div class="out" id="out"></div>
        </div>
        <div class="btn">
            <table>
                <tr class="op">
                    <td onclick="clearSceen()">C</td>
                    <td onclick="command('/')">/</td>
                    <td onclick="command('x')">x</td>
                    <!-- 打< 要写&lt -->
                    <td onclick="del()">&lt;-</td>
                </tr>
                <tr>
                    <td onclick="command(7)">7</td>
                    <td onclick="command(8)">8</td>
                    <td onclick="command(9)">9</td>
                    <td class="op" onclick="command('-')">-</td>
                </tr>
                <tr>
                    <td onclick="command(4)">4</td>
                    <td onclick="command(5)">5</td>
                    <td onclick="command(6)">6</td>
                    <td class="op" onclick="command('+')">+</td>
                </tr>
                <tr>
                    <td onclick="command(1)">1</td>
                    <td onclick="command(2)">2</td>
                    <td onclick="command(3)">3</td>
                    <td class="equal" rowspan="2" onclick="cal()">=</td>
                </tr>
                <tr>
                    <td onclick="command('%')">%</td>
                    <td onclick="command(0)">0</td>
                    <td onclick="command('.')">.</td>
                </tr>
            </table>
        </div>
    </div>
</body>

</html>

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

css

css 复制代码
* {
    margin: 0;
    padding: 0;
}

html,
body {
    overflow: hidden;
}

.calculator {
    width: 300px;
    height: 445px;
    margin: 100px auto;
    border: 1px solid #E4E4E4;
    position: relative;
}

.in,
.out {
    height: 60px;
    line-height: 60px;
    text-align: right;
    padding: 0 10px;
    overflow: hidden;
}

.in {
    font-weight: 700;
    font-size: 20px;
}

.out {
    color: #a9a9a9;
    font-size: 16px;
}

.btn {
    position: absolute;
    bottom: 0px;
}

.btn td {
    width: 75px;
    height: 60px;
    line-height: 60px;
    /* 左右居中 */
    text-align: center;
    font-size: 20px;
    border: 1px solid #E4E4E4;
    /* hover时是手掌形状 */
    cursor: pointer;
}

/* 所有按钮在hover时都有阴影 除了= */
.btn td:hover:not(.equal) {
    background-color: #ebebeb;
}

.op {
    background-color: #F5F5F5;
    color: #00ACC2;
}

.equal {
    background-color: #00ACC2;
    color: #fff;
}

js

javascript 复制代码
let calIn = document.getElementById('in')
let calOut = document.getElementById('out')

function command(str) {
    calIn.innerHTML = '' ? str : calIn.innerHTML + str
}

function cal() {
    calOut.innerHTML = eval(calIn.innerHTML.replace(/x/g, '*').replace(/%/, '/100'));
    if (calIn.innerHTML == 'undefined' || calOut.innerHTML == 'undefined') calOut.innerHTML = ''
    // else {
    //     calIn.innerHTML = calOut.innerHTML
    //     calOut.innerHTML = ''
    // }
}

function clearSceen() {
    calIn.innerHTML = ''
    calOut.innerHTML = ''
}

function del() {
    if (calIn.innerHTML.length) {
        calIn.innerHTML = calIn.innerHTML.slice(0, calIn.innerHTML.length - 1)
    }
}
相关推荐
Mintopia6 分钟前
三维空间的 “切蛋糕大师”:八叉树的底层奥秘与妙用
前端·javascript·计算机图形学
布兰妮甜18 分钟前
单例模式在前端(JavaScript)中的实现与应用
前端·javascript·单例模式
Mintopia18 分钟前
Three.js 加载模型文件:从二进制到像素的奇幻漂流
前端·javascript·three.js
前端小巷子37 分钟前
跨域问题解决方案:JSONP
前端·javascript·面试
eric*16881 小时前
尚硅谷张天禹老师课程配套笔记
前端·vue.js·笔记·vue·尚硅谷·张天禹·尚硅谷张天禹
程序员爱钓鱼1 小时前
Go语言中的反射机制 — 元编程技巧与注意事项
前端·后端·go
GIS之路1 小时前
GeoTools 结合 OpenLayers 实现属性查询(二)
前端·信息可视化
烛阴1 小时前
一文搞懂 Python 闭包:让你的代码瞬间“高级”起来!
前端·python
AA-代码批发V哥2 小时前
HTML之表单结构全解析
前端·html
聪聪的学习笔记2 小时前
【1】确认安装 Node.js 和 npm版本号
前端·npm·node.js