微信小程序开发小项目:进制转换器

功能实现：实现二进制、八进制、十六进制、十进制的一个转换

功能界面

代码实现（完整版）

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()
      });
    }
  })