Rumah hujung hadapan web tutorial js Bagaimana untuk melaksanakan fungsi kalkulator mudah menggunakan JavaScript?

Bagaimana untuk melaksanakan fungsi kalkulator mudah menggunakan JavaScript?

Oct 27, 2023 pm 02:51 PM
javascript kalkulator capai

如何使用 JavaScript 实现一个简单的计算器功能?

Bagaimana untuk menggunakan JavaScript untuk melaksanakan fungsi kalkulator mudah?

Kalkulator adalah salah satu alat yang biasa digunakan dalam kehidupan seharian kita. Ia boleh digunakan untuk melakukan operasi matematik yang mudah. Hari ini, kami akan melaksanakan fungsi kalkulator mudah menggunakan JavaScript. Dalam artikel ini, saya akan menunjukkan kepada anda cara menulis kod menggunakan JavaScript untuk melaksanakan operasi matematik asas dan antara muka kalkulator.

Pertama, kita perlu mencipta fail HTML yang mengandungi kotak teks, butang nombor dan butang operator untuk memaparkan hasil operasi. Berikut ialah struktur HTML asas:

<!DOCTYPE html>
<html>
<head>
    <title>简单计算器</title>
    <style>
        /* 样式可以根据个人喜好进行自定义 */
    </style>
</head>
<body>
    <input type="text" id="result" readonly>
    <br>
    <button onclick="buttonClick('1')">1</button>
    <button onclick="buttonClick('2')">2</button>
    <button onclick="buttonClick('3')">3</button>
    <button onclick="buttonClick('+')">+</button>
    <br>
    <button onclick="buttonClick('4')">4</button>
    <button onclick="buttonClick('5')">5</button>
    <button onclick="buttonClick('6')">6</button>
    <button onclick="buttonClick('-')">-</button>
    <br>
    <button onclick="buttonClick('7')">7</button>
    <button onclick="buttonClick('8')">8</button>
    <button onclick="buttonClick('9')">9</button>
    <button onclick="buttonClick('*')">*</button>
    <br>
    <button onclick="buttonClick('0')">0</button>
    <button onclick="buttonClick('.')">.</button>
    <button onclick="buttonClick('=')">=</button>
    <button onclick="buttonClick('/')">/</button>
    <br>
    <button onclick="clearResult()">清空</button>
</body>
</html>
Salin selepas log masuk

Dalam kod HTML di atas, kami menggunakan kotak teks (id ialah "hasil") untuk memaparkan hasil operasi, dan menambah butang nombor dan butang operator dan kosongkan butang. Setiap butang mempunyai acara onclick, yang memanggil fungsi JavaScript bernama buttonClick untuk mengendalikan acara klik butang. buttonClick 的 JavaScript 函数,用来处理按钮点击事件。

接下来,我们需要在 JavaScript 文件中编写 buttonClickclearResult 函数的实现。以下是示例代码:

function buttonClick(value) {
    var result = document.getElementById("result");

    if (value === '=') {
        result.value = eval(result.value); // 使用 eval 函数计算表达式
    } else {
        result.value += value;
    }
}

function clearResult() {
    document.getElementById("result").value = "";
}
Salin selepas log masuk

buttonClick 函数中,我们首先通过 getElementById 方法获取到文本框的引用,然后根据按钮的值进行不同的处理。如果按钮的值是等于号(=),我们将使用 eval 函数来计算表达式,并将结果显示在文本框中。否则,我们将按钮的值追加到文本框的内容后面。

clearResult

Seterusnya, kita perlu menulis pelaksanaan fungsi buttonClick dan clearResult dalam fail JavaScript. Berikut ialah contoh kod:

rrreee

Dalam fungsi buttonClick, kami mula-mula mendapatkan rujukan kepada kotak teks melalui kaedah getElementById, dan kemudian berdasarkan nilai butang Diproses secara berbeza. Jika nilai butang ialah tanda sama (=), kami akan menggunakan fungsi eval untuk menilai ungkapan dan memaparkan hasilnya dalam kotak teks. Jika tidak, kami menambahkan nilai butang pada kandungan kotak teks. Fungsi

clearResult hanya menetapkan nilai kotak teks kepada rentetan kosong untuk melaksanakan fungsi pembersihan.

Kini, anda boleh menyimpan kod HTML dan kod JavaScript di atas ke fail yang sepadan dan membuka fail HTML dalam penyemak imbas. Anda akan melihat antara muka kalkulator mudah yang membolehkan anda melakukan operasi asas matematik. #🎜🎜##🎜🎜#Ini hanyalah contoh kalkulator mudah, yang hanya melaksanakan empat fungsi asas aritmetik. Jika anda ingin melaksanakan fungsi kalkulator yang lebih kompleks, seperti kurungan sokongan, fungsi trigonometri, dsb., anda perlu menambah baik kod tersebut. Tetapi dengan contoh ini, anda boleh melihat cara menggunakan JavaScript untuk melaksanakan fungsi kalkulator mudah. #🎜🎜##🎜🎜# Saya harap artikel ini dapat membantu anda, dan saya ucapkan selamat berprogram! #🎜🎜#

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi kalkulator mudah menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk melaksanakan log masuk WeChat dwi pada telefon mudah alih Huawei? Bagaimana untuk melaksanakan log masuk WeChat dwi pada telefon mudah alih Huawei? Mar 24, 2024 am 11:27 AM

Bagaimana untuk melaksanakan log masuk WeChat dwi pada telefon mudah alih Huawei? Dengan kebangkitan media sosial, WeChat telah menjadi salah satu alat komunikasi yang sangat diperlukan dalam kehidupan seharian orang ramai. Walau bagaimanapun, ramai orang mungkin menghadapi masalah: log masuk ke beberapa akaun WeChat pada masa yang sama pada telefon mudah alih yang sama. Bagi pengguna telefon mudah alih Huawei, tidak sukar untuk mencapai log masuk WeChat dwi Artikel ini akan memperkenalkan cara mencapai log masuk WeChat dwi pada telefon mudah alih Huawei. Pertama sekali, sistem EMUI yang disertakan dengan telefon mudah alih Huawei menyediakan fungsi yang sangat mudah - pembukaan dua aplikasi. Melalui fungsi pembukaan dwi aplikasi, pengguna boleh serentak

Bagaimana untuk melaksanakan fungsi klon WeChat pada telefon mudah alih Huawei Bagaimana untuk melaksanakan fungsi klon WeChat pada telefon mudah alih Huawei Mar 24, 2024 pm 06:03 PM

Bagaimana untuk melaksanakan fungsi klon WeChat pada telefon mudah alih Huawei Dengan populariti perisian sosial dan penekanan yang semakin meningkat terhadap privasi dan keselamatan orang ramai, fungsi klon WeChat telah beransur-ansur menjadi tumpuan perhatian. Fungsi klon WeChat boleh membantu pengguna log masuk ke berbilang akaun WeChat pada telefon mudah alih yang sama pada masa yang sama, menjadikannya lebih mudah untuk diurus dan digunakan. Tidak sukar untuk melaksanakan fungsi klon WeChat pada telefon mudah alih Huawei Anda hanya perlu mengikuti langkah berikut. Langkah 1: Pastikan versi sistem telefon mudah alih dan versi WeChat memenuhi keperluan Pertama, pastikan versi sistem telefon mudah alih Huawei anda telah dikemas kini kepada versi terkini, serta Apl WeChat.

Panduan Pengaturcaraan PHP: Kaedah untuk Melaksanakan Jujukan Fibonacci Panduan Pengaturcaraan PHP: Kaedah untuk Melaksanakan Jujukan Fibonacci Mar 20, 2024 pm 04:54 PM

Bahasa pengaturcaraan PHP ialah alat yang berkuasa untuk pembangunan web, yang mampu menyokong pelbagai logik dan algoritma pengaturcaraan yang berbeza. Antaranya, melaksanakan jujukan Fibonacci adalah masalah pengaturcaraan biasa dan klasik. Dalam artikel ini, kami akan memperkenalkan cara menggunakan bahasa pengaturcaraan PHP untuk melaksanakan jujukan Fibonacci, dan melampirkan contoh kod tertentu. Jujukan Fibonacci ialah jujukan matematik yang ditakrifkan seperti berikut: unsur pertama dan kedua bagi jujukan ialah 1, dan bermula dari unsur ketiga, nilai setiap unsur adalah sama dengan jumlah dua unsur sebelumnya. Beberapa elemen pertama urutan

Kuasai cara Golang mendayakan kemungkinan pembangunan permainan Kuasai cara Golang mendayakan kemungkinan pembangunan permainan Mar 16, 2024 pm 12:57 PM

Dalam bidang pembangunan perisian hari ini, Golang (bahasa Go), sebagai bahasa pengaturcaraan yang cekap, ringkas dan sangat bersesuaian, semakin digemari oleh pembangun. Perpustakaan standardnya yang kaya dan ciri-ciri konkurensi yang cekap menjadikannya pilihan berprofil tinggi dalam bidang pembangunan permainan. Artikel ini akan meneroka cara menggunakan Golang untuk pembangunan permainan dan menunjukkan kemungkinan besarnya melalui contoh kod tertentu. 1. Kelebihan Golang dalam pembangunan permainan Sebagai bahasa yang ditaip secara statik, Golang digunakan dalam membina sistem permainan berskala besar.

Kalkulator jujukan Fibonacci yang cekap ditulis dalam PHP Kalkulator jujukan Fibonacci yang cekap ditulis dalam PHP Mar 21, 2024 am 10:06 AM

Kalkulator jujukan Fibonacci yang cekap: Pelaksanaan PHP jujukan Fibonacci ialah masalah matematik yang sangat klasik Peraturannya ialah setiap nombor adalah sama dengan jumlah dua nombor sebelumnya, iaitu, F(n)=F(n -1)+F. (n-2), di mana F(0)=0 dan F(1)=1. Apabila mengira jujukan Fibonacci, ia boleh dilaksanakan secara rekursif, tetapi masalah prestasi akan berlaku apabila nilai meningkat. Oleh itu, artikel ini akan memperkenalkan cara menulis Fibonacci yang cekap menggunakan PHP

Panduan Pelaksanaan Keperluan Permainan PHP Panduan Pelaksanaan Keperluan Permainan PHP Mar 11, 2024 am 08:45 AM

Panduan Pelaksanaan Keperluan Permainan PHP Dengan populariti dan perkembangan Internet, pasaran permainan web menjadi semakin popular. Ramai pembangun berharap untuk menggunakan bahasa PHP untuk membangunkan permainan web mereka sendiri, dan melaksanakan keperluan permainan adalah langkah utama. Artikel ini akan memperkenalkan cara menggunakan bahasa PHP untuk melaksanakan keperluan permainan biasa dan menyediakan contoh kod khusus. 1. Cipta watak permainan Dalam permainan web, watak permainan adalah elemen yang sangat penting. Kita perlu mentakrifkan atribut watak permainan, seperti nama, tahap, nilai pengalaman, dll., dan menyediakan kaedah untuk mengendalikannya

Bagaimana untuk melaksanakan operasi pembahagian yang tepat di Golang Bagaimana untuk melaksanakan operasi pembahagian yang tepat di Golang Feb 20, 2024 pm 10:51 PM

Melaksanakan operasi pembahagian yang tepat di Golang adalah keperluan biasa, terutamanya dalam senario yang melibatkan pengiraan kewangan atau senario lain yang memerlukan pengiraan ketepatan tinggi. Operator bahagian terbina dalam Golang "/" dikira untuk nombor titik terapung, dan kadangkala terdapat masalah kehilangan ketepatan. Untuk menyelesaikan masalah ini, kami boleh menggunakan perpustakaan pihak ketiga atau fungsi tersuai untuk melaksanakan operasi pembahagian yang tepat. Pendekatan biasa ialah menggunakan jenis Tikus daripada pakej matematik/besar, yang menyediakan perwakilan pecahan dan boleh digunakan untuk melaksanakan operasi pembahagian yang tepat.

Bagaimana untuk menukar mata wang pada kalkulator sistem Mac - Bagaimana untuk menukar mata wang pada kalkulator sistem Mac Bagaimana untuk menukar mata wang pada kalkulator sistem Mac - Bagaimana untuk menukar mata wang pada kalkulator sistem Mac Mar 18, 2024 pm 03:58 PM

Rakan-rakan, adakah anda tahu cara menukar mata wang pada kalkulator sistem Mac Hari ini saya akan menerangkan cara menukar mata wang pada kalkulator sistem Mac Jika anda berminat, sila datang dan lihat dengan saya. Langkah 1: Buka kalkulator sistem Mac, klik Tukar pada bar menu. Langkah 2: Dalam menu Penukaran, klik Mata Wang. Langkah 3: Selepas memilih mata wang untuk ditukar, klik butang Tukar.

See all articles