Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > pengiraan nilai input JavaScript

pengiraan nilai input JavaScript

WBOY
Lepaskan: 2023-05-27 11:40:07
asal
1228 orang telah melayarinya

JavaScript ialah bahasa pengaturcaraan web yang biasa digunakan yang boleh digunakan untuk mencapai pelbagai kesan interaktif. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk memasukkan jejari bulatan, kemudian mengira dan mengeluarkan luas dan lilitannya.

1. Masukkan jejari

Memasukkan jejari adalah langkah pertama untuk kita mengira lilitan dan luas bulatan. Ini boleh dicapai dengan halaman HTML yang mudah. Pertama, kita perlu mencipta kotak teks dan butang dalam fail HTML untuk memasukkan jejari dan memulakan pengiraan Kod adalah seperti berikut:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>求圆面积和周长</title>
</head>
<body>
    <p>请输入圆的半径:</p>
    <input type="number" id="radius"></input>
    <button onclick="calculate()">计算</button>
    <p id="area"></p>
    <p id="circumference"></p>
    <script src="circle.js"></script>
</body>
</html>
Salin selepas log masuk

Halaman HTML ini mengandungi kotak teks dan butang pengiraan, dan. juga mengandungi dua Perenggan kosong digunakan untuk mengeluarkan keputusan. Antaranya, ID kotak teks ialah "radius", yang digunakan untuk mendapatkan nilai input jejari. Peristiwa onclick butang terikat pada fungsi JavaScript "calculate()", yang digunakan untuk mengira lilitan dan luas bulatan. Hasilnya akan dikeluarkan dalam dua perenggan, diwakili oleh teg dengan ID "kawasan" dan "keliling" masing-masing.

2. Kira luas dan perimeter

Dalam fail HTML, kami memperkenalkan fail JavaScript bernama "circle.js". Dalam fail ini kita akan menulis fungsi untuk mengira luas dan lilitan bulatan. Kodnya adalah seperti berikut:

function calculate() {
    var radius = document.getElementById("radius").value;

    // 计算面积
    var area = Math.PI * Math.pow(radius, 2);
    document.getElementById("area").innerHTML = "面积: " + area + "平方厘米";

    // 计算周长
    var circumference = 2 * Math.PI * radius;
    document.getElementById("circumference").innerHTML = "周长: " + circumference + "厘米";
}
Salin selepas log masuk

Fungsi ini mempunyai tiga langkah utama. Pertama, ia menggunakan kaedah DOM JavaScript untuk mendapatkan nilai kotak teks, iaitu jejari bulatan yang dimasukkan oleh pengguna. Ia kemudian mengira luas bulatan menggunakan pemalar PI dan fungsi pow() daripada perpustakaan Matematik. Akhir sekali, ia mengira lilitan bulatan menggunakan perpustakaan Matematik dan jejari yang dimasukkan, dan menghasilkan keputusan kepada dua perenggan dalam halaman HTML. Dalam contoh ini, kami mengeluarkan kawasan dan perimeter sebagai rentetan, tetapi anda boleh memformatkannya mengikut keperluan.

3. Pengujian dan Pengembangan

Kami kini boleh membuka fail HTML dalam penyemak imbas dan mula menguji. Masukkan nilai dalam kotak teks, kemudian klik butang "Kira", dan halaman akan mengeluarkan kawasan dan lilitan bulatan. Seperti yang ditunjukkan di bawah:

pengiraan nilai input JavaScript

Anda boleh cuba menukar nilai input dan klik butang "Kira" beberapa kali untuk menguji ketepatan fungsi pengiraan. Selain itu, anda boleh melanjutkan program JavaScript mudah ini untuk menerima dan mengeluarkan pembolehubah lain, atau menyediakan pilihan interaktif yang lebih kompleks kepada pengguna.

Kesimpulan

Dalam artikel ini, kami memperkenalkan cara menggunakan JavaScript untuk memasukkan jejari bulatan dan mengira luas dan lilitannya. JavaScript ialah alat biasa untuk melaksanakan operasi interaktif tersebut. Ia boleh memanipulasi HTML dan API pelayar lain dengan mudah, yang menjadikan penulisan aplikasi web dan halaman web lebih mudah dan menyeronokkan.

Atas ialah kandungan terperinci pengiraan nilai input JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan