Bagaimana untuk melaksanakan fungsi kalkulator mudah menggunakan JavaScript?-tutorial js-php.cn

Bagaimana untuk melaksanakan fungsi kalkulator mudah menggunakan JavaScript?

王林

Lepaskan： 2023-10-27 14:51:42

asal

1291 orang telah melayarinya

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

Bagaimana untuk menggunakan JavaScript untuk melaksanakan fungsi kalkulator mudah?

Kalkulator adalah salah satu alat yang biasa digunakan dalam kehidupan seharian kita. Ia boleh digunakan untuk melakukan operasi matematik yang mudah. Hari ini, kami akan melaksanakan fungsi kalkulator mudah menggunakan JavaScript. Dalam artikel ini, saya akan menunjukkan kepada anda cara menulis kod menggunakan JavaScript untuk melaksanakan operasi matematik asas dan antara muka kalkulator.

Pertama, kita perlu mencipta fail HTML yang mengandungi kotak teks, butang nombor dan butang operator untuk memaparkan hasil operasi. Berikut ialah struktur HTML asas:

<!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>

Salin selepas log masuk

Dalam kod HTML di atas, kami menggunakan kotak teks (id ialah "hasil") untuk memaparkan hasil operasi, dan menambah butang nombor dan butang operator dan kosongkan butang. Setiap butang mempunyai acara onclick, yang memanggil fungsi JavaScript bernama buttonClick untuk mengendalikan acara klik butang. 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 = "";
}

Salin selepas log masuk

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

clearResult

Seterusnya, kita perlu menulis pelaksanaan fungsi buttonClick dan clearResult dalam fail JavaScript. Berikut ialah contoh kod:

rrreee

Dalam fungsi buttonClick, kami mula-mula mendapatkan rujukan kepada kotak teks melalui kaedah getElementById, dan kemudian berdasarkan nilai butang Diproses secara berbeza. Jika nilai butang ialah tanda sama (=), kami akan menggunakan fungsi eval untuk menilai ungkapan dan memaparkan hasilnya dalam kotak teks. Jika tidak, kami menambahkan nilai butang pada kandungan kotak teks. Fungsi

clearResult hanya menetapkan nilai kotak teks kepada rentetan kosong untuk melaksanakan fungsi pembersihan.

Kini, anda boleh menyimpan kod HTML dan kod JavaScript di atas ke fail yang sepadan dan membuka fail HTML dalam penyemak imbas. Anda akan melihat antara muka kalkulator mudah yang membolehkan anda melakukan operasi asas matematik. #🎜🎜##🎜🎜#Ini hanyalah contoh kalkulator mudah, yang hanya melaksanakan empat fungsi asas aritmetik. Jika anda ingin melaksanakan fungsi kalkulator yang lebih kompleks, seperti kurungan sokongan, fungsi trigonometri, dsb., anda perlu menambah baik kod tersebut. Tetapi dengan contoh ini, anda boleh melihat cara menggunakan JavaScript untuk melaksanakan fungsi kalkulator mudah. #🎜🎜##🎜🎜# Saya harap artikel ini dapat membantu anda, dan saya ucapkan selamat berprogram! #🎜🎜#

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi kalkulator mudah menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!