Sharecs.net
  • Trang chủ
  • Thủ Thuật
    • Thủ thuật máy tính
      • Windows
      • MacOS
      • Linux
    • Thủ thuật internet
    • Thủ thuật phần mềm
  • Phần Mềm
  • Lỗi máy tính
    • Lỗi internet
    • Lỗi windows
    • Lỗi phần mềm
  • Lập Trình
    • Lập Trình Java
    • Lập trình Python
    • Lập Trình React Native
    • Code Hay
  • Linh Tinh
    • PhotoShop
    • Tải Video Wallpaper
    • Kho Tools
      • Cân Bằng Phương Trình Hóa Học
      • Custom Css Scrollbar – Render Code
      • Tạo Kí Tự Đặc Biệt Online
      • Tạo Deep Link
    • Tài Liệu – Luận Văn – Báo Cáo
    • Kho Theme Website WordPress
No Result
View All Result
  • Trang chủ
  • Thủ Thuật
    • Thủ thuật máy tính
      • Windows
      • MacOS
      • Linux
    • Thủ thuật internet
    • Thủ thuật phần mềm
  • Phần Mềm
  • Lỗi máy tính
    • Lỗi internet
    • Lỗi windows
    • Lỗi phần mềm
  • Lập Trình
    • Lập Trình Java
    • Lập trình Python
    • Lập Trình React Native
    • Code Hay
  • Linh Tinh
    • PhotoShop
    • Tải Video Wallpaper
    • Kho Tools
      • Cân Bằng Phương Trình Hóa Học
      • Custom Css Scrollbar – Render Code
      • Tạo Kí Tự Đặc Biệt Online
      • Tạo Deep Link
    • Tài Liệu – Luận Văn – Báo Cáo
    • Kho Theme Website WordPress
No Result
View All Result
Sharecs.net
No Result
View All Result
Home Lập Trình Code Hay

Code calculator bằng Javascript Và Html

Nguyễn Tuấn by Nguyễn Tuấn
10/11/2021
0
0
SHARES
128
VIEWS

Code calculator thực hiện cộng trừ nhân chia trong javascript và html đơn giản và đẹp. Xem thêm các cách code calculator ( máy tính bỏ túi ) khác tại đây.

Source code calculator
<!DOCTYPE html>
<html lang="vi">
<head>
  <title>Sharecs.net</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="caculate.css">
</head>
<body>
<div class="container">
        <div class="calculator">
          
            <input type="text" placeholder="0" id="output-screen">


            <button onclick="Clear('')">Cl</button>
            <button onclick="del('')">DEL</button>
            <button onclick="display('%')">%</button>
            <button onclick="display('/')">/</button>
            <button onclick="display('7')">7</button>
            <button onclick="display('8')">8</button>
            <button onclick="display('9')">9</button>
            <button onclick="display('*')">*</button>
            <button onclick="display('4')">4</button>
            <button onclick="display('5')">5</button>
            <button onclick="display('6')">6</button>
            <button onclick="display('-')">-</button>
            <button onclick="display('1')">1</button>
            <button onclick="display('2')">2</button>
            <button onclick="display('3')">3</button>
            <button onclick="display('+')">+</button>
            <button onclick="display('0')">0</button>
            <button onclick="display('.')">.</button>
            <button onclick="calculate('')" class="equal">=</button>
 
        </div>
    </div>

    <script src="calcu.js"></script>
</html>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color:#ecf0f3;
    font-family: sans-serif;
    outline: none;
}
.container{
    height: 100vh;
    display: flex;
     justify-content: center;
    align-items: center; 
}
.calculator{
    background-color: #ecf0f3;
    padding: 15px;
    border-radius: 30px;
    box-shadow:inset 5px 5px 12px #ffffff,
                     5px 5px 12px rgba(0,0,0,.16);
     display: grid;
    grid-template-columns: repeat(4,70px); 
}
input{
     grid-column: span 4;
     height: 70px; 
     width: 260px;
     background-color: #ecf0f3;
     box-shadow: inset -5px -5px 12px #ffffff,
                 inset 5px 5px  12px rgba(0,0,0,.16);
    border: none;
    border-radius: 30px;
    color: rgb(70,70,70);
    font-size: 27px;
    font-weight: 700;
    text-align: end;
    margin: auto;
    margin-top: 40px;
    margin-bottom: 30px;
    padding: 20px;

}
button{
    height: 48px;
    width: 48px;
    background-color: #ecf0f3;
    box-shadow: -5px -5px 12px #ffffff,
    5px 5px 12px rgba(0,0,0,.16);
    border-radius: 50%;
    border: none;
    margin: 10px;
    font-size: 18px;
}
button:hover{
    background-color: rgb(241, 227, 227);
    cursor: pointer;
    transition: 0.5s;
}
.equal{
    width: 115px;
    border-radius: 40px;
    animation: col 3s infinite;
}


@keyframes col{
    0%{
        color: red;
    }
    33%{
        color: green;
    }
    100%{
        color: blue;
    }
}
let outputScreen = document.getElementById("output-screen");


// for output
function display(num){
    outputScreen.value += num;
}

// for operator

function calculate(){
    try{
        outputScreen.value = eval(outputScreen.value);
    }
    catch(err){
        alert("Invalid")
    }

}

// for clear and dellete
function Clear(){
    outputScreen.value = "";
}

function del(){
    outputScreen.value =outputScreen.value.slice(0,-1);
}
Demo calculator
 Source code calculator JavaScript
code calculator
Demo

Cảm ơn các bạn đã ghé thăm. Chúc các bạn thành công!

5/5 - (2 bình chọn)
Tags: code htmlcode javascriptSource code calculator
ShareSendTweetShare

Cùng chuyên mục

Javascript – Chuyển Tiếng Việt Có Dấu Sang Không Dấu

Javascript – Chuyển Tiếng Việt Có Dấu Sang Không Dấu

17/02/2022
33
Code Music Player Bằng JavaScript

Code Music Player Bằng JavaScript

18/11/2021
87
Code Calculator JavaFx Application Và JavaFx FXML Application

Code Calculator JavaFx Application Và JavaFx FXML Application

10/11/2021
165
Subscribe
Notify of
guest
guest
0 Comments
Inline Feedbacks
View all comments

Mạng Xã Hội

Bài Viết Nổi Bật

  • 500 Câu Trắc Nghiệm Mạng Máy Tính Phần 1 Có Đáp Án

    500 Câu Trắc Nghiệm Mạng Máy Tính Phần 1 Có Đáp Án

    0 shares
    Share 0 Tweet 0
  • Bài Tập Code Python Đơn Giản Có Lời Giải – Phần 1

    1 shares
    Share 0 Tweet 0
  • 500 Câu Trắc Nghiệm Mạng Máy Tính Phần 2 Có Đáp Án

    0 shares
    Share 0 Tweet 0
  • Download Video Wallpaper Agatsuma Zenitsu – Anime Kimetsu No Yaiba

    45 shares
    Share 0 Tweet 0
  • Trắc Nghiệm Mạng Máy Tính Phần 3 Có Đáp Án

    0 shares
    Share 0 Tweet 0

Phản hồi gần đây

  • Edward trong Canva Pro Full Crack Bản Quyền Mới Nhất
  • Nguyễn Tuấn trong Fake Giấy Tờ Xác Minh Doanh Nghiệp Trên Facebook
  • Nguyễn Tuấn trong Ứng Dụng Thuật Toán Hồi Quy Tuyến Tính Để Chẩn Đoán Xơ Vữa Động Mạch 2021
  • Anh Tuấn trong Ứng Dụng Thuật Toán Hồi Quy Tuyến Tính Để Chẩn Đoán Xơ Vữa Động Mạch 2021

Bạn bè & Đối tác

Ứng dụng đặt lịch khám nha khoa Vnnice

Liên hệ quảng cáo

Email: Sharecs.net@gmail.com

Hợp tác nội dung: Sharecs rất vinh dự được mời các bạn đóng góp những sản phẩm thiết kế, thủ thuật hay những chia sẻ hữu ích… để cùng chia sẻ rộng rãi tới mọi người!

Giới Thiệu

Sharecs.net là một website/blog cá nhân, chuyên chia sẻ những kiến thức xoay quanh công nghệ như máy tính, internet, phần mềm, lập trình,... Mình hi vọng, Sharecs sẽ mang lại những kiến thức mà bạn chưa từng được học trên ghế nhà trường!

  • Giới Thiệu & Liên Hệ
  • Chính Sách Bảo Mật

No Result
View All Result
  • Trang chủ
  • Thủ Thuật
    • Thủ thuật máy tính
      • Windows
      • MacOS
      • Linux
    • Thủ thuật internet
    • Thủ thuật phần mềm
  • Phần Mềm
  • Lỗi máy tính
    • Lỗi internet
    • Lỗi windows
    • Lỗi phần mềm
  • Lập Trình
    • Lập Trình Java
    • Lập trình Python
    • Lập Trình React Native
    • Code Hay
  • Linh Tinh
    • PhotoShop
    • Tải Video Wallpaper
    • Kho Tools
      • Cân Bằng Phương Trình Hóa Học
      • Custom Css Scrollbar – Render Code
      • Tạo Kí Tự Đặc Biệt Online
      • Tạo Deep Link
    • Tài Liệu – Luận Văn – Báo Cáo
    • Kho Theme Website WordPress