W tym artykule stworzymy kalkulator w języku HTML na różnych przykładach. Na początku tego artykułu poznamy podstawowe aspekty HTML. Następnie będziemy wiedzieć, jak stworzyć podstawowy kalkulator w HTML.
Co to jest HTML?
Hypertext Mark-up Language to standardowy język znaczników dla dokumentów zaprojektowanych do wyświetlania w przeglądarce internetowej. Można go używać z różnymi technologiami, takimi jak CSS i językami skryptowymi, takimi jak JavaScript i PHP.
HTML jest oparty na tekście; plik HTML można edytować po prostu otwierając go w Notepad++, Notatniku, programie sublime itp. Edytora tekstu można używać do tworzenia lub edytowania pliku HTML. Jego nazwa ma rozszerzenie pliku .html.
Co to jest kalkulator?
A Kalkulator to urządzenie elektroniczne umożliwiające wykonywanie różnych obliczeń matematycznych, takich jak dodawanie, mnożenie, odejmowanie, dzielenie itp. Firma Casio opracowała pierwszy kalkulator elektroniczny w 1957 roku. Można go uruchomić w różnych systemach operacyjnych na komputerach, smartfonach i tabletach. Kalkulator możemy stworzyć za pomocą różnych narzędzi programistycznych, języków.
Weźmy kilka przykładów Kalkulatora za pomocą HTML.
Przykład 1:
Calculator using HTML Example html { height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #2d3436; background-image: linear-gradient(315deg, #2d3436 0%, #000000 74%); font-family: 'Cookie', cursive; } .title { margin-bottom: 10px; padding: 5px 0; font-size: 40px; font-weight: bold; text-align: center; color: red; font-family: 'Cookie', cursive; } input[type=button] { width: 60px; height: 60px; float: left; padding: 0; margin: 5px; box-sizing: border-box; background: #ecedef; border: none; font-size: 30px; line-height: 30px; border-radius: 50%; font-weight: 700; color: #5E5858; cursor: pointer; } input[type=text] { width: 270px; height: 60px; float: left; padding: 0; box-sizing: border-box; border: none; background: none; color: red; text-align: right; font-weight: 700; font-size: 60px; line-height: 60px; margin: 0 25px; } .calculator { background-color: #c0c0c0; box-shadow: 0px 0px 0px 10px #666; border: 5px solid black; border-radius: 10px; } #display { height: 40px; text-align: right; background-color: black; border: 3px solid white; font-size: 18px; left: 2px; top: 2px; color: red; } .btnTop { color: white; background-color: #6f6f6f; font-size: 14px; margin: auto; width: 50px; height: 25px; } Example of Calculator using HTML <table class="table"> <tr> <td> <br> </td> </tr> <tr> <td> <br> <br> <br> <br> </td> </tr> </table> Wyjaśnienie: W powyższym przykładzie stworzyliśmy podstawowy kalkulator za pomocą języka HTML. za pomocą tego kalkulatora możemy wykonać podstawowe funkcje obliczeniowe, takie jak dodawanie, odejmowanie, mnożenie, dzielenie itp.
Poniżej znajduje się wynik tego przykładu:
Przykład 2:
Calculator using HTML Example * { box-sizing: border-box; font-family: 'Roboto', sans-serif; } body { background: black; } .container { width: auto; margin: 20px; color:black; } .calc-body { width: 275px; margin: auto; min-height: 400px; border: solid 1px #3A4655; box-shadow: 0 8px 50px -7px black; } .calc-screen { background: #3A4655; width: 100%; height: 150px; padding: 20px; } .calc-operation { text-align: right; color: #727B86; font-size: 21px; padding-bottom: 10px; border-bottom: dotted 1px; } .calc-typed { margin-top: 20px; font-size: 45px; text-align: right; color: #fff; } .calc-button-row { width: 100%; background: #3C4857; } .button { width: 25%; background: #425062; color: #fff; padding: 20px; display: inline-block; font-size: 25px; text-align: center; vertical-align: middle; margin-right: -4px; border-right: solid 2px #3C4857; border-bottom: solid 2px #3C4857; transition: all 0.2s ease-in-out; } .button.l { color: #AEB3BA; background: #404D5E; } .button.c { color: #D95D4E; background: #404D5E; } .button:hover { background: #E0B612; transform: rotate(5deg); } .button.c:hover { background: #E0B612; color: #fff; } .button.l:hover { background: #E0B612; color: #fff; } .blink-me { color: #E0B612; } html { height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #2d3436; background-image: linear-gradient(315deg, #2d3436 0%, #000000 74%); font-family: 'Cookie', cursive; } .title:hover { background: #E0B612; color: #fff; } .title { margin-bottom: 10px; padding: 5px 0; font-size: 40px; font-weight: bold; text-align: center; color: #AEB3BA; font-family: 'Cookie', cursive; } input[type=button] { width: 60px; height: 60px; float: left; padding: 0; margin: 5px; box-sizing: border-box; background: #ecedef; border: none; font-size: 30px; line-height: 30px; border-radius: 50%; font-weight: 700; color: #5E5858; cursor: pointer; } input[type=text] { width: 270px; height: 60px; float: left; padding: 0; box-sizing: border-box; border: none; background: none; color: red; text-align: right; font-weight: 700; font-size: 60px; line-height: 60px; margin: 0 25px; } .calculator { background-color: #c0c0c0; box-shadow: 0px 0px 0px 10px #666; border: 5px solid black; border-radius: 10px; } 25 + 10 = 35 <span> _ </span> C ? % / 7 8 9 x 4 5 6 ? 1 2 3 + . 0 <= < pre> <p> <strong>Explanation:</strong> In the above example, we have created a basic calculator with the help of HTML. With the help of this calculator, we can do an essential calculation function such as addition, subtraction, multiplication, division, etc.</p> <p> <strong>Following is the output of this example:</strong> </p> <img src="//techcodeview.com/img/html-tutorial/37/html-calculator-3.webp" alt="HTML Calculator"> <h3>Example 3:</h3> <pre> Calculator using HTML Example body { background-color: tan; } .box { background-color: #3d4543; height: 300px; width: 270px; border-radius: 10px; position: relative; top: 80px; left: 40%; } .display { background-color: #222; width: 220px; position: relative; left: 15px; top: 20px; height: 40px; } .display input { position: relative; left: 2px; top: 2px; height: 35px; color: black; background-color: #bccd95; font-size: 21px; text-align: right; } .keys { position: relative; top: 15px; } .button { width: 40px; height: 30px; border: none; border-radius: 8px; margin-left: 17px; cursor: pointer; border-top: 2px solid transparent; } .button.gray { color: black; font-color: black; background-color: #6f6f6f; border-bottom: black 2px solid; border-top: 2px #6f6f6f solid; } .title:hover { color: #fff; } .title { margin-bottom: 10px; margin-top: 30px; padding: 5px 0; font-size: 40px; font-weight: bold; text-align: center; color: black; font-family: 'Cookie', cursive; } .button.pink { color: black; background-color: #ff4561; border-bottom: black 2px solid; } .button.black { color: black; background-color: 303030; border-bottom: black 2px solid; border-top: 2px 303030 solid; font-weight: bold; } .button.orange { color: black; background-color: FF9933; border-bottom: black 2px solid; border-top: 2px FF9933 solid; } .gray:active { border-top: black 2px solid; border-bottom: 2px #6f6f6f solid; } .pink:active { border-top:black 2px solid; border-bottom:#ff4561 2px solid; } .black:active { border-top: black 2px solid; border-bottom: #303030 2px solid; } .orange:active { border-top: black 2px solid; border-bottom: FF9933 2px solid; } p { line-height: 10px; } Example of Calculator using HTML function c(val) { document.getElementById('d').value=val; } function v(val) {document.getElementById('d').value+=val; } function e() { try { c(eval(document.getElementById('d').value)) } catch(e) { c('Error') } } </pre> <p> <strong>Explanation:</strong> In the above example, we have created a basic calculator with the help of HTML. With the help of this calculator, we can do an essential calculation function such as addition, subtraction, multiplication, division, etc.</p> <p> <strong>Following is the output of this example:</strong> </p> <img src="//techcodeview.com/img/html-tutorial/37/html-calculator-4.webp" alt="HTML Calculator"> <hr></=> Wyjaśnienie: W powyższym przykładzie stworzyliśmy podstawowy kalkulator za pomocą języka HTML. Za pomocą tego kalkulatora możemy wykonać podstawowe funkcje obliczeniowe, takie jak dodawanie, odejmowanie, mnożenie, dzielenie itp.
Poniżej znajduje się wynik tego przykładu:
