Chương trình nhị phân sang thập phân trong javascript
|
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 Show
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ânSố nhị phânSố thập phân10101211011022101112311000241100125Cách tạo bộ chuyển đổi Bin2Dec từng bướcBướ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ảnTrong 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
Đâ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ẻ 5
Bước 3 - Thêm kiểu cho các lớpTrong 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('https://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ã JavaScriptTrong 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ép 0 và 1 và biến nó thành 2. Bạn cũng có thể cần thêm ________ 13 để nó có mô tả hay khi mẫu không khớp
Bước 2. Nghe sự kiện 4 của 5 thay vì nghe sự kiện 6 kể cả trong 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ên 4 Đố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ướiTả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ảnTrì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 JavaScriptTrì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ờiTrì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ânTrì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 |
