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

程序员彭彭

于 2023-09-28 20:50:15 发布

阅读量276

点赞数

分类专栏：微信小程序开发文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/weixin_52312427/article/details/133392336

版权

微信小程序开发专栏收录该内容

8 篇文章 1 订阅

订阅专栏

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

功能界面

在这里插入图片描述

代码实现（完整版）

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