Rumah > Artikel > hujung hadapan web > Bagaimana untuk melaksanakan kod kalkulator dalam javascript
Javascript ialah bahasa pengaturcaraan yang digunakan secara meluas dalam pembangunan bahagian hadapan, termasuk banyak aplikasi praktikal, termasuk kalkulator. Sama ada pada PC atau mudah alih, terdapat banyak kalkulator yang dibangunkan oleh JS sedang digunakan. Berikut adalah pengenalan kepada beberapa kaedah melaksanakan kod kalkulator.
1. Struktur asas
Sebelum mula menulis kod kalkulator, kita harus terlebih dahulu memahami struktur asasnya. Biasanya, kalkulator akan terdiri daripada empat butang asas, termasuk nombor, operator, tanda sama dan kekunci jelas. Berdasarkan ini, kami boleh mereka bentuk struktur HTML asas:
<div class="calculator"> <input class="screen" readonly> <div class="buttons"> <button class="number">0</button> <button class="number">1</button> <button class="number">2</button> <button class="op">+</button> <button class="number">3</button> <button class="number">4</button> <button class="number">5</button> <button class="op">-</button> <button class="number">6</button> <button class="number">7</button> <button class="number">8</button> <button class="op">*</button> <button class="number">9</button> <button class="op">.</button> <button class="op">/</button> <button class="clear">C</button> <button class="equal">=</button> </div> </div>
Dalam struktur asas ini, kami mentakrifkan kelas calculator
sebagai bekas. Teg screen
kelas input
digunakan untuk memaparkan hasil pengiraan Butang kelas buttons
masing-masing sepadan dengan nombor, operator, tanda sama dan kekunci kosong.
2. Memproses acara klik
Dalam struktur HTML di atas, kami telah menentukan nama kelas pelbagai butang Seterusnya, kami perlu menulis fungsi pemprosesan acara klik yang sepadan. Jika butang diklik, kita perlu mengendalikan perkara berikut:
Seterusnya, kami mentakrifkan kelas Calculator
dan mentakrifkan pelbagai fungsi pemprosesan dalam kelas:
class Calculator { constructor() { this.result = 0; this.operator = null; this.input = ''; this.screen = document.querySelector('.screen'); } addNumber(number) { this.input += number; this.updateScreen(); } updateScreen() { this.screen.value = this.input; } addOperator(operator) { if (this.input !== '') { this.operator = operator; this.result = parseFloat(this.input); this.input = ''; this.updateScreen(); } } calculate() { if (this.operator !== null && this.input !== '') { switch (this.operator) { case '+': this.result += parseFloat(this.input); break; case '-': this.result -= parseFloat(this.input); break; case '*': this.result *= parseFloat(this.input); break; case '/': this.result /= parseFloat(this.input); break; } this.operator = null; this.input = this.result.toString(); this.updateScreen(); } } clear() { this.result = 0; this.operator = null; this.input = ''; this.updateScreen(); } } const calculator = new Calculator(); document.querySelectorAll('.number').forEach(button => { button.addEventListener('click', () => { calculator.addNumber(button.innerText); }); }); document.querySelectorAll('.op').forEach(button => { button.addEventListener('click', () => { calculator.addOperator(button.innerText); }); }); document.querySelector('.equal').addEventListener('click', () => { calculator.calculate(); }); document.querySelector('.clear').addEventListener('click', () => { calculator.clear(); });
Dalam kod ini, kami mentakrifkan kelas Calculator
, Pembina digunakan untuk memulakan keadaan kalkulator dan mentakrifkan pelbagai fungsi pemprosesan. Dalam proses mengendalikan acara, kami menggunakan querySelectorAll
dan addEventListener
supaya setiap butang boleh bertindak balas kepada acara klik yang sepadan.
3. Kesimpulan
Di atas adalah kaedah asas untuk melaksanakan kod kalkulator dalam Javascript. Dalam proses ini, mula-mula kita perlu mereka bentuk struktur HTML asas, kemudian tulis fungsi pemprosesan acara klik yang sepadan, dan akhirnya memulakan kelas Calculator
. Dalam pembangunan sebenar, kita boleh mengubah suai kod yang sepadan mengikut keperluan sebenar untuk mencapai fungsi kalkulator yang lebih kompleks.
Atas ialah kandungan terperinci Bagaimana untuk melaksanakan kod kalkulator dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!