Ở đây, bạn phải sử dụng thẻ đầu vào với nút loại và sự kiện nhấp chuột. Hộp văn bản để hiển thị các chữ số và giá trị đầu ra được cung cấp id “kết quả”. Id này được sử dụng trong các hàm như clearScreen(), Display() và Solve(). Các chức năng này thực hiện đúng như tên gọi của chúng. Nó cung cấp định nghĩa chức năng trong. tập tin js.  

Nếu không có kiểu dáng, đầu ra của đoạn mã trên sẽ trông như thế này.  

khóa học miễn phí. JavaScript cho người mới bắt đầu

Tìm hiểu kiến ​​thức cơ bản về JavaScript Đăng ký ngay

Thêm kiểu dáng trong. tập tin css

Để làm đẹp những gì bạn nhìn thấy trên màn hình, kiểu dáng là rất quan trọng. Đây là kiểu dáng bạn có thể thêm vào ứng dụng của mình. Nếu bạn thích một cái nhìn mới mẻ, bạn có thể sửa đổi nó cho phù hợp.  

thùng đựng hàng {

biên giới. 1px rắn #cccccc;

bóng hộp. 10px 10px 30px 0px rgba(0,0,0,0. 75);

bán kính đường viền. 20px;

Chức vụ. tuyệt đối;

đứng đầu. 55%;

bên trái. 50%;

biến đổi. dịch(-50%, -50%);

bề rộng. 450px;

chiều cao. 400px;

}

phím {

trưng bày. lưới;

lưới-mẫu-cột. lặp lại (4, 1fr);

khoảng cách lưới. 10px;

đệm. 10px;

lề. Tự động;

}

cái nút {

chiều cao. 60px;

đệm. 5px;

màu nền. #ffff;

bán kính đường viền. 3px;

biên giới. 1px cố định #c4c4c4;

màu nền. trong suốt;

cỡ chữ. 2rem;

màu. #333;

hình nền. độ dốc tuyến tính (đến dưới cùng, trong suốt, trong suốt 50%, rgba (0,0,0,. 04));

bóng hộp. hình nhỏ 0 0 0 1px rgba(255,255,255,. 05), chèn 0 1px 0 0 rgba(255,255,255,. 45), chèn 0 -1px 0 0 rgba(255,255,255,. 15), 0 1px 0 0 rgba(255,255,255,. 15);

bóng văn bản. 0 1px rgba(255,255,255,. 4);

}

cái nút. bay lượn {

màu nền. #eaeaea;

}

nhà điều hành {

màu. #ffff;

màu nền. #eebb24;

}

thông thoáng {

màu nền. #f0595f;

màu viền. #b0353a;

màu. #ffff;

bề rộng. 80px;

chiều cao. 30px;

}

thông thoáng. bay lượn {

màu nền. #f17377;

}

dấu bằng {

màu nền. #25a8e0;

màu viền. #25a8e0;

màu. #ffff;

}

dấu bằng. bay lượn {

màu nền. #4e9ed4;

}

màn hình{

màu nền. rgb(171, 219, 231);

biện minh cho nội dung. bên trái;

màu. màu đen;

cỡ chữ. trung bình;

bề rộng. 50%;

chiều cao. 30%;

con trỏ. vỡ nợ;

đệm. 10px;

đệm-trái. 40%;

lề. Tự động;

lề dưới. 10px;

}

Sau khi thêm kiểu dáng, ứng dụng của bạn sẽ trông như thế này.  

Đào tạo chứng chỉ Java MIỄN PHÍ

Tìm hiểu từ A-Z về Java hơn bao giờ hết Đăng ký ngay

Bàn giao thông tin đầu vào do người dùng cung cấp

Tất cả đầu vào do người dùng cung cấp phải được chấp nhận và xử lý để cung cấp đầu ra cần thiết. Như đã đề cập, bạn đang thực hiện ba hành động khác nhau, hiển thị giá trị, giải biểu thức và xóa hộp văn bản. Đây là mã được viết trong calc. tập tin js

