Comment implémenter une fonction de calculatrice simple en utilisant JavaScript ?-js tutoriel-php.cn

Comment implémenter une fonction de calculatrice simple en utilisant JavaScript ?

王林

Libérer： 2023-10-27 14:51:42

original

1198 Les gens l'ont consulté

如何使用 JavaScript 实现一个简单的计算器功能？

Comment utiliser JavaScript pour implémenter une fonction de calculatrice simple ?

La calculatrice est l'un des outils couramment utilisés dans notre vie quotidienne. Elle peut être utilisée pour effectuer des opérations mathématiques simples. Aujourd'hui, nous allons implémenter une fonction de calculatrice simple utilisant JavaScript. Dans cet article, je vais vous montrer comment écrire du code en utilisant JavaScript pour implémenter des opérations mathématiques de base et une interface de calculatrice.

Tout d'abord, nous devons créer un fichier HTML contenant une zone de texte, des boutons numériques et des boutons d'opérateur pour afficher les résultats de l'opération. Voici la structure HTML de base :

<!DOCTYPE html>
<html>
<head>
    <title>简单计算器</title>
    <style>
        /* 样式可以根据个人喜好进行自定义 */
    </style>
</head>
<body>
    <input type="text" id="result" readonly>
    <br>
    <button onclick="buttonClick('1')">1</button>
    <button onclick="buttonClick('2')">2</button>
    <button onclick="buttonClick('3')">3</button>
    <button onclick="buttonClick('+')">+</button>
    <br>
    <button onclick="buttonClick('4')">4</button>
    <button onclick="buttonClick('5')">5</button>
    <button onclick="buttonClick('6')">6</button>
    <button onclick="buttonClick('-')">-</button>
    <br>
    <button onclick="buttonClick('7')">7</button>
    <button onclick="buttonClick('8')">8</button>
    <button onclick="buttonClick('9')">9</button>
    <button onclick="buttonClick('*')">*</button>
    <br>
    <button onclick="buttonClick('0')">0</button>
    <button onclick="buttonClick('.')">.</button>
    <button onclick="buttonClick('=')">=</button>
    <button onclick="buttonClick('/')">/</button>
    <br>
    <button onclick="clearResult()">清空</button>
</body>
</html>

Copier après la connexion

Dans le code HTML ci-dessus, nous utilisons une zone de texte (l'identifiant est "result") pour afficher le résultat de l'opération, et ajoutons un bouton numérique, un bouton d'opérateur et un bouton d'effacement. Chaque bouton possède un événement onclick, qui appelle une fonction JavaScript nommée buttonClick pour gérer les événements de clic sur le bouton. buttonClick 的 JavaScript 函数，用来处理按钮点击事件。

接下来，我们需要在 JavaScript 文件中编写 buttonClick 和 clearResult 函数的实现。以下是示例代码：

function buttonClick(value) {
    var result = document.getElementById("result");

    if (value === '=') {
        result.value = eval(result.value); // 使用 eval 函数计算表达式
    } else {
        result.value += value;
    }
}

function clearResult() {
    document.getElementById("result").value = "";
}

Copier après la connexion

在 buttonClick 函数中，我们首先通过 getElementById 方法获取到文本框的引用，然后根据按钮的值进行不同的处理。如果按钮的值是等于号（=），我们将使用 eval 函数来计算表达式，并将结果显示在文本框中。否则，我们将按钮的值追加到文本框的内容后面。

clearResult

Ensuite, nous devons écrire l'implémentation des fonctions buttonClick et clearResult dans un fichier JavaScript. Voici l'exemple de code :

rrreee

Dans la fonction buttonClick, nous obtenons d'abord la référence à la zone de texte via la méthode getElementById, puis effectuons différents traitements en fonction de la valeur du bouton. Si la valeur du bouton est le signe égal (=), nous utiliserons la fonction eval pour évaluer l'expression et afficher le résultat dans la zone de texte. Sinon, nous ajoutons la valeur du bouton au contenu de la zone de texte. La fonction

clearResult définit simplement la valeur de la zone de texte sur une chaîne vide, réalisant ainsi la fonction d'effacement.

Maintenant, vous pouvez enregistrer le code HTML et le code JavaScript ci-dessus dans les fichiers correspondants et ouvrir le fichier HTML dans le navigateur. Vous verrez une interface de calculatrice simple qui vous permet d'effectuer des opérations mathématiques de base. 🎜🎜Ceci n'est qu'un simple exemple de calculatrice, qui implémente uniquement les quatre fonctions arithmétiques de base. Si vous souhaitez implémenter des fonctions de calculatrice plus complexes, telles que la prise en charge des parenthèses, des fonctions trigonométriques, etc., vous devez encore améliorer le code. Mais avec cet exemple, vous pouvez voir comment utiliser JavaScript pour implémenter une fonction de calculatrice simple. 🎜🎜J'espère que cet article pourra vous aider, et je vous souhaite une bonne programmation ! 🎜

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 implémenter une fonction de calculatrice simple en utilisant JavaScript ?