Hướng dẫn design a simple webpage for implementing a simple calculator using html, css javascript - thiết kế một trang web đơn giản để triển khai một máy tính đơn giản bằng html, css javascript

Mã CSS

Mở tệp Styles.css và dán mã CSS sau đây cho máy tính:styles.css file and paste the following CSS code for the calculator:

@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
.calculator {
    padding: 10px;
    border-radius: 1em;
    height: 380px;
    width: 400px;
    margin: auto;
    background-color: #191b28;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}
.display-box {
    font-family: 'Orbitron', sans-serif;
    background-color: #dcdbe1;
    border: solid black 0.5px;
    color: black;
    border-radius: 5px;
    width: 100%;
    height: 65%;
}
#btn {
    background-color: #fb0066;
}
input[type=button] {
    font-family: 'Orbitron', sans-serif;
    background-color: #64278f;
    color: white;
    border: solid black 0.5px;
    width: 100%;
    border-radius: 5px;
    height: 70%;
    outline: none;
}
input:active[type=button] {
    background: #e5e5e5;
    -webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
    -moz-box-shadow: inset 0px 0px 5px #c1c1c1;
    box-shadow: inset 0px 0px 5px #c1c1c1;
}

Các CSS trên tạo kiểu máy tính. Bộ chọn .Class trong CSS chọn các phần tử với một thuộc tính lớp cụ thể. Bộ chọn lớp .Calculator và .Display-Box Kiểu cấu trúc bảng và màn hình hiển thị của máy tính tương ứng. @Import Nhập các gia đình phông chữ Orbitron từ phông chữ Google..class selector in CSS selects elements with a specific class attribute. The .calculator and .display-box class selectors style the table structure and the display screen of the calculator respectively. @import imports the Orbitron font-family from Google fonts.

Mã JavaScript

Mở tệp script.js và thêm chức năng vào máy tính đơn giản bằng mã JavaScript sau:script.js file and add functionality to the simple calculator using the following JavaScript code:

// This function clear all the values
function clearScreen() {
    document.getElementById("result").value = "";
}
 // This function display values
function display(value) {
    document.getElementById("result").value += value;
}
 // This function evaluates the expression and returns result
function calculate() {
    var p = document.getElementById("result").value;
    var q = eval(p);
    document.getElementById("result").value = q;
}

Hiểu mã JavaScript

Các hàm ClearScreen (), Display () và Tính toán () thêm chức năng cho máy tính. clearScreen(), display(), and calculate() functions add functionality to the Calculator.

Xóa các giá trị

Hàm ClearScreen () truy cập DOM bằng ID của kết quả và xóa giá trị của nó bằng cách gán cho nó một chuỗi trống. Bạn có thể sử dụng bộ chọn Dom để nhắm mục tiêu các thành phần khác nhau của một trang. clearScreen() function access the DOM using the id of the result and clear its value by assigning it an empty string. You can use DOM selectors to target various components of a page.

function clearScreen() {
    document.getElementById("result").value = "";
}

Hiển thị các giá trị

Hàm hiển thị () truy cập vào DOM bằng ID của kết quả và nối giá trị của nút nhấp vào kết quả.display() function accesses the DOM using the id of the result and appends the value of the clicked button to the result.

function display(value) {
    document.getElementById("result").value += value;
}

Đánh giá biểu thức

Hàm tính toán () truy cập DOM bằng ID của kết quả và đánh giá biểu thức bằng hàm eval (). Giá trị được đánh giá của biểu thức một lần nữa được gán cho kết quả. calculate() function accesses the DOM using the id of the result and evaluates the expression using the eval() function. The evaluated value of the expression is again assigned to the result.

function calculate() {
    var p = document.getElementById("result").value;
    var q = eval(p);
    document.getElementById("result").value = q;
}

Phát triển các dự án lập trình thú vị

Bạn có thể cải thiện kỹ năng mã hóa của mình bằng cách phát triển các dự án, cho dù bạn là người mới bắt đầu hay bạn sẽ quay lại mã hóa sau một thời gian nghỉ. Tạo các ứng dụng hoạt động đầy đủ, thậm chí các ứng dụng đơn giản, có thể tăng cường sự tự tin của bạn.

Bạn có thể thử nhiều dự án đơn giản từ các trò chơi (cờ vua, tic-tac-toe, kéo giấy đá) đến các tiện ích đơn giản (danh sách việc cần làm, chuyển đổi trọng lượng, đồng hồ đếm ngược).

Nhận được bàn tay của bạn bẩn với các dự án này và trở thành một nhà phát triển tốt hơn.

Làm thế nào bạn sẽ tạo một máy tính đơn giản bằng cách sử dụng HTML CSS và JavaScript?

Chúng ta có thể tạo máy tính bằng HTML và CSS không?

Làm thế nào một máy tính khoa học sử dụng HTML?