分享一个计算器

timi先生2023-08-09 8:06

先看效果：

再看代码（查看更多）：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器</title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 10px;
            background: #232323;
        }
        @media (max-width: 576px) {
            body {
                height: 100h;
            }
        }

        .calc {
            width: 50em;
            aspect-ratio: 1/1.5;
            margin: 2em;
            background: #232323;
            background: #CED4CA;
            background: #EBECE9;
            padding: 4em;
            border-radius: 1em;
            display: flex;
            flex-direction: column;
            gap: 2em;
            box-shadow: rgba(0, 0, 0, 0.15) 0.3em 0.3em 0.8em 0px inset, rgba(0, 0, 0, 0.15) -0.3em 0em 0.8em 0em inset, rgba(0, 0, 0, 0.25) 0.3em 0.3em 0.8em 0px;
        }
        @media (max-width: 576px) {
            .calc {
                padding: 2.5em;
            }
        }
        .calc .result {
            height: 12em;
            background: pink;
            width: 100%;
            background: linear-gradient(-30deg, rgba(34, 33, 38, 0.1), rgba(34, 33, 38, 0), rgba(34, 33, 38, 0.1)) 100% 0%/100% 100%, #DBE7E5;
            box-shadow: rgba(0, 0, 0, 0.2) 0.3em 0.3em 0.6em 0px inset, rgba(0, 0, 0, 0.25) -3px -3px 0.6em 0.1em inset, rgba(0, 0, 0, 0.25) 0px 0em 1.2em 0px inset, rgba(0, 0, 0, 0.25) 0px 0.3em 0.2em 0px inset, rgba(255, 255, 255, 0.85) 0px 0.3em 0.2em 0px;
            background-repeat: no-repeat;
            padding: 2em;
        }
        @media (max-width: 576px) {
            .calc .result {
                height: 10em;
            }
        }
        .calc .result .result__inner {
            text-shadow: 0.15em 0.15em rgba(0, 0, 0, 0.25);
            display: flex;
            justify-content: flex-end;
            align-items: flex-end;
            color: #2A3027;
            height: 100%;
            font-family: "PT Mono", monospace;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
        }
        .calc .result .result__inner .prev-operand {
            font-size: 2em;
        }
        .calc .result .result__inner .current-operand {
            font-size: 4em;
            font-size: clamp(1.25rem, 0.5368rem + 3.17vw, 2.5rem );
            font-size: clamp(1.375rem, 0.7338rem + 2.85vw, 2.5rem );
            font-size: clamp(1.5625rem, 1.027rem + 2.38vw, 2.5rem );
        }
        .calc .keys {
            width: 100%;
            flex-grow: 2;
        }
        .calc .keys__inner {
            height: 100%;
            gap: 1.5em;
        }
        .calc .key {
            color: rgba(0, 0, 0, 0.7);
            border: unset;
            box-shadow: rgba(0, 0, 0, 0.15) 0.03em 0.03em 0.1em 0px, rgba(0, 0, 0, 0.15) 0.01em 0.01em 0.1em 0px, rgba(255, 255, 255, 0.55) 0em 0em 0.5em 10px inset;
            font-family: "Rubik", sans-serif;
            font-size: 4em;
            font-size: clamp(1rem, 0.3228rem + 3.01vw, 2.1875rem );
            background: #fff;
            background: #EBECE9;
            background-repeat: no-repeat;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 0.1em;
            transition: all 0.25s ease;
        }
        .calc .key__row {
            height: 100%;
            display: grid;
            width: 100%;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(5, 1fr);
            gap: 1.5em;
        }
        @media (max-width: 576px) {
            .calc .key__row {
                gap: 0.8em;
            }
        }
        @media (max-width: 576px) {
            .calc .key {
                box-shadow: rgba(0, 0, 0, 0.15) 0.03em 0.03em 0.1em 0px, rgba(0, 0, 0, 0.15) 0.01em 0.01em 0.1em 0px, rgba(255, 255, 255, 0.25) 0em 0em 0.5em 10px inset;
            }
        }
        .calc .key:hover {
            box-shadow: rgba(0, 0, 0, 0.05) 0.03em 0.03em 0.1em 0px, rgba(0, 0, 0, 0.05) 0.01em 0.01em 0.1em 0px, rgba(255, 255, 255, 0.55) 0em 0em 0.5em 10px inset;
        }
        .calc .key[data-number] {
            font-size: clamp(1.5625rem, 1.027rem + 2.38vw, 2.5rem );
        }
        .calc .key:nth-of-type(1) {
            background-color: #C34F61;
            box-shadow: unset;
            box-shadow: rgba(0, 0, 0, 0.45) 0.03em 0.03em 0.1em 0px, rgba(0, 0, 0, 0.25) 0.01em 0.01em 0.1em 0px, rgba(225, 167, 176, 0.25) 0em 0em 0.5em 10px inset, rgba(0, 0, 0, 0.15) 0.03em 0.03em 0.1em 0px inset;
            color: #fff;
        }
        .calc .key:nth-of-type(1):hover {
            box-shadow: rgba(0, 0, 0, 0.15) 0.03em 0.03em 0.1em 0px, rgba(0, 0, 0, 0.05) 0.01em 0.01em 0.1em 0px, rgba(225, 167, 176, 0.25) 0em 0em 0.5em 10px inset;
        }
        .calc .key:nth-of-type(16) {
            grid-row: 4/6;
            grid-column: 4/4;
        }
    </style>
</head>
<body>
<div class="calc">
    <div class="result">
        <div class="result__inner">
            <div data-prev-operand class="prev-operand">

            </div>
            <div data-current-operand class="current-operand">

            </div>
        </div>
    </div>
    <div class="keys">
        <div class="keys__inner">
            <div class="key__row">
                <button data-clear class="key">AC</button>
                <button data-operator="**" class="key">x<sup>2</sup></button>
                <button data-operator="/" class="key">&#247;</button>
                <button data-operator="*" class="key">X</button>
                <button data-number class="key">7</button>
                <button data-number class="key">8</button>
                <button data-number class="key">9</button>
                <button data-operator="-" class="key">-</button>
                <button data-number class="key">4</button>
                <button data-number class="key">5</button>
                <button data-number class="key">6</button>
                <button data-operator="+" class="key">+</button>
                <button data-number class="key">1</button>
                <button data-number class="key">2</button>
                <button data-number class="key">3</button>
                <button data-equals class="key">=</button>
                <button data-number class="key">0</button>

                <button data-number class="key">.</button>
                <button data-delete class="key">DEL</button>
            </div>

        </div>
    </div>
</div>
</body>
<script>
    class Calculator{
        constructor(prevOperandText, currentOperandText){
            this.prevOperandText = prevOperandText;
            this.currentOperandText = currentOperandText;
            this.clear();
        }

        clear(){
            this.prevOperand = ''
            this.currentOperand = ''
            this.operation = undefined;
        }
        delete(){
            this.currentOperand = this.currentOperand.toString().slice(0,-1);
        }
        appendNumber(num){
            if(num === '.' && this.currentOperand.includes('.')) return;
            this.currentOperand = this.currentOperand.toString() + num.toString();
        }
        selectOperation(operation){
            if(this.currentOperand === '') return
            if(this.prevOperand !== ''){
                this.calculate();
            }
            this.operation = operation
            this.prevOperand = this.currentOperand;
            this.currentOperand = ''
        }

        calculate(){
            let calculation ;
            const prev = parseFloat(this.prevOperand)
            const current = parseFloat(this.currentOperand)
            if(isNaN(prev) || isNaN(current)) return;
            switch(this.operation){
                case '+':
                    calculation = prev + current;
                    break;
                case '-':
                    calculation = prev - current;
                    break;
                case '*':
                    calculation = prev * current;
                    break;
                case '÷':
                    calculation = prev / current;
                    break;
                case '/':
                    calculation = prev / current;
                    break;
                case '**':
                    calculation = prev ** current;
                    break;
                case '^':
                    calculation = prev ** current;
                    break;
                default:
                    return;
            }
            if(calculation.toString().length > 12 && calculation.toString().includes('.')){
                this.currentOperand = calculation.toFixed(5);
            } else {
                this.currentOperand = calculation;
            }

            this.operation = undefined;
            this.prevOperand = '';
        }

        updateDisplayNumber(num){
            //从字符串转换为数字
            const stringNum = num.toString();
            const integerDigits = parseFloat(stringNum.split('.')[0]);
            const decimalDigits = stringNum.split('.')[1];
            let integerDisplay;
            if(isNaN(integerDigits)){
                integerDisplay = '';
            }else{
                integerDisplay = integerDigits.toLocaleString('en', {maximumFractionDigits: 0});
            }
            if(decimalDigits != null){
                return `${integerDisplay}.${decimalDigits}`;
            } else{
                return integerDisplay;
            }
        }

        updateDisplay(){
            this.currentOperandText.innerText = this.updateDisplayNumber(this.currentOperand);
            let operation;
            if(this.operation === "**"){
                operation = "^";
            } else {
                operation = this.operation;
            }
            if(this.operation != null){
                this.prevOperandText.innerText =
                    `${this.updateDisplayNumber(this.prevOperand)} ${operation}`;
            } else {
                this.prevOperandText.innerText = '';
            }

        }
    }

    const operatorKeys = document.querySelectorAll('.key[data-operator]');
    const numberKeys = document.querySelectorAll('.key[data-number]');
    const equalButton = document.querySelector('.key[data-equals]')
    const prevOperandText = document.querySelector('[data-prev-operand]')
    const currentOperandText = document.querySelector('[data-current-operand]')
    const clear = document.querySelector('.key[data-clear')
    const deleteKey = document.querySelector('.key[data-delete')

    const calculator = new Calculator(prevOperandText,currentOperandText);


    clear.addEventListener('click', ()=>{
        calculator.clear();
        calculator.updateDisplay();
    })
    deleteKey.addEventListener('click', ()=>{
        calculator.delete();
        calculator.updateDisplay();
    })


    numberKeys.forEach(key => {
        key.addEventListener('click', ()=>{
            calculator.appendNumber(key.innerText)
            calculator.updateDisplay()
        })
    })
    operatorKeys.forEach(key => {
        key.addEventListener('click', ()=>{
            calculator.selectOperation(key.dataset.operator)
            calculator.updateDisplay()
        })
    })
    equalButton.addEventListener('click', ()=>{
        calculator.calculate();
        calculator.updateDisplay();
    })


    document.addEventListener("keydown", (e) => {
        let numKeys = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "."];
        let operatorKeys = ["+", "-", "*", "/", "^"];

        if(numKeys.includes(e.key)){
            calculator.appendNumber(e.key)
            calculator.updateDisplay()
        }
        if(e.key == "Enter"){
            calculator.calculate();
            calculator.updateDisplay();
        }
        if(e.key == "Backspace" || e.key == "Delete")  {
            calculator.delete();
            calculator.updateDisplay();
        }
        if(e.key == "Escape"){
            calculator.clear();
            calculator.updateDisplay();
        }
        if(operatorKeys.includes(e.key)){
            calculator.selectOperation(e.key)
            calculator.updateDisplay()
        }
    });
