Ebben a cikkben különféle példák segítségével készítünk egy számológépet HTML használatával. A cikk elején megismerjük a HTML alapvető aspektusait. Ezek után tudni fogjuk, hogyan készítsünk egy alapvető számológépet HTML-lel.
Mi az a HTML?
A Hypertext Mark-up Language a szabványos jelölőnyelv a webböngészőben való megjelenítésre tervezett dokumentumokhoz. Használható különféle technológiákkal, például CSS-sel és olyan szkriptnyelvekkel, mint a JavaScript és a PHP.
A HTML szöveg alapú; egy HTML-fájl egyszerűen szerkeszthető úgy, hogy megnyitja a Notepad++-ban, a Jegyzettömbben és a sublime programban stb. A szövegszerkesztővel HTML-fájlt hozhat létre vagy szerkeszthet. A neve .html fájlkiterjesztéssel történik.
Mi az a számológép?
A Számológép egy elektronikus eszköz, amely különféle matematikai számítások elvégzésére képes, mint például összeadás, szorzás, kivonás, osztás stb. A Casio Company 1957-ben fejlesztette ki az első elektronikus számológépet, amely számítógépeken, okostelefonokon és táblagépeken különböző operációs rendszereken futtatható. Számológépet készíthetünk különféle fejlesztőeszközök, nyelvek segítségével.
Vegyünk néhány példát a Számológépre a HTML segítségével.
1. példa:
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> Magyarázat: A fenti példában egy alap számológépet hoztunk létre HTML segítségével. a számológép segítségével olyan alapvető számítási funkciókat végezhetünk el, mint az összeadás, kivonás, szorzás, osztás stb.
A példa kimenete a következő:
2. példa:
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></=> Magyarázat: A fenti példában egy alap számológépet hoztunk létre HTML segítségével. A számológép segítségével olyan alapvető számítási funkciókat végezhetünk el, mint az összeadás, kivonás, szorzás, osztás stb.
A példa kimenete a következő:
