功能实现:实现二进制、八进制、十六进制、十进制的一个转换
功能界面
代码实现(完整版)
wxml文件
<view class="container">
<view class="title">进制转换器</view>
<view class="form">
<view class="item">
<view>二进制:</view>
<input type="number" bindinput="binaryInput" value="{
{binary}}" />
</view>
<view class="item">
<view>八进制:</view>
<input type="number" bindinput="octalInput" value="{
{octal}}" />
</view>
<view class="item">
<view>十进制:</view>
<input type="number" bindinput="decimalInput" value="{
{decimal}}" />
</view>
<view class="item">
<view>十六进制:</view>
<input type="text" bindinput="hexInput" value="{
{hex}}" />
</view>
</view>
</view>
xcss文件
.container {
margin: 20px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
background-color: #fff;
}
.title {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
}
.form {
display: flex;
flex-direction: column;
}
.item {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.item view {
font-size: 16px;
font-weight: bold;
margin-right: 10px;
width: 40%;
}
.item input {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
js文件
Page({
data: {
binary: '',
octal: '',
decimal: '',
hex: ''
},
binaryInput: function (e) {
var decimal = parseInt(e.detail.value, 2);
this.setData({
binary: e.detail.value,
octal: decimal.toString(8),
decimal: decimal.toString(),
hex: decimal.toString(16).toUpperCase()
});
},
octalInput: function (e) {
var decimal = parseInt(e.detail.value, 8);
this.setData({
binary: decimal.toString(2),
octal: e.detail.value,
decimal: decimal.toString(),
hex: decimal.toString(16).toUpperCase()
});
},
decimalInput: function (e) {
var decimal = parseInt(e.detail.value);
this.setData({
binary: decimal.toString(2),
octal: decimal.toString(8),
decimal: e.detail.value,
hex: decimal.toString(16).toUpperCase()
});
},
hexInput: function (e) {
var decimal = parseInt(e.detail.value, 16);
this.setData({
binary: decimal.toString(2),
octal: decimal.toString(8),
decimal: decimal.toString(),
hex: e.detail.value.toUpperCase()
});
}
})