Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >JavaScript melaksanakan empat operasi aritmetik mudah
JavaScript melaksanakan empat operasi aritmetik mudah
- WBOYasal
- 2023-05-18 10:14:071583semak imbas
Javascript ialah bahasa pengaturcaraan yang digunakan secara meluas dalam pembangunan bahagian hadapan, juga dikenali sebagai bahasa skrip. Ia boleh melaksanakan banyak fungsi, termasuk empat operasi aritmetik mudah. Artikel ini akan memperkenalkan cara menggunakan javascript untuk melaksanakan empat operasi aritmetik mudah.
- Input nombor
Untuk melakukan empat operasi aritmetik, anda perlu memasukkan nombor terlebih dahulu. Anda boleh menggunakan teg input dalam HTML untuk memasukkan nombor. Contohnya:
<input type="number" id="num1" placeholder="请输入第一个数字"> <input type="number" id="num2" placeholder="请输入第二个数字">
Ini akan membolehkan anda memasukkan dua nombor pada halaman.
- Pemilihan pengendali operasi
Empat operasi aritmetik termasuk penambahan, penolakan, pendaraban dan pembahagian Kotak pilihan perlu disediakan pada halaman untuk dipilih oleh pengguna. Operator yang anda mahu lakukan. Ini boleh dicapai menggunakan teg pilih dalam HTML.
<select id="operator"> <option value="+">加</option> <option value="-">减</option> <option value="*">乘</option> <option value="/">除</option> </select>
Ini membolehkan anda memilih salah satu daripada empat pengendali pada halaman.
- Pelaksanaan operasi
Dalam JavaScript, anda boleh menggunakan fungsi asas matematik untuk melaksanakan empat operasi aritmetik. Penambahan menggunakan operator +, penolakan menggunakan operator -, pendaraban menggunakan operator *, dan pembahagian menggunakan operator /. Oleh itu, kod boleh ditulis seperti berikut:
function calculate() {
var num1 = document.getElementById('num1').value;
var num2 = document.getElementById('num2').value;
var operator = document.getElementById('operator').value;
var result;
switch (operator) {
case '+':
result = parseFloat(num1) + parseFloat(num2);
break;
case '-':
result = parseFloat(num1) - parseFloat(num2);
break;
case '*':
result = parseFloat(num1) * parseFloat(num2);
break;
case '/':
result = parseFloat(num1) / parseFloat(num2);
break;
default:
result = '请选择操作符';
}
document.getElementById('result').value = result;
}Kod ini mula-mula mendapatkan nombor dan operator pada halaman, dan kemudian menggunakan pernyataan suis untuk melaksanakan operasi tertentu. Akhirnya keputusan dipaparkan pada halaman.
- Contoh kod lengkap
<!DOCTYPE html>
<html>
<head>
<title>Javascript四则运算示例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Javascript四则运算示例</h1>
<p>输入两个数字，选择一个操作符，点击计算按钮进行运算</p>
<input type="number" id="num1" placeholder="请输入第一个数字">
<input type="number" id="num2" placeholder="请输入第二个数字">
<select id="operator">
<option value="+">加</option>
<option value="-">减</option>
<option value="*">乘</option>
<option value="/">除</option>
</select>
<button onclick="calculate()">计算</button>
<input type="text" id="result" readonly>
<script>
function calculate() {
var num1 = document.getElementById('num1').value;
var num2 = document.getElementById('num2').value;
var operator = document.getElementById('operator').value;
var result;
switch (operator) {
case '+':
result = parseFloat(num1) + parseFloat(num2);
break;
case '-':
result = parseFloat(num1) - parseFloat(num2);
break;
case '*':
result = parseFloat(num1) * parseFloat(num2);
break;
case '/':
result = parseFloat(num1) / parseFloat(num2);
break;
default:
result = '请选择操作符';
}
document.getElementById('result').value = result;
}
</script>
</body>
</html>- Ringkasan
Melalui contoh kod di atas, kita dapat melihat bahawa javascript boleh menjadi sangat mudah Laksanakan empat operasi aritmetik mudah. Dalam pembangunan sebenar, kaedah pelaksanaan ini boleh digunakan pada halaman untuk memudahkan pengguna melakukan pengiraan yang mudah.
Atas ialah kandungan terperinci JavaScript melaksanakan empat operasi aritmetik mudah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!