Hướng dẫn html calculator - máy tính html

Đã đăng vào thg 6 21, 2019 9:30 SA 2 phút đọc 2 phút đọc

Thật ra thì mình có hơi chém gió 1 chút ở phần tiêu đề của bài viết, có 1 "chút chút" rất rất ít code Javascript và cũng khá là đơn giản nên mình viết luôn vào code HTML cho gọn, nên thôi coi như là chỉ có code HTML thôi nhé các bạn

Khi hoàn thiện, nó sẽ trông giống như hình dưới (chính là nó vì mình chụp màn hình lại mà )

Hãy bắt đầu ngay thôi nào!

Đầu tiên, ta wrap tất cả các code HTML bên trong với 1 thẻ form:

<form name="calculator">
  ...
form>

Attribute trong form trên có thuộc tính name, value trong name sẽ đóng vai trò như giá trị tham chiếu (biến this) của block HTML này.

Trong form ta cần có 1 table để chia hàng và cột chứa kết quả, các số, các phép tính (+, -, x, /, =) và reset.

Ở hàng đầu tiên của table sẽ là ô hiển thị các số khi bấm chọn cũng như là kết quả của các phép tính khi thực hiện tính toán. Code HTML phần này sẽ như sau:

<table>
    <tr>
      <td colspan="4">
        <input type="text" name="display" disabled>
      td>
    tr>
  table>

Hàng này sẽ chỉ hiển thị kết quả chứ không được edit nên sẽ có thuộc tính

<table>
    <tr>
      <td colspan="4">
        <input type="text" name="display" disabled>
      td>
    tr>
  table>

Hàng thứ 2 sẽ bao gồm phím bấm các số 1, 2, 3 và phép cộng, đương nhiên là vẫn sẽ dùng các thẻ

<table>
    <tr>
      <td colspan="4">
        <input type="text" name="display" disabled>
      td>
    tr>
  table>

<table>
    <tr>
      <td colspan="4">
        <input type="text" name="display" disabled>
      td>
    tr>
  table>

<tr>
  <td><input type="button" name="one" value="1" onclick="calculator.display.value += 1">td>
  <td><input type="button" name="two" value="2" onclick="calculator.display.value += 2">td>
  <td><input type="button" name="three" value="3" onclick="calculator.display.value += 3">td>
  <td><input type="button" class="operator" name="plus" value="+" onclick="calculator.display.value += '+'">td>
tr>

Mỗi thẻ

<table>
    <tr>
      <td colspan="4">
        <input type="text" name="display" disabled>
      td>
    tr>
  table>

<table>
    <tr>
      <td colspan="4">
        <input type="text" name="display" disabled>
      td>
    tr>
  table>

<table>
    <tr>
      <td colspan="4">
        <input type="text" name="display" disabled>
      td>
    tr>
  table>

<table>
    <tr>
      <td colspan="4">
        <input type="text" name="display" disabled>
      td>
    tr>
  table>

<table>
    <tr>
      <td colspan="4">
        <input type="text" name="display" disabled>
      td>
    tr>
  table>

Tương tự cho các hàng và cột còn lại, code HTML cũng không khác nhiều, chỉ ngoại trừ value của mỗi ô khác nhau. Toàn bộ code HTML như sau:

<form name="calculator">
  <table>
    <tr>
      <td colspan="4">
        <input type="text" name="display" disabled>
      td>
    tr>
    <tr>
      <td><input type="button" name="one" value="1" onclick="calculator.display.value += 1">td>
      <td><input type="button" name="two" value="2" onclick="calculator.display.value += 2">td>
      <td><input type="button" name="three" value="3" onclick="calculator.display.value += 3">td>
      <td><input type="button" class="operator" name="plus" value="+" onclick="calculator.display.value += '+'">td>
    tr>
    <tr>
      <td><input type="button" name="four" value="4" onclick="calculator.display.value += 4">td>
      <td><input type="button" name="five" value="5" onclick="calculator.display.value += 5">td>
      <td><input type="button" name="six" value="6" onclick="calculator.display.value += 6">td>
      <td><input type="button" class="operator" name="minus" value="-" onclick="calculator.display.value += '-'">td>
    tr>
    <tr>
      <td><input type="button" name="seven" value="7" onclick="calculator.display.value += 7">td>
      <td><input type="button" name="eight" value="8" onclick="calculator.display.value += 8">td>
      <td><input type="button" name="nine" value="9" onclick="calculator.display.value += 9">td>
      <td><input type="button" class="operator" name="times" value="x" onclick="calculator.display.value += '*'">td>
    tr>
    <tr>
      <td><input type="button" class="operator" id="clear" name="clear" value="C" onclick="calculator.display.value = ''">td>
      <td><input type="button" class="operator" name="zero" value="0" onclick="calculator.display.value += '0'">td>
      <td><input type="button" class="operator" name="doit" value="=" onclick="calculator.display.value = eval(calculator.display.value)">td>
      <td><input type="button" class="operator" name="div" value="/" onclick="calculator.display.value += '/'">td>
    tr>
  table>
form>

Tuy nhiên, nếu chỉ có HTML không thôi thì UX/UI thật "đáng thất vọng", các bạn có thể xem qua cô gái

<tr>
  <td><input type="button" name="one" value="1" onclick="calculator.display.value += 1">td>
  <td><input type="button" name="two" value="2" onclick="calculator.display.value += 2">td>
  <td><input type="button" name="three" value="3" onclick="calculator.display.value += 3">td>
  <td><input type="button" class="operator" name="plus" value="+" onclick="calculator.display.value += '+'">td>
tr>

<tr>
  <td><input type="button" name="one" value="1" onclick="calculator.display.value += 1">td>
  <td><input type="button" name="two" value="2" onclick="calculator.display.value += 2">td>
  <td><input type="button" name="three" value="3" onclick="calculator.display.value += 3">td>
  <td><input type="button" class="operator" name="plus" value="+" onclick="calculator.display.value += '+'">td>
tr>

Cho nên, hãy làm cho chiếc máy tính của chúng ta thân thiện với người dùng hơn bằng 1 đoạn CSS ngắn dưới đây nhé.

form {
  background: #ccc;
  margin: 0 auto;
  width: 300px;
  padding: 20px;
  border-radius: 5px;
}

form * {
  box-sizing: border-box;
}

form table {
  width: 100%;
  border-collapse: collapse;
}

form table tr, form table td {
  border: 1px solid #eee;
}

form table tr:first-child input {
  height: 50px;
  padding: 0 10px;
  font-weight: 700;
}

form table tr:not(:first-child) td {
  height: 70px;
}

form table tr:not(:first-child) td input {
  height: 100%;
}

form table input {
  width: 100%;
  display: block;
  border: 0;
  font-size: 16px;
}

form table input:focus {
  outline: none;
}

form table input:hover {
  background: #eee;
  transition: all .2s ease-in-out;
}

form table input.operator {
  font-weight: 700;
  color: #fff;
  background: #ffcc00;
}

Các bạn có thể xem qua demo của mình trên CodePen ở đây.

Cảm ơn các bạn đã theo dõi. Xin chào và hẹn gặp lại ở những bài viết tiếp theo.

Tham khảo: codeburst.io

All rights reserved