Créez une calculatrice en ligne en utilisant JavaScript-js tutoriel-php.cn

Créez une calculatrice en ligne en utilisant JavaScript

WBOY

Libérer： 2023-08-09 15:46:49

original

1545 Les gens l'ont consulté

Créez une calculatrice en ligne en utilisant JavaScript

Utilisez JavaScript pour créer des calculatrices en ligne

Avec le développement d'Internet, de plus en plus d'outils et d'applications ont commencé à apparaître sous forme en ligne. Parmi eux, la calculatrice est l’un des outils les plus utilisés. Cet article explique comment créer une calculatrice en ligne simple à l'aide de JavaScript et fournit des exemples de code.

Avant de commencer, nous devons connaître quelques connaissances de base en HTML et CSS. L'interface de la calculatrice peut être construite à l'aide d'éléments de tableau HTML, puis stylisée à l'aide de CSS. Ce qui suit est un exemple de code HTML pour une interface de calculatrice de base :

<!DOCTYPE html>
<html>
<head>
    <title>在线计算器</title>
    <link rel="stylesheet" type="text/css" href="calculator.css">
</head>
<body>
    <div class="calculator">
        <table>
            <tr>
                <td colspan="4"><input type="text" id="result" disabled></td>
            </tr>
            <tr>
                <td><button onclick="appendNumber(7)">7</button></td>
                <td><button onclick="appendNumber(8)">8</button></td>
                <td><button onclick="appendNumber(9)">9</button></td>
                <td><button onclick="appendOperator('+')">+</button></td>
            </tr>
            <tr>
                <td><button onclick="appendNumber(4)">4</button></td>
                <td><button onclick="appendNumber(5)">5</button></td>
                <td><button onclick="appendNumber(6)">6</button></td>
                <td><button onclick="appendOperator('-')">-</button></td>
            </tr>
            <tr>
                <td><button onclick="appendNumber(1)">1</button></td>
                <td><button onclick="appendNumber(2)">2</button></td>
                <td><button onclick="appendNumber(3)">3</button></td>
                <td><button onclick="appendOperator('*')">*</button></td>
            </tr>
            <tr>
                <td><button onclick="appendNumber(0)">0</button></td>
                <td><button onclick="appendOperator('.')">.</button></td>
                <td><button onclick="calculate()">=</button></td>
                <td><button onclick="appendOperator('/')">/</button></td>
            </tr>
        </table>
    </div>

    <script src="calculator.js"></script>
</body>
</html>

Copier après la connexion

Dans l'exemple ci-dessus, une zone de texte avec l'identifiant "result" est utilisée pour afficher les résultats du calcul. Ensuite, une interface de calculatrice simple a été créée à l’aide de balises de table et de balises de bouton. Sur chaque bouton, un événement onclick est utilisé pour déclencher l'action correspondante.

Ensuite, nous devons écrire du code JavaScript pour implémenter la logique de la calculatrice. Voici un exemple de code JavaScript utilisé pour contrôler le fonctionnement de la calculatrice :

var expression = ""; // 保存用户输入的表达式

// 追加数字
function appendNumber(num) {
    expression += num;
    document.getElementById("result").value = expression;
}

// 追加运算符
function appendOperator(operator) {
    expression += operator;
    document.getElementById("result").value = expression;
}

// 进行计算
function calculate() {
    try {
        var result = eval(expression);
        document.getElementById("result").value = result;
        expression = result;
    } catch (error) {
        // 处理错误情况
        document.getElementById("result").value = "错误";
        expression = "";
    }
}

Copier après la connexion

Dans le code ci-dessus, trois fonctions sont définies : appendNumber、appendOperator和calculate。appendNumber函数用于追加数字到表达式中；appendOperator函数用于追加运算符到表达式中；calculateLa fonction permet d'effectuer des calculs et d'afficher les résultats.

Enfin, nous devons utiliser CSS pour styliser l'interface de la calculatrice. Voici un exemple de code CSS simple :

.calculator {
    margin: 50px auto;
    width: 200px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
}

button {
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    border: none;
    cursor: pointer;
}

Copier après la connexion

Dans le code CSS ci-dessus, certains styles de base sont utilisés pour embellir l'interface de la calculatrice.

Avec l'exemple de code ci-dessus, nous pouvons créer une simple calculatrice en ligne. Les utilisateurs peuvent saisir des nombres et des opérateurs en cliquant sur des boutons, et la calculatrice effectuera automatiquement les calculs pertinents et affichera les résultats. Cette calculatrice peut être utilisée pour des opérations mathématiques simples telles que les opérations d'addition, de soustraction, de multiplication, de division et décimales.

Pour résumer, il est possible d'écrire une calculatrice en ligne via JavaScript. Il suffit d'utiliser HTML pour construire l'interface, CSS pour le style, puis d'utiliser JavaScript pour implémenter la logique de la calculatrice. J'espère que le contenu de cet article vous sera utile et je vous souhaite bonne chance dans la création d'une calculatrice en ligne en utilisant JavaScript !

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!