Chuyên mục

HTML Calculator – Tạo máy tính bằng HTML chi tiết

Posted by Lập Trình Viên HTML 10 phút đọc

Trong bài viết này, chúng ta sẽ tạo một máy tính bằng HTML với sự trợ giúp của các ví dụ khác nhau. Ở đầu bài viết này, chúng ta sẽ học về các khía cạnh cơ bản của HTML. Sau đó, chúng ta sẽ biết cách tạo một máy tính cơ bản với HTML.

Lập Trình Viên mời bạn cùng tham khảo chi tiết nội dung bên dưới.

HTML Calculator là gì?

HTML Calculator là một loại máy tính được tạo ra bằng HTML và có thể được chạy trên trình duyệt web. Với HTML Calculator, người dùng có thể thực hiện các phép tính cộng, trừ, nhân, chia và nhiều phép tính toán khác. Nó rất hữu ích cho các nhà toán học và sinh viên, cũng như cho những người muốn kiểm tra kết quả của mình trong khi tính toán.

HTML Calculator là một ứng dụng web cho phép người dùng thực hiện các phép tính cơ bản mà không cần phải tải xuống hoặc cài đặt bất kỳ phần mềm nào. Nó chỉ cần một trình duyệt web để chạy. Với HTML Calculator, người dùng có thể thực hiện các phép tính cộng, trừ, nhân và chia dễ dàng.

HTML Calculator có thể được sử dụng bởi bất kỳ ai muốn thực hiện các phép tính cơ bản. Nó rất hữu ích cho các nhà toán học, sinh viên và bất kỳ ai cần tính toán trong công việc hoặc cuộc sống hàng ngày của mình.

Hướng dẫn HTML Calculator

Để tạo một HTML Calculator, chúng ta có thể sử dụng HTML, CSS và JavaScript. Sau đây là một ví dụ về cách tạo một máy tính cơ bản với HTML:

<!DOCTYPE html>
<html>
<head>
  <title>HTML Calculator</title>
</head>
<body>
  <form name="calculator">
  <input type="text" name="answer" placeholder="0">
  <br>
  <input type="button" value="1" onclick="calculator.answer.value+='1'">
  <input type="button" value="2" onclick="calculator.answer.value+='2'">
  <input type="button" value="3" onclick="calculator.answer.value+='3'">
  <input type="button" value="+" onclick="calculator.answer.value+='+'">
  <br>
  <input type="button" value="4" onclick="calculator.answer.value+='4'">
  <input type="button" value="5" onclick="calculator.answer.value+='5'">
  <input type="button" value="6" onclick="calculator.answer.value+='6'">
  <input type="button" value="-" onclick="calculator.answer.value+='-'">
  <br>
  <input type="button" value="7" onclick="calculator.answer.value+='7'">
  <input type="button" value="8" onclick="calculator.answer.value+='8'">
  <input type="button" value="9" onclick="calculator.answer.value+='9'">
  <input type="button" value="*" onclick="calculator.answer.value+='*'">
  <br>
  <input type="button" value="C" onclick="calculator.answer.value=''">
  <input type="button" value="0" onclick="calculator.answer.value+='0'">
  <input type="button" value="=" onclick="calculator.answer.value=eval(calculator.answer.value)">
  <input type="button" value="/" onclick="calculator.answer.value+='/'">
  <br>
  </form>
</body>
</html>

Bộ code đầy đủ để tạo ra chương trình máy tính.

<! DOCTYPE html>  
<html>  
    <head>  
    <meta charset="utf-8">  
    <title>  
         Calculator using HTML Example  
    </title>  
    <link href="https://fonts.googleapis.com/css2?family=Cookie&display=swap" rel="stylesheet">  
    <!-- CSS property to create interactive  
        calculator interface -->  
    <style>  
    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;  
}     
    </style>  
</head>  
<body>  
    <div class = "title"  align="center">  
        Example of Calculator using HTML  
    </div>  
    <form name="Calculator" class = "calculator" >  