</script>
</html>
相关推荐
Fan_web13 分钟前
jQuery——事件委托
开发语言·前端·javascript·css·jquery
安冬的码畜日常14 分钟前
【CSS in Depth 2 精译_044】第七章 响应式设计概述
前端·css·css3·html5·响应式设计·响应式
赛男丨木子丿小喵27 分钟前
visual studio2022添加新项中没有html和css
css·html·visual studio
Jiaberrr1 小时前
Element UI教程：如何将Radio单选框的圆框改为方框
前端·javascript·vue.js·ui·elementui
安冬的码畜日常3 小时前
【D3.js in Action 3 精译_029】3.5 给 D3 条形图加注图表标签（上）
开发语言·前端·javascript·信息可视化·数据可视化·d3.js
太阳花ˉ3 小时前
html+css+js实现step进度条效果
javascript·css·html
john_hjy4 小时前
11. 异步编程
运维·服务器·javascript
风清扬_jd4 小时前
Chromium 中JavaScript Fetch API接口c++代码实现（二）
javascript·c++·chrome
yanlele4 小时前
前瞻 - 盘点 ES2025 已经定稿的语法规范
前端·javascript·代码规范
热门推荐
01分享几个惊艳的 Three.js 个人站点02【经验分享】Ubuntu22.04安装微信(linux官方版)032024年高教社杯数学建模国赛C题超详细解题思路分析04组基轨迹建模 GBTM的介绍与实现（Stata 或 R）05安卓系列机型永久去除data分区加密 详细步骤解析06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07CTF网络安全大赛简单的web抓包题目：HEADache08Ubuntu24.04安装中文输入法09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10springer 在线投稿编译踩坑