Comment créer une calculatrice à l'aide de HTML CSS JavaScript – Guide étape par étape-js tutoriel-php.cn

Comment créer une calculatrice à l'aide de HTML CSS JavaScript – Guide étape par étape

WBOY

Libérer： 2024-08-01 10:34:22

original

255 Les gens l'ont consulté

How to Make a Calculator Using HTML CSS JavaScript – Step-by-Step Guide

Calculators are an essential tool used in various fields, from simple arithmetic calculations to complex scientific computations. Building a calculator from scratch using HTML, CSS, and JavaScript not only enhances your coding skills but also deepens your understanding of how these technologies work together. This guide will walk you through creating a basic calculator that can perform addition, subtraction, multiplication, and division.

HTML Structure:
The HTML includes a div with the class calculator containing the calculator’s display and buttons.
Each button has data attributes (data-num for numbers and data-op for operations) for easy JavaScript selection.
CSS Styling:
The CSS styles center the calculator on the screen, style the display and buttons, and provide hover effects.
Specific styles are added for the equals button to differentiate it from the others.
JavaScript Functionality:
JavaScript handles the button clicks, updates the display, and performs calculations.
The handleNumber function processes number inputs and decimal points.
The handleOperator function processes operations, including clear, equals, and arithmetic operations.
The calculate function performs the arithmetic based on the selected operator.
The updateDisplay function updates the display with the current input.

<!DOCTYPE html>
<html>

<head>
    <title>iPhone Style Calculator with History and Root Button</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/10.6.4/math.js"
        integrity="sha512-BbVEDjbqdN3Eow8+empLMrJlxXRj5nEitiCAK5A1pUr66+jLVejo3PmjIaucRnjlB0P9R3rBUs3g5jXc8ti+fQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/10.6.4/math.min.js"
        integrity="sha512-iphNRh6dPbeuPGIrQbCdbBF/qcqadKWLa35YPVfMZMHBSI6PLJh1om2xCTWhpVpmUyb4IvVS9iYnnYMkleVXLA=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #fff;
            margin: 0;
            font-family: 'Arial', sans-serif;
        }

        .calculator {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            padding: 20px;
            border-radius: 20px;
            background-color: #333;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            width: 320px;
        }

        .calculator input[type="text"] {
            grid-column: span 4;
            padding: 20px;
            font-size: 32px;
            border: none;
            border-radius: 10px;
            text-align: right;
            background-color: #000;
            color: #fff;
            box-sizing: border-box;
        }

        .calculator input[type="button"] {
            padding: 20px;
            font-size: 24px;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            color: white;
            box-sizing: border-box;
        }

        .calculator input[type="button"].operator {
            background-color: #ff9500;
        }

        .calculator input[type="button"].operator:hover {
            background-color: #cc7a00;
        }

        .calculator input[type="button"].number {
            background-color: #505050;
        }

        .calculator input[type="button"].number:hover {
            background-color: #6b6b6b;
        }

        .calculator input[type="button"].zero {
            grid-column: span 2;
        }

        .calculator input[type="button"].clear {
            background-color: #d4d4d2;
            color: black;
        }

        .calculator input[type="button"].clear:hover {
            background-color: #bbb; transition: 0.5s;
        } 

        .calculator input[type="button"].root {
            background-color: #f7c600;  
        }

        .calculator input[type="button"].root:hover {
            background-color: #e6b800; transition: 0.5s;
        }
    </style>
</head>

<body>

    <div class="calculator">
        <input type="text" id="display" readonly>
        <input type="button" value="A/C" class="clear" onclick="clr()" />
        <input type="button" value="%" class="operator" onclick="dis('%')" />
        <input type="button" value="/" class="operator" onclick="dis('/')" />
        <input type="button" value="*" class="operator" onclick="dis('*')" />
        <input type="button" value="7" class="number" onclick="dis('7')" />
        <input type="button" value="8" class="number" onclick="dis('8')" />
        <input type="button" value="9" class="number" onclick="dis('9')" />
        <input type="button" value="-" class="operator" onclick="dis('-')" />
        <input type="button" value="4" class="number" onclick="dis('4')" />
        <input type="button" value="5" class="number" onclick="dis('5')" />
        <input type="button" value="6" class="number" onclick="dis('6')" />
        <input type="button" value="+" class="operator" onclick="dis('+')" />
        <input type="button" value="1" class="number" onclick="dis('1')" />
        <input type="button" value="2" class="number" onclick="dis('2')" />
        <input type="button" value="3" class="number" onclick="dis('3')" />

<input type="button" value="=" class="operator" onclick="solve()
" />


        <input type="button" value="0" class="number zero" onclick="dis('0')" />
        <input type="button" value="." class="number" onclick="dis('.')" />
        <input type="button" value="√" class="root" onclick="dis('sqrt(')" />



    </div>

    <script>
        function dis(val) {
            document.getElementById("display").value += val;
        }

        document.addEventListener('keydown', function (event) {
            const key = event.key;
            if ((key >= '0' && key <= '9') || ['+', '-', '*', '/', '%'].includes(key)) {
                dis(key);
            } else if (key === 'Enter') {
                solve();
            } else if (key === 'Escape') {
                clr();
            }
        });

        function solve() {
            try {
                let expression = document.getElementById("display").value;
                // Handle square root calculation
                expression = expression.replace(/sqrt\(([^)]+)\)/g, 'sqrt($1)');
                // Evaluate the expression
                let result = math.evaluate(expression);
                document.getElementById("display").value = result;
            } catch (err) {
                document.getElementById("display").value = "Error";
            }
        }

        function clr() {
            document.getElementById("display").value = "";
        }
    </script>
</body>

</html>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Comment créer une calculatrice à l'aide de HTML CSS JavaScript – Guide étape par étape