<table border="2" align="center" cellpadding="15" cellspacing="12" bgcolor="#c0c0c0">  
<tr>  
<td>  
<input type="text" name="Input" Size="35" id="display">  
<br>  
</td>  
</tr>  
<tr>  
<td>  
<input type="button" name = "one" style="font-size:30px" value=" 1 " OnClick="Calculator.Input.value += '1'">  
<input type="button" name = "two" style = "font-size:30px" value=" 2 " OnCLick="Calculator.Input.value += '2'">  
<input type="button" name = "three" style="font-size:30px" value=" 3 " OnClick="Calculator.Input.value += '3'">  
<input type="button" name="add" class ="btnTop" style="font-size:30px" value=" + " OnClick="Calculator.Input.value += ' + '">  
<br>  
<input type="button" name = "four" style="font-size:30px" value=" 4 " OnClick="Calculator.Input.value += '4'">  
<input type="button" name = "five" style="font-size:30px" value=" 5 " OnCLick="Calculator.Input.value += '5'">  
<input type="button" name = "six" style="font-size:30px" value=" 6 " OnClick="Calculator.Input.value += '6'">  
<input type="button" name = "minus" style="font-size:30px" value=" - " OnClick="Calculator.Input.value += ' - '">  
<br>  
<input type="button" name = "seven" style="font-size:30px" value=" 7 " OnClick="Calculator.Input.value += '7'">  
<input type="button" name = "eight" style="font-size:30px" value=" 8 " OnCLick="Calculator.Input.value += '8'">  
<input type="button" name = "nine" style="font-size:30px" value=" 9 " OnClick="Calculator.Input.value += '9'">  
<input type="button" name = "mul" style="font-size:30px" value=" * "   
OnClick="Calculator.Input.value += ' * '">  
<br>  
<input type="button" name = "clear" style="font-size:30px" value=" c " OnClick="Calculator.Input.value = ''">  
<input type="button" name="zero" style="font-size:30px" value=" 0 " OnClick="Calculator.Input.value += '0'">  
<input type="button" name="DoIt" style="font-size:30px" value=" = " OnClick="Calculator.Input.value = eval(Calculator.Input.value)">  
<input type="button" name="div" style="font-size:30px" value=" / " OnClick="Calculator.Input.value += ' / '">  
<br>  
</td>  
  
</tr>  
</table>  
</form>  
</body>  
</html>

Kết quả

HTML Calculator
HTML Calculator

Ưu và Nhược điểm HTML Calculator là gì?

Ưu điểm:

  • Dễ sử dụng: HTML Calculator có giao diện đơn giản và dễ sửdụng, giúp người dùng thực hiện các phép tính cơ bản một cách nhanh chóng và dễ dàng.
  • Không cần tải xuống hoặc cài đặt: HTML Calculator có thể được sử dụng trực tiếp trên trình duyệt web mà không cần phải tải xuống hoặc cài đặt bất kỳ phần mềm nào.
  • Tiết kiệm thời gian: Với HTML Calculator, người dùng có thể thực hiện các phép tính cơ bản mà không cần phải mở một ứng dụng máy tính riêng biệt.

Nhược điểm:

  • Giới hạn chức năng: HTML Calculator chỉ hỗ trợ các phép tính cơ bản như cộng, trừ, nhân và chia. Nếu bạn cần thực hiện các phép tính phức tạp hơn, bạn cần sử dụng một ứng dụng máy tính riêng biệt.
  • Không được bảo mật: HTML Calculator không được bảo mật, do đó dữ liệu của bạn có thể bị đánh cắp hoặc bị lộ khi sử dụng nó trên một trang web không an toàn.

Lời khuyên HTML Calculator là gì?

HTML Calculator rất hữu ích cho các phép tính cơ bản. Tuy nhiên, nếu bạn cần thực hiện các phép tính phức tạp hơn hoặc muốn bảo vệ dữ liệu của mình, bạn nên sử dụng một ứng dụng máy tính riêng biệt hoặc một trang web an toàn để thực hiện các phép tính.

1. HTML Calculator là gì?

HTML Calculator là một loại máy tính được tạo ra bằng HTML và có thể được chạy trên trình duyệt web.

2. Ai có thể sử dụng HTML Calculator?

HTML Calculator có thể được sử dụng bởi bất kỳ ai muốn thực hiện các phép tính cơ bản.

3. Có thể sử dụng HTML Calculator để thực hiện các phép tính phức tạp không?

Không, HTML Calculator chỉ hỗ trợ các phép tính cơ bản như cộng, trừ, nhân và chia.

4. HTML Calculator có an toàn không?

HTML Calculator không được bảo mật, do đó dữ liệu của bạn có thể bị đánh cắp hoặc bị lộ khi sử dụng nó trên một trang web không an toàn.

5. Tôi nên sử dụng HTML Calculator hay một ứng dụng máy tính riêng biệt?

Nếu bạn cần thực hiện các phép tính phức tạp hơn hoặc muốn bảo vệ dữ liệu của mình, bạn nên sử dụng một ứng dụng máy tính riêng biệt hoặc một trang web an toàn để thực hiện các phép tính.