【前端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)
    }
}
相关推荐
vivo互联网技术1 分钟前
拥抱新一代 Web 3D 引擎,Three.js 项目快速升级 Galacean 指南
前端·three.js
江城开朗的豌豆9 分钟前
React应用优化指南:让我的项目性能“起飞”✨
前端·javascript·react.js
会飞的青蛙15 分钟前
GIT 配置别名&脚本自动化执行
前端·git
再吃一根胡萝卜17 分钟前
🔍 当 `<a-menu>` 遇上 `<template>`:一个容易忽视的菜单渲染陷阱
前端
Asort33 分钟前
JavaScript 从零开始(六):控制流语句详解——让代码拥有决策与重复能力
前端·javascript
无双_Joney1 小时前
[更新迭代 - 1] Nestjs 在24年底更新了啥?(功能篇)
前端·后端·nestjs
在云端易逍遥1 小时前
前端必学的 CSS Grid 布局体系
前端·css
ccnocare1 小时前
选择文件夹路径
前端
艾小码1 小时前
还在被超长列表卡到崩溃?3招搞定虚拟滚动,性能直接起飞!
前端·javascript·react.js
闰五月1 小时前
JavaScript作用域与作用域链详解
前端·面试