Šiame straipsnyje įvairių pavyzdžių pagalba sukursime skaičiuotuvą naudodami HTML. Šio straipsnio pradžioje sužinosime pagrindinius HTML aspektus. Po to mes žinosime, kaip sukurti pagrindinį skaičiuotuvą su HTML.
Kas yra HTML?
Hiperteksto žymėjimo kalba yra standartinė dokumentų, skirtų rodyti žiniatinklio naršyklėje, žymėjimo kalba. Jis gali būti naudojamas su įvairiomis technologijomis, tokiomis kaip CSS, ir skriptų kalbomis, tokiomis kaip JavaScript ir PHP.
HTML yra teksto pagrindu; HTML failą galima redaguoti tiesiog atidarius jį „Notepad++“, „Notepad“ ir „sublime“ programoje ir kt. Teksto rengyklė gali būti naudojama HTML failui sukurti arba redaguoti. Jis pavadintas .html failo plėtiniu.
Kas yra skaičiuotuvas?
A Skaičiuoklė yra elektroninis įrenginys, galintis atlikti įvairius matematinius skaičiavimus, tokius kaip sudėtis, daugyba, atimtis, dalyba ir kt. Pirmąjį elektroninį skaičiuotuvą Casio kompanija sukūrė 1957 m. Jį galima paleisti įvairiose kompiuterių, išmaniųjų telefonų ir planšetinių kompiuterių operacinėse sistemose. Skaičiuoklę galime sukurti pasitelkę įvairius kūrimo įrankius, kalbas.
Paimkime keletą skaičiuoklės su HTML pagalba pavyzdžių.
1 pavyzdys:
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> Paaiškinimas: Aukščiau pateiktame pavyzdyje HTML pagalba sukūrėme pagrindinį skaičiuotuvą. Naudodami šį skaičiuotuvą galime atlikti esmines skaičiavimo funkcijas, tokias kaip sudėtis, atimtis, daugyba, dalyba ir kt.
Toliau pateikiama šio pavyzdžio išvestis:
2 pavyzdys:
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></=> Paaiškinimas: Aukščiau pateiktame pavyzdyje HTML pagalba sukūrėme pagrindinį skaičiuotuvą. Naudodami šį skaičiuotuvą galime atlikti esmines skaičiavimo funkcijas, tokias kaip sudėtis, atimtis, daugyba, padalijimas ir kt.
Toliau pateikiama šio pavyzdžio išvestis:
