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

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

功能界面

在这里插入图片描述

代码实现(完整版)

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

猜你喜欢

转载自blog.csdn.net/weixin_52312427/article/details/133392336