HTML - CSS - JS25 . 07 . 2021Lượt xem: 1091

Tạo bảng tính đơn giản với HTML, CSS và JS

bảng tính html — Bảng tính bằng HTML, CSS và JS

Trong bài này, mình sẽ hướng dẫn các bạn làm một bảng tính đơn giản với các chức năng cơ bản như nhân/chia/cộng/trừ, bằng cách sử HTML, CSS và JS

Bạn hãy tạo 2 file: index.html và style.css và thực hiện như sau:

1. HTML và JS

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Calculator</title>
      <link rel="stylesheet" href="css/style.css">
      <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
   </head>
   <body>
      <div class="center">
         <form name="forms">
            <input type="text" id="display" name="display" disabled>
            <div class="buttons">
               <input type="button" id="seven" value="7">
               <input type="button" id="eight" value="8">
               <input type="button" id="nine" value="9">
               <input type="button" id="multi" value="*"><br>
               <input type="button" id="four" value="4">
               <input type="button" id="five" value="5">
               <input type="button" id="six" value="6">
               <input type="button" id="divide" value="/"><br>
               <input type="button" id="one" value="1">
               <input type="button" id="two" value="2">
               <input type="button" id="three" value="3">
               <input type="button" id="add" value="+"><br>
               <input type="button" id="zero" value="0">
               <input type="button" id="dot" value=".">
               <input type="button" id="subs" value="-">
               <input type="button" id="clear" value="C"><br>
               <input type="button" id="equal" value="=">
            </div>
         </form>
      </div>
      <script>
         $(document).ready(function(){
           $('#one').click(function(){
             document.forms.display.value += 1;
           });
           $('#two').click(function(){
             document.forms.display.value += 2;
           });
           $('#three').click(function(){
             document.forms.display.value += 3;
           });
           $('#four').click(function(){
             document.forms.display.value += 4;
           });
           $('#five').click(function(){
             document.forms.display.value += 5;
           });
           $('#six').click(function(){
             document.forms.display.value += 6;
           });
           $('#seven').click(function(){
             document.forms.display.value += 7;
           });
           $('#eight').click(function(){
             document.forms.display.value += 8;
           });
           $('#nine').click(function(){
             document.forms.display.value += 9;
           });
           $('#zero').click(function(){
             document.forms.display.value += 0;
           });
           $('#add').click(function(){
             document.forms.display.value += '+';
           });
           $('#subs').click(function(){
             document.forms.display.value += '-';
           });
           $('#multi').click(function(){
             document.forms.display.value += '*';
           });
           $('#divide').click(function(){
             document.forms.display.value += '/';
           });
           $('#dot').click(function(){
             document.forms.display.value += '.';
           });
           $('#equal').click(function(){
             if (display.value == "") {
               alert("Please enter any numbers to calculate!");
             }else{
               document.forms.display.value =
               eval(document.forms.display.value);
             }
           });
           $('#clear').click(function(){
             document.forms.display.value = "";
           });
         })
      </script>
   </body>
</html>

Chức năng đã xong, Bạn có thể tính toán được rồi.

Bây giờ hãy css cho đẹp, cho giống bảng tính thực tế hơn

2. CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #BBDEFB; }

.center {
  background: #000;
  max-width: 400px;
  margin: auto;
  padding: 10px;
  border-radius: 10px; }

#display {
  color: #fff;
  width: 100%;
  padding: 10px 15px;
  margin-bottom: 15px;
  text-align: right;
  background: #2962FF; }

input[type="button"] {
  width: 67px;
  height: 50px;
  margin-bottom: 5px; }
  input[type="button"]:hover {
    background: #2962FF; }

input {
  border: none;
  font-size: 20px; }
  input:hover {
    cursor: pointer;
    color: #fff; }

#equal {
  width: 100%; }

#clear {
  color: #fff;
  background: #D50000; }

Như vậy là bạn đã tạo được bảng tính với các phép toán đơn giản.

Xem thêm: