WeChat アプレット開発小規模プロジェクト: 16 進コンバータ

関数実装：2進数、8進数、16進数、10進数の変換を実現

機能インターフェース

コードの実装 (完全版)

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