【前端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)
    }
}
相关推荐
机器视觉知识推荐、就业指导19 分钟前
QML 批量创建模块 【Repeater】 组件详解
前端·c++·qml
lmryBC4925 分钟前
golang接口-interface
java·前端·golang
慕斯策划一场流浪32 分钟前
fastGPT—nextjs—mongoose—团队管理之团队列表api接口实现
开发语言·前端·javascript·fastgpt env文件配置·fastgpt团队列表接口实现·fastgpt团队切换api·fastgpt团队切换逻辑
LaoZhangAI1 小时前
【2025最新】Claude免费API完全指南:无需信用卡,中国用户也能用
前端
hepherd1 小时前
Flask学习笔记 - 模板渲染
前端·flask
LaoZhangAI1 小时前
【2025最新】Manus邀请码免费获取完全指南:5种稳定渠道+3个隐藏方法
前端
经常见1 小时前
浅拷贝与深拷贝
前端
前端飞天猪1 小时前
学习笔记:三行命令,免费申请https加密证书📃
前端
关二哥拉二胡1 小时前
前端的 AI 应用开发系列二:手把手揭秘 RAG
前端·面试