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>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 = "";
}
}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;
}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!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1377
52
Bagaimana untuk melaksanakan sistem pengecaman pertuturan dalam talian menggunakan WebSocket dan JavaScript
Dec 17, 2023 pm 02:54 PM
Cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem pengecaman pertuturan dalam talian Pengenalan: Dengan perkembangan teknologi yang berterusan, teknologi pengecaman pertuturan telah menjadi bahagian penting dalam bidang kecerdasan buatan. Sistem pengecaman pertuturan dalam talian berdasarkan WebSocket dan JavaScript mempunyai ciri kependaman rendah, masa nyata dan platform merentas, dan telah menjadi penyelesaian yang digunakan secara meluas. Artikel ini akan memperkenalkan cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem pengecaman pertuturan dalam talian.
WebSocket dan JavaScript: teknologi utama untuk melaksanakan sistem pemantauan masa nyata
Dec 17, 2023 pm 05:30 PM
WebSocket dan JavaScript: Teknologi utama untuk merealisasikan sistem pemantauan masa nyata Pengenalan: Dengan perkembangan pesat teknologi Internet, sistem pemantauan masa nyata telah digunakan secara meluas dalam pelbagai bidang. Salah satu teknologi utama untuk mencapai pemantauan masa nyata ialah gabungan WebSocket dan JavaScript. Artikel ini akan memperkenalkan aplikasi WebSocket dan JavaScript dalam sistem pemantauan masa nyata, memberikan contoh kod dan menerangkan prinsip pelaksanaannya secara terperinci. 1. Teknologi WebSocket
Cara menggunakan JavaScript dan WebSocket untuk melaksanakan sistem pesanan dalam talian masa nyata
Dec 17, 2023 pm 12:09 PM
Pengenalan kepada cara menggunakan JavaScript dan WebSocket untuk melaksanakan sistem pesanan dalam talian masa nyata: Dengan populariti Internet dan kemajuan teknologi, semakin banyak restoran telah mula menyediakan perkhidmatan pesanan dalam talian. Untuk melaksanakan sistem pesanan dalam talian masa nyata, kami boleh menggunakan teknologi JavaScript dan WebSocket. WebSocket ialah protokol komunikasi dupleks penuh berdasarkan protokol TCP, yang boleh merealisasikan komunikasi dua hala masa nyata antara pelanggan dan pelayan. Dalam sistem pesanan dalam talian masa nyata, apabila pengguna memilih hidangan dan membuat pesanan
Bagaimana untuk melaksanakan sistem tempahan dalam talian menggunakan WebSocket dan JavaScript
Dec 17, 2023 am 09:39 AM
Cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem tempahan dalam talian Dalam era digital hari ini, semakin banyak perniagaan dan perkhidmatan perlu menyediakan fungsi tempahan dalam talian. Adalah penting untuk melaksanakan sistem tempahan dalam talian yang cekap dan masa nyata. Artikel ini akan memperkenalkan cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem tempahan dalam talian dan memberikan contoh kod khusus. 1. Apakah itu WebSocket? WebSocket ialah kaedah dupleks penuh pada sambungan TCP tunggal.
JavaScript dan WebSocket: Membina sistem ramalan cuaca masa nyata yang cekap
Dec 17, 2023 pm 05:13 PM
JavaScript dan WebSocket: Membina sistem ramalan cuaca masa nyata yang cekap Pengenalan: Hari ini, ketepatan ramalan cuaca sangat penting kepada kehidupan harian dan membuat keputusan. Apabila teknologi berkembang, kami boleh menyediakan ramalan cuaca yang lebih tepat dan boleh dipercayai dengan mendapatkan data cuaca dalam masa nyata. Dalam artikel ini, kita akan mempelajari cara menggunakan teknologi JavaScript dan WebSocket untuk membina sistem ramalan cuaca masa nyata yang cekap. Artikel ini akan menunjukkan proses pelaksanaan melalui contoh kod tertentu. Kami
Tutorial JavaScript Mudah: Cara Mendapatkan Kod Status HTTP
Jan 05, 2024 pm 06:08 PM
Tutorial JavaScript: Bagaimana untuk mendapatkan kod status HTTP, contoh kod khusus diperlukan: Dalam pembangunan web, interaksi data dengan pelayan sering terlibat. Apabila berkomunikasi dengan pelayan, kami selalunya perlu mendapatkan kod status HTTP yang dikembalikan untuk menentukan sama ada operasi itu berjaya dan melaksanakan pemprosesan yang sepadan berdasarkan kod status yang berbeza. Artikel ini akan mengajar anda cara menggunakan JavaScript untuk mendapatkan kod status HTTP dan menyediakan beberapa contoh kod praktikal. Menggunakan XMLHttpRequest
Binaan licin: Cara mengkonfigurasi alamat imej Maven dengan betul
Feb 20, 2024 pm 08:48 PM
Binaan licin: Cara mengkonfigurasi alamat imej Maven dengan betul Apabila menggunakan Maven untuk membina projek, adalah sangat penting untuk mengkonfigurasi alamat imej yang betul. Mengkonfigurasi alamat cermin dengan betul boleh mempercepatkan pembinaan projek dan mengelakkan masalah seperti kelewatan rangkaian. Artikel ini akan memperkenalkan cara mengkonfigurasi alamat cermin Maven dengan betul dan memberikan contoh kod tertentu. Mengapa anda perlu mengkonfigurasi alamat imej Maven ialah alat pengurusan projek yang boleh membina projek secara automatik, mengurus kebergantungan, menjana laporan, dsb. Apabila membina projek di Maven, biasanya
Optimumkan proses pembungkusan projek Maven dan tingkatkan kecekapan pembangunan
Feb 24, 2024 pm 02:15 PM
Panduan langkah pembungkusan projek Maven: Optimumkan proses binaan dan tingkatkan kecekapan pembangunan Apabila projek pembangunan perisian menjadi semakin kompleks, kecekapan dan kelajuan pembinaan projek telah menjadi pautan penting dalam proses pembangunan yang tidak boleh diabaikan. Sebagai alat pengurusan projek yang popular, Maven memainkan peranan penting dalam pembinaan projek. Panduan ini akan meneroka cara meningkatkan kecekapan pembangunan dengan mengoptimumkan langkah pembungkusan projek Maven dan menyediakan contoh kod khusus. 1. Sahkan struktur projek Sebelum mula mengoptimumkan langkah pembungkusan projek Maven, anda perlu mengesahkan terlebih dahulu
