Bina kalkulator dalam talian menggunakan JavaScript-tutorial js-php.cn

Bina kalkulator dalam talian menggunakan JavaScript

WBOY

Lepaskan： 2023-08-09 15:46:49

asal

1496 orang telah melayarinya

Bina kalkulator dalam talian menggunakan JavaScript

Gunakan JavaScript untuk membina kalkulator dalam talian

Dengan perkembangan Internet, semakin banyak alat dan aplikasi telah mula muncul dalam talian. Antaranya, kalkulator adalah salah satu alat yang paling banyak digunakan. Artikel ini menerangkan cara membina kalkulator dalam talian mudah menggunakan JavaScript dan menyediakan contoh kod.

Sebelum bermula, kita perlu mengetahui beberapa pengetahuan asas HTML dan CSS. Antara muka kalkulator boleh dibina menggunakan elemen jadual HTML dan kemudian digayakan menggunakan CSS. Berikut ialah contoh kod HTML untuk antara muka kalkulator asas:

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

Salin selepas log masuk

Dalam contoh di atas, kotak teks dengan id "hasil" digunakan untuk memaparkan hasil pengiraan. Kemudian, antara muka kalkulator mudah dibina menggunakan tag jadual dan tag butang. Pada setiap butang, acara onclick digunakan untuk mencetuskan tindakan yang sepadan.

Seterusnya, kita perlu menulis kod JavaScript untuk melaksanakan logik kalkulator. Berikut ialah contoh kod JavaScript yang digunakan untuk mengawal operasi kalkulator:

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 = "";
    }
}

Salin selepas log masuk

Dalam kod di atas, tiga fungsi ditakrifkan: appendNumber、appendOperator和calculate。appendNumber函数用于追加数字到表达式中；appendOperator函数用于追加运算符到表达式中；calculateFungsi digunakan untuk melakukan pengiraan dan memaparkan keputusan.

Akhir sekali, kita perlu menggunakan CSS untuk menggayakan antara muka kalkulator. Berikut ialah contoh kod CSS mudah:

.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;
}

Salin selepas log masuk

Dalam kod CSS di atas, beberapa gaya asas digunakan untuk mencantikkan antara muka kalkulator.

Dengan contoh kod di atas, kita boleh membina kalkulator dalam talian yang mudah. Pengguna boleh memasukkan nombor dan operator dengan mengklik butang, dan kalkulator akan secara automatik melakukan pengiraan yang berkaitan dan memaparkan keputusan. Kalkulator ini boleh digunakan untuk operasi matematik mudah seperti operasi tambah, tolak, darab, bahagi dan perpuluhan.

Untuk meringkaskan, adalah boleh untuk menulis kalkulator dalam talian melalui JavaScript Kami hanya perlu menggunakan HTML untuk membina antara muka, CSS untuk penggayaan, dan kemudian menggunakan JavaScript untuk melaksanakan logik kalkulator. Saya harap kandungan artikel ini membantu anda, dan saya ucapkan selamat maju jaya dalam membina kalkulator dalam talian menggunakan JavaScript!

Atas ialah kandungan terperinci Bina kalkulator dalam talian menggunakan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!