chức năng hiển thị ()

chức năng hiển thị (val) {

tài liệu. getElementById('kết quả'). giá trị += giá trị

giá trị trả lại

}

Hàm này chấp nhận các giá trị được nhấp làm tham số và trả về giá trị tương tự cho hộp văn bản. Giá trị có thể là một chữ số, dấu thập phân hoặc toán tử ngoại trừ '='.  

hàm giải quyết ()

hàm giải(){

đặt x = tài liệu. getElementById('kết quả'). giá trị

đặt y = eval(x);

tài liệu. getElementById('kết quả'). giá trị = y

trả lại y

}

Phương thức giải quyết () được gọi khi người dùng nhấp vào toán tử '='. Biến x chấp nhận biểu thức toán học do người dùng cung cấp. Biểu thức này được đánh giá và lưu trữ trong biến y. Kết quả được hiển thị trong hộp văn bản.  

ClearScreen()

Chức năng này được gọi khi người dùng nhấp vào nút C hoặc nút xóa.  

hàm clearScreen(){

tài liệu. getElementById('kết quả'). giá trị = ''

}

Giá trị của kết quả được đặt thành một chuỗi rỗng.  

Bây giờ bạn có thể mở trình duyệt của mình để xem kết quả cuối cùng.  

Và Voila. Bạn đã tạo thành công một ứng dụng máy tính bằng JavaScript.  

Có được nền tảng vững chắc về Java, ngôn ngữ lập trình được sử dụng phổ biến nhất trong phát triển phần mềm với Khóa đào tạo cấp chứng chỉ Java

Suy nghĩ cuối cùng

Chúng tôi hy vọng bạn thấy bài viết này về Máy tính trong JavaScript hữu ích. Nếu bạn muốn học JavaScript và tạo dựng sự nghiệp với tư cách là nhà phát triển giao diện người dùng, thì bạn rất nên đạt được điều đó

Khóa đào tạo chứng chỉ JavaScript của Simplilearn giúp nắm vững ngôn ngữ lập trình JavaScript trong một chương trình đào tạo toàn diện bao gồm các nguyên tắc cơ bản hoàn chỉnh về JavaScript, jQuery, Ajax, v.v. Bạn cũng sẽ có cơ hội áp dụng các kỹ năng của mình bằng cách xây dựng ứng dụng trò chuyện thời gian thực

Nếu bạn có bất kỳ câu hỏi hoặc phản hồi nào, hãy để lại bình luận trong phần bình luận của bài viết. Các chuyên gia của chúng tôi sẽ liên hệ lại với bạn càng sớm càng tốt.  

Tìm Chương trình đào tạo trực tuyến dành cho nhà phát triển Java Full Stack của chúng tôi tại các thành phố hàng đầu

NameDatePlaceFull Stack Nhóm nhà phát triển Java bắt đầu vào ngày 8 tháng 2 năm 2023,
Đợt cuối tuầnChi tiết CityView của bạnNhóm nhà phát triển Java đầy đủ ngăn xếp bắt đầu vào ngày 15 tháng 2 năm 2023,
Đợt cuối tuầnChi tiết CityView của bạnNhóm nhà phát triển Java đầy đủ ngăn xếp bắt đầu vào ngày 22 tháng 2 năm 2023,
Lô hàng cuối tuầnChi tiết CityView của bạn

Thông tin về các Tác giả

Chinmayee Deshpande

Chinmayee là một nhà phân tích nghiên cứu và một nhà văn đam mê. Là một người đam mê công nghệ, kiến ​​thức chuyên sâu về chủ đề này giúp cô phát triển nội dung có cấu trúc và phân phối phù hợp

Làm cách nào để tạo máy tính trong JavaScript bằng chức năng?

Làm cách nào để tạo máy tính trong HTML bằng JavaScript?

Làm cách nào để tạo máy tính khoa học trong JavaScript?