במאמר זה ניצור מחשבון באמצעות HTML בעזרת דוגמאות שונות. בתחילת מאמר זה, נלמד היבטים בסיסיים של HTML. לאחר מכן, נדע ליצור מחשבון בסיסי עם HTML.
מה זה HTML?
Hypertext Mark-up Language היא שפת הסימון הסטנדרטית עבור מסמכים המיועדים להצגה בדפדפן אינטרנט. ניתן להשתמש בו עם טכנולוגיות שונות כמו CSS ושפות סקריפטים כמו JavaScript ו-PHP.
HTML מבוסס על טקסט; ניתן לערוך קובץ HTML פשוט על ידי פתיחתו ב-Notepad++, Notepad, ותוכנית נשגבת וכו'. ניתן להשתמש בעורך טקסט כדי ליצור או לערוך קובץ HTML. זה נקרא עם סיומת קובץ .html.
מהו מחשבון?
א מַחשְׁבוֹן הוא מכשיר אלקטרוני המסוגל לבצע חישובים מתמטיים שונים, כגון חיבור, כפל, חיסור, חילוק וכו'. חברת Casio פיתחה את המחשבון האלקטרוני הראשון בשנת 1957. ניתן להפעיל אותו במערכות הפעלה שונות במחשבים, סמארטפונים וטאבלטים. אנו יכולים ליצור מחשבון בעזרת כלים שונים לפיתוח, שפות.
ניקח כמה דוגמאות של מחשבון בעזרת HTML.
דוגמה 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> הֶסבֵּר: בדוגמה לעיל, יצרנו מחשבון בסיסי בעזרת HTML. בעזרת מחשבון זה נוכל לבצע פונקציית חישוב חיונית כמו חיבור, חיסור, כפל, חילוק וכו'.
להלן הפלט של דוגמה זו:
דוגמה 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></=> הֶסבֵּר: בדוגמה לעיל, יצרנו מחשבון בסיסי בעזרת HTML. בעזרת מחשבון זה נוכל לבצע פונקציית חישוב חיונית כמו חיבור, חיסור, כפל, חילוק וכו'.
להלן הפלט של דוגמה זו:
