Bạn có thể viết mã máy tính bằng html không?

Đoạn mã này giúp bạn tạo một máy tính đơn giản trong HTML. Nó đi kèm với thiết kế giao diện người dùng phẳng với tất cả các phương pháp tính toán cơ bản. Người dùng có thể dễ dàng thực hiện các phép tính cộng, trừ, nhân, chia trên các số

Máy tính đơn giản này đi kèm với một Numpad ảo. Nó không hỗ trợ các phím bàn phím để nhập số. Tuy nhiên, bạn có thể sử dụng chuột (hoặc chạm) để nhập các số để thực hiện các phép toán. Hơn nữa, bạn có thể tùy chỉnh cao với CSS bổ sung

Cách tạo máy tính HTML đơn giản

1. Trước hết, tạo cấu trúc HTML cho máy tính như sau

<div class="calculator"> <div class="input" id="input"></div> <div class="buttons"> <div class="operators"> <div>+</div> <div>-</div> <div>×</div> <div>÷</div> </div> <div class="leftPanel"> <div class="numbers"> <div>7</div> <div>8</div> <div>9</div> </div> <div class="numbers"> <div>4</div> <div>5</div> <div>6</div> </div> <div class="numbers"> <div>1</div> <div>2</div> <div>3</div> </div> <div class="numbers"> <div>0</div> <div>.</div> <div id="clear">C</div> </div> </div> <div class="equal" id="result">=</div> </div> </div>

2. Sau đó, tạo kiểu cho giao diện máy tính bằng CSS sau

.calculator { padding: 20px; max-width: 440px; margin: 10px auto; -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2); border-radius: 1px; } .input { border: 1px solid #ddd; border-radius: 1px; height: 60px; padding-right: 15px; padding-top: 10px; text-align: right; margin-right: 6px; font-size: 2.5rem; overflow-x: auto; transition: all .2s ease-in-out; } .input:hover { border: 1px solid #bbb; -webkit-box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.2); box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.2); } .operators div { display: inline-block; border: 1px solid #bbb; border-radius: 1px; width: 80px; text-align: center; padding: 10px; margin: 20px 4px 10px 0; cursor: pointer; background-color: #ddd; transition: border-color .2s ease-in-out, background-color .2s, box-shadow .2s; } .operators div:hover { background-color: #ddd; -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2); border-color: #aaa; } .operators div:active { font-weight: bold; } .leftPanel { display: inline-block; } .numbers div { display: inline-block; border: 1px solid #ddd; border-radius: 1px; width: 80px; text-align: center; padding: 10px; margin: 10px 4px 10px 0; cursor: pointer; background-color: #f9f9f9; transition: border-color .2s ease-in-out, background-color .2s, box-shadow .2s; } .numbers div:hover { background-color: #f1f1f1; -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2); border-color: #bbb; } .numbers div:active { font-weight: bold; } div.equal { display: inline-block; border: 1px solid #3079ED; border-radius: 1px; width: 17%; text-align: center; padding: 127px 10px; margin: 10px 6px 10px 0; vertical-align: top; cursor: pointer; color: #FFF; background-color: #4d90fe; transition: all .2s ease-in-out; } div.equal:hover { background-color: #307CF9; -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2); border-color: #1857BB; } div.equal:active { font-weight: bold; }

3. Cuối cùng, thêm đoạn mã JavaScript sau vào trước khi đóng thẻ body và hoàn tất

"use strict"; var input = document.getElementById('input'), // input/output button number = document.querySelectorAll('.numbers div'), // number buttons operator = document.querySelectorAll('.operators div'), // operator buttons result = document.getElementById('result'), // equal button clear = document.getElementById('clear'), // clear button resultDisplayed = false; // flag to keep an eye on what output is displayed // adding click handlers to number buttons for (var i = 0; i < number.length; i++) { number[i].addEventListener("click", function(e) { // storing current input string and its last character in variables - used later var currentString = input.innerHTML; var lastChar = currentString[currentString.length - 1]; // if result is not diplayed, just keep adding if (resultDisplayed === false) { input.innerHTML += e.target.innerHTML; } else if (resultDisplayed === true && lastChar === "+" || lastChar === "-" || lastChar === "×" || lastChar === "÷") { // if result is currently displayed and user pressed an operator // we need to keep on adding to the string for next operation resultDisplayed = false; input.innerHTML += e.target.innerHTML; } else { // if result is currently displayed and user pressed a number // we need clear the input string and add the new input to start the new opration resultDisplayed = false; input.innerHTML = ""; input.innerHTML += e.target.innerHTML; } }); } // adding click handlers to number buttons for (var i = 0; i < operator.length; i++) { operator[i].addEventListener("click", function(e) { // storing current input string and its last character in variables - used later var currentString = input.innerHTML; var lastChar = currentString[currentString.length - 1]; // if last character entered is an operator, replace it with the currently pressed one if (lastChar === "+" || lastChar === "-" || lastChar === "×" || lastChar === "÷") { var newString = currentString.substring(0, currentString.length - 1) + e.target.innerHTML; input.innerHTML = newString; } else if (currentString.length == 0) { // if first key pressed is an opearator, don't do anything console.log("enter a number first"); } else { // else just add the operator pressed to the input input.innerHTML += e.target.innerHTML; } }); } // on click of 'equal' button result.addEventListener("click", function() { // this is the string that we will be processing eg. -10+26+33-56*34/23 var inputString = input.innerHTML; // forming an array of numbers. eg for above string it will be: numbers = ["10", "26", "33", "56", "34", "23"] var numbers = inputString.split(/\+|\-|\×|\÷/g); // forming an array of operators. for above string it will be: operators = ["+", "+", "-", "*", "/"] // first we replace all the numbers and dot with empty string and then split var operators = inputString.replace(/[0-9]|\./g, "").split(""); console.log(inputString); console.log(operators); console.log(numbers); console.log("----------------------------"); // now we are looping through the array and doing one operation at a time. // first divide, then multiply, then subtraction and then addition // as we move we are alterning the original numbers and operators array // the final element remaining in the array will be the output var divide = operators.indexOf("÷"); while (divide != -1) { numbers.splice(divide, 2, numbers[divide] / numbers[divide + 1]); operators.splice(divide, 1); divide = operators.indexOf("÷"); } var multiply = operators.indexOf("×"); while (multiply != -1) { numbers.splice(multiply, 2, numbers[multiply] * numbers[multiply + 1]); operators.splice(multiply, 1); multiply = operators.indexOf("×"); } var subtract = operators.indexOf("-"); while (subtract != -1) { numbers.splice(subtract, 2, numbers[subtract] - numbers[subtract + 1]); operators.splice(subtract, 1); subtract = operators.indexOf("-"); } var add = operators.indexOf("+"); while (add != -1) { // using parseFloat is necessary, otherwise it will result in string concatenation :) numbers.splice(add, 2, parseFloat(numbers[add]) + parseFloat(numbers[add + 1])); operators.splice(add, 1); add = operators.indexOf("+"); } input.innerHTML = numbers[0]; // displaying the output resultDisplayed = true; // turning flag if result is displayed }); // clearing the input on press of clear clear.addEventListener("click", function() { input.innerHTML = ""; })

Đó là tất cả. hy vọng bạn đã tạo thành công một máy tính đơn giản bằng đoạn mã HTML này. Nếu bạn có bất kỳ câu hỏi hoặc đề xuất nào, hãy cho tôi biết bằng cách bình luận bên dưới

Làm cách nào để tạo Máy tính đơn giản trong HTML?