首页 网站源码html+css 计算器功能(附源码!)

html+css 计算器功能(附源码!)

CHATWEB CHATWEB
分类：网站源码
字数: 17668
评论: 0
阅读: 43
展示效果 源码(HTML) 
<!DOCTYPE html>
<html lang="en">

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

<body>
    <div class="calculator">
        <div class="inp">
            <div class="gradualBox">
                <input type="text" class="output">
            </div>
        </div>

        <div class="number">
            <button class="clear" id="str">AC</button>
            <button id="str">÷</button>
            <button id="str">×</button>
            <button id="str">C</button>
            <button>7</button>
            <button>8</button>
            <button>9</button>
            <button id="str">-</button>
            <button>4</button>
            <button>5</button>
            <button>6</button>
            <button id="str">+</button>
            <button>1</button>
            <button>2</button>
            <button>3</button>
            <button id="str">(</button>
            <button>0</button>
            <button>.</button>
            <button>=</button>
            <button id="str">)</button>
        </div>
    </div>
</body>
<script src="./计算器.js"></script>

</html>
源码CSS(直接创建一个计算器.css文件) 
* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    background-repeat: no-repeat;
    font-family: var(--font);
    color: #f48b8f;
    font-size: 20px;
    font-weight: 600;
}

:root {
   
    --button-bg1: #fbfaf8;
    --color: linear-gradient(-225deg, #D4FFEC 0%, #57F2CC 48%, #4596FB 100%);
    --button-bg: var(--button-bg1);
}

.calculator {
    width: 450px;
    height: 750px;
    margin: 50px auto;
    padding-top: 30px;
    background-color: var(--color);
    border-radius: 30px;
    box-shadow: inset 0px 0px 20px #57F2CC, inset -5px -5px 6px #4596FB;
}

.inp {
    display: flex;
    width: 85%;
    height: 200px;
    margin: 0 auto;
    border-radius: 30px;
    margin-bottom: 30px;
    align-items: center;
}

.gradualBox {
    width: 97%;
    height: 95%;
    margin: 0 auto;
    border-radius: 30px;
    background: var(--color);
    display: flex;
   align-items: end;
}

.inp .output {
    width: 100%;
    height: 50px;
    text-align: right;
    padding-right: 25px;
    padding-bottom: 10px;
    box-sizing: border-box;
    font-size: 24px;
    font-weight: 800;
    border: none;
    background-color: transparent;
    outline: none;
    color: #0951a8 !important;
}

.theme {
    width: 100%;
    height: 60px;
    display: flex;
    gap: 15px;
    justify-content: center;
}

.theme ul {
    width: 90px;
    height: 60px;
    border: none;
    border-radius: 20px;
    background: #fbfaf8;
    box-shadow: inset 5px 5px 6px #e5d3d4, inset -5px -5px 6px #ffffff;
}

.theme ul>button {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 20px;
    background: #fbfaf8;
    box-shadow: inset 5px 5px 6px #ffcfd2, inset -5px -5px 6px #ffffff;
    background: linear-gradient(to bottom, #fff, #fff);
    cursor: pointer;
}

.theme li {
    width: 350px;
    height: 320px;
    position: relative;
    left: -180px;
    top: 5px;
    background-color: white;
    display: none;
    opacity: 0.75;
}

.theme .prompt i {
    display: block;
    width: 25px;
    height: 25px;
    position: absolute;
    right: 0;
}

.theme .prompt p {
    text-align: center;
    padding: 90px 0;
    box-sizing: border-box;
}

.theme .prompt span {
    cursor: pointer;
}

.theme .prompt input {
    width: 70%;
    height: 50px;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, 0);
}

.Fontcancel {
    position: absolute;
    left: 50px;
    bottom: 50px;
}

.highlight {
    background-color: pink;
}

.Fontconfirm {
    position: absolute;
    right: 50px;
    bottom: 50px;
}

.Colorcancel {
    position: absolute;
    left: 50px;
    bottom: 50px;
}

.Colorconfirm {
    position: absolute;
    right: 50px;
    bottom: 50px;
}

.number {
    width: 100%;
    height: 470px;
    display: flex;
    gap: 15px;
    align-content: center;
    flex-wrap: wrap;
    padding: 22.5px;
    box-sizing: border-box;
    margin-top: -10px;
    border-radius: 30px;
}

.number button {
    width: 90px;
    height: 70px;
    border: none;
    border-radius: 20px;
    background: #fbfaf8;
    box-shadow: inset 5px 5px 6px #57F2CC, inset -5px -5px 6px #D4FFEC;
    background: var(--button-bg);
    cursor: pointer;
    color: #57F2CC;
}

.number #str {
    box-shadow: inset 5px 5px 6px #57F2CC, inset -5px -5px 6px #D4FFEC;
    background: linear-gradient(-225deg, #D4FFEC 0%, #57F2CC 48%, #4596FB 100%);
    color: #fff;
}
源码js(直接创建一个计算器.js文件) 
const output = document.querySelector('.output');
const numberButtons = Array.from(document.querySelectorAll('.number button'));
const acButton = numberButtons.find(button => button.textContent === "AC");
const cButton = numberButtons.find(button => button.textContent === "C");
const equalsButton = numberButtons.find(button => button.textContent === "=");

numberButtons.forEach(button => {
    button.addEventListener('click', () => {
        if (button.textContent !== 'AC' && button.textContent !== 'C' && button.textContent !== '=') {
            output.value += button.textContent;
        }
    });
});

acButton.addEventListener('click', () => {
    output.value = '';
});

cButton.addEventListener('click', () => {
    output.value = output.value.slice(0, -1);
});

function calculateExpression(expression) {
    if (expression.includes('(')) {
        let left = expression.indexOf('(');
        let right = expression.indexOf(')');
        let subExp = expression.substring(left + 1, right);
        let subResult = calculateExpression(subExp);
        expression = expression.substring(0, left) + subResult + expression.substring(right + 1);
        return calculateExpression(expression);
    }

    const operators = {
        '+': 1,
        '-': 1,
        '×': 2,
        '÷': 2,
    };

    let operatorStack = [];
    let numberStack = [];
    let number = '';

    for (let i = 0; i < expression.length; i++) {
        let char = expression[i];
        if (!operators[char]) {
            number += char;
            continue;
        } else {
            if (char === '-' && (i === 0 || expression[i - 1] === '(')) {
                number += char;
                continue;
            }
            numberStack.push(parseFloat(number));
            number = '';
        }

        while (operatorStack.length && operators[char] <= operators[operatorStack[operatorStack.length - 1]]) {
            calc(numberStack, operatorStack);
        }

        operatorStack.push(char);
    }

    numberStack.push(parseFloat(number));

    while (operatorStack.length) {
        calc(numberStack, operatorStack);
    }

    return numberStack[0];
}

function calc(numberStack, operatorStack) {
    const number2 = numberStack.pop();
    const number1 = numberStack.pop();
    const operator = operatorStack.pop();
    let result;

    switch (operator) {
        case '+':
            result = number1 + number2;
            break;
        case '-':
            result = number1 - number2;
            break;
        case '×':
            result = number1 * number2;
            break;
        case '÷':
            result = number1 / number2;
            break;
    }

    numberStack.push(result);
}

equalsButton.addEventListener('click', () => {
    const expression = output.value;
    const result = calculateExpression(expression);
    output.value = result;
});

const Convertprompt = document.querySelector('.convert .prompt');
const convertedInput = document.getElementById('converted');
const closeIcon = document.querySelector('.convert .prompt i');

closeIcon.addEventListener('click', () => {
    Convertprompt.style.display = 'none';
});

const ThemeColorcancel = document.querySelector('.color-cancel');
const ThemeColorprompt = document.querySelector('.color-confirm');

ThemeColorcancel.addEventListener('click', () => {
    ThemeColorprompt.style.display = 'none';
});

ThemeColorprompt.addEventListener('click', () => {
    ThemeColorprompt.style.display = 'none';
});

window.onload = initTheme;

大家觉得还可以的话,麻烦大家点点赞

 

文章发布于: 2024-11-01 07:10:44

转载请注明出处: CHATWEB

本文的链接地址: https://www.chatweb.com.cn/post-46.html

您可能对以下文章感兴趣
发表评论
😁 😅 🤣 😂 🙂 😊 😇 😍 🤩 😙 😘 😋 😛 🤪 😝 🤔 😮‍💨 😎 🤓 😓 😱 😭 👽
本站由emlog pro驱动 Theme by Beginning Pro  
powered by CHATWEB