Xin chào các bạn, hôm nay mình sẽ hướng dẫn các bạn tạo Bộ chuyển đổi nhị phân sang thập phân bằng Html CSS & JavaScript
Bộ chuyển đổi bin2decimal là gì?
Đây là công cụ chuyển đổi số nhị phân [010101] sang số thập phân
Bảng chuyển đổi nhị phân sang thập phân
Số nhị phânSố thập phân10101211011022101112311000241100125Cách tạo bộ chuyển đổi Bin2Dec từng bước
Bước 1 — Tạo một dự án mới
Điều đầu tiên chúng ta sẽ làm là tạo một thư mục chứa tất cả các tệp tạo nên dự án. Tạo một thư mục trống trên thiết bị của bạn và đặt tên là “như bạn muốn”
Mở Visual Studio Code hoặc bất kỳ trình soạn thảo Văn bản nào và tạo tệp [chỉ mục. html, phong cách. css, chính. js] bên trong thư mục. để tạo Công cụ chuyển đổi B2D. Trong bước tiếp theo, bạn sẽ bắt đầu tạo cấu trúc của trang web
Bước 2 — Thiết lập cấu trúc cơ bản
Trong bước này, chúng tôi sẽ thêm mã HTML để tạo cấu trúc cơ bản của dự án
How to Create Binary to Decimal Converter Using JavaScript
Đây là cấu trúc cơ sở của hầu hết các trang web sử dụng HTML
Thêm đoạn mã sau vào trong thẻ
5Binary to Decimal Converter
Binary
Decimal
ConvertYou should enter a binary number composed by 0 and 1!
Binary to Decimal Converter
Binary
Decimal
ConvertYou should enter a binary number composed by 0 and 1!
Bước 3 - Thêm kiểu cho các lớp
Trong bước này, chúng ta sẽ thêm các kiểu vào lớp phần Kiểu bên trong. tập tin css
@import url['//fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap']; * { margin: 0; padding: 0; border: none; outline: none; box-sizing: border-box; font-family: 'Poppins', sans-serif; -webkit-tap-highlight-color: transparent; } html,body { height: 100%; } body { display: flex; align-items: center; justify-content: center; background: #f1f1f1; } .binary_to_decimal h2 { margin-bottom: 20px; font-size: 30px; color: #4766ff; } .binary_to_decimal { width: 100%; max-width: 500px; padding: 20px; background: #fff; border-radius: 0.2rem; } .field { margin-bottom: 15px; } .field label { position: relative; } .field label input { font-size: 1rem; color: #565656; background: transparent; padding: 1rem 1.2rem; min-width: 100%; border: 2px solid #565656; border-radius: 0.2rem; } .field label input:focus { border-color: #4766ff; } .field label p { color: #4766ff; font-size: 1rem; user-select: none; position: absolute; top: 50%; transform: translateY[-50%]; margin-left: 0.8rem; padding: 0 0.4rem; background: #fff; pointer-events: none; transition: top 0.2s, font-size 0.2s, color 0.2s; } .field label input:focus + p, .field label input:not[:placeholder-shown] + p { top: -20px; font-size: 0.9rem; color: #4766ff; } .field label input:not[:focus] + p { color: #565656; } button#btn { padding: 10px 20px; font-size: 20px; font-weight: 600; color: #fff; background: #4766ff; width: 100%; cursor: pointer; border-radius: 0.2rem; } div#error-msg { color: red; display: none; }
Bước 4 — Thêm một số dòng mã JavaScript
Trong bước này, chúng tôi sẽ thêm một số mã JavaScript để tạo công cụ chuyển đổi nhị phân sang thập phân
const input = document.querySelector["#input"]; const output = document.querySelector["#output"]; const btn = document.querySelector["#btn"]; const error = document.querySelector["#error-msg"]; function Bin2Dec[] { const regEx = /^[0-1]+$/; if[input.value.match[regEx]] { const binArr = input.value.split[''].reverse[]; let decNo = 0; binArr.forEach[[item, index] => item === '1' ? decNo += Math.pow[2, index] : void 0]; output.value = decNo.toString[]; output.style.cursor = 'text'; }else { error.style.display = 'block'; } } btn.addEventListener['click', [] => { error.style.display = 'none'; Bin2Dec[]; }]
Có một cách khác để tạo Bộ chuyển đổi nhị phân sang thập phân khá đơn giản và phụ thuộc nhiều hơn vào HTML5
By LUKE知る
Bước 1. Thêm một
6 vào đầu vào, để nó chỉ cho phépBinary to Decimal Converter
Binary
Decimal
ConvertYou should enter a binary number composed by 0 and 1!
0 vàBinary to Decimal Converter
Binary
Decimal
ConvertYou should enter a binary number composed by 0 and 1!
1 và biến nó thànhBinary to Decimal Converter
Binary
Decimal
ConvertYou should enter a binary number composed by 0 and 1!
2. Bạn cũng có thể cần thêm ________ 13 để nó có mô tả hay khi mẫu không khớpBinary to Decimal Converter
Binary
Decimal
ConvertYou should enter a binary number composed by 0 and 1!
How to Create Bin2Decimal Converter Using JavaScriptBinary 2 Decimal Converter
Binary
Decimal
ConvertYou should enter a binary number composed by 0 and 1!
Bước 2. Nghe sự kiện
4 củaBinary to Decimal Converter
Binary
Decimal
ConvertYou should enter a binary number composed by 0 and 1!
5 thay vì nghe sự kiệnBinary to Decimal Converter
Binary
Decimal
ConvertYou should enter a binary number composed by 0 and 1!
6 kể cả trongBinary to Decimal Converter
Binary
Decimal
ConvertYou should enter a binary number composed by 0 and 1!
7 [vì chúng ta đang làm cái này nên nhớ loại button cần phải submit], không cần validate vì cái đó đã được input làm rồi nênBinary to Decimal Converter
Binary
Decimal
ConvertYou should enter a binary number composed by 0 and 1!
4Binary to Decimal Converter
Binary
Decimal
ConvertYou should enter a binary number composed by 0 and 1!
Đối với Kiểu, bạn cũng có thể sử dụng kiểu tùy chỉnh của mình hoặc sử dụng mã CSS của tôi
Công cụ chuyển đổi nhị phân sang thập phân Kết quả
Nếu bạn muốn mã nguồn, bạn có thể tải xuống từ nút bên dưới
Tải xuống mã
Bộ sưu tập Bin2Dec Converter tốt nhất
#1 Trình chuyển đổi Bin2thập phân đơn giản
Trình chuyển đổi thập phân Bin2 đơn giản sử dụng JavaScript, được phát triển bởi Julia Shikanova. Hơn nữa, bạn có thể tùy chỉnh nó theo mong muốn và nhu cầu của bạn
Tác giả. Julia ShikanovaĐược tạo trên. Ngày 31 tháng 5 năm 2019Làm bằng. HTML, CSS & JSDemo Link. Mã nguồn / DemoTags. Bộ chuyển đổi thập phân Bin2 đơn giản#2 Trình chuyển đổi nhị phân sang thập phân JavaScript
Trình chuyển đổi JavaScript bin2dec, được phát triển bởi Yegor Kravchenko. Hơn nữa, bạn có thể tùy chỉnh nó theo mong muốn và nhu cầu của bạn
Tác giả. Yegor KravchenkoĐược tạo trên. Ngày 5 tháng 7 năm 2020Làm bằng. Liên kết demo HTML, CSS[SCSS] và JS. Mã nguồn / DemoTags. JavaScript bin2dec#3 Ứng dụng chuyển đổi nhị phân sang thập phân
Ứng dụng chuyển đổi Bin2Dec do Bartosz phát triển. Hơn nữa, bạn có thể tùy chỉnh nó theo mong muốn và nhu cầu của bạn
Tác giả. Bartosz Tạo trên. Ngày 14 tháng 8 năm 2020Làm bằng. HTML, CSS & JSDemo Link. Mã nguồn / DemoTags. Bộ chuyển đổi Bin2Dec#4 Trình chuyển đổi Bin2Dec tuyệt vời
Trình chuyển đổi Bin2Dec tuyệt vời, được phát triển bởi Sara Cavalcante. Hơn nữa, bạn có thể tùy chỉnh nó theo mong muốn và nhu cầu của bạn
Tác giả. Sara CavalcanteĐược tạo trên. Ngày 6 tháng 10 năm 2021Làm bằng. HTML, CSS & JSDemo Link. Mã nguồn / DemoTags. Trình chuyển đổi Bin2Dec tuyệt vời#5 Trình hiển thị nhị phân sang số thập phân
Trình hiển thị nhị phân sang số thập phân do JR Shampang phát triển. Hơn nữa, bạn có thể tùy chỉnh nó theo mong muốn và nhu cầu của bạn