計算機機能を実装するミニプログラム

計算機機能を実装するミニプログラム

この記事の例では、計算機機能を実装するためのミニプログラムの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

携帯電話の電卓をシミュレートし、入力して計算します

このページはお支払い金額を計算するためのページです。以下の内容が不要であれば削除していただいて構いません。

wxml

<view class="calculate-box">
  <view class="calculate-txt">{{express}}</view>
  <view class="result-num">={{result}}</view>
</ビュー>
<view class="fixation-box">
  <view class="calculator-box">
    <view class="calculator-line">
      <view data-con='c' class='boxtn btn1 clear' catchtap="clickKeyBoard">AC</view>
      <view data-con='←' class='boxtn btn1' catchtap="clickKeyBoard">
        <image src="../../../images/clear-icon.png" class="clear-icon"></image>
      </ビュー>
      <view data-con='÷100' class='boxtn btn1 percent' catchtap="clickKeyBoard">%</view>
      <view data-con='÷' class='boxtn num' catchtap="clickKeyBoard">÷</view>
    </ビュー>
    <view class="calculator-line">
      <view data-con='7' class='boxtn btn1 num' catchtap="clickKeyBoard">7</view>
      <view data-con='8' class='boxtn btn1 num' catchtap="clickKeyBoard">8</view>
      <view data-con='9' class='boxtn btn1 num' catchtap="clickKeyBoard">9</view>
      <view data-con='×' class='boxtn num' catchtap="clickKeyBoard">×</view>
    </ビュー>
    <view class="calculator-line">
      <view data-con='4' class='boxtn btn1 num' catchtap="clickKeyBoard">4</view>
      <view data-con='5' class='boxtn btn1 num' catchtap="clickKeyBoard">5</view>
      <view data-con='6' class='boxtn btn1 num' catchtap="clickKeyBoard">6</view>
      <view data-con='-' class='boxtn num' catchtap="clickKeyBoard">-</view>
    </ビュー>
    <view class="calculator-line">
      <view data-con='1' class='boxtn btn1 num' catchtap="clickKeyBoard">1</view>
      <view data-con='2' class='boxtn btn1 num' catchtap="clickKeyBoard">2</view>
      <view data-con='3' class='boxtn btn1 num' catchtap="clickKeyBoard">3</view>
      <view data-con='+' class='boxtn num' catchtap="clickKeyBoard">+</view>
    </ビュー>
    <view class="calculator-line">
      <view data-con='0' class='boxtn btn2 num' catchtap="clickKeyBoard">0</view>
      <view data-con='.' class='boxtn btn1 num' catchtap="clickKeyBoard">.</view>
      <view data-con='=' class='boxtn equal' catchtap="result">=</view>
    </ビュー>
  </ビュー>
  <view class="bottom-handle">
    <!-- <view class="sweep-code-verification" bindtap="sweepCodeVerification">
      <image src="../../../images/sweep-code-verification.png"></image>
      <text>コードをスキャンして確認します</text>
    </view> -->
    <view style="flex: 1;font-size: 34rpx;" class="artificial-collection" bindtap="artificial_collection">
      <!--<image src="../../../images/artificial-collection.png"></image> -->
      <text>手動収集</text>
    </ビュー>
    <view class="payment-code" bindtap="qrcode_collection">支払いコードコレクション</view>
  </ビュー>
</ビュー>

js

データ： {
    express: '', //1行目の式 result: '0', //2行目の結果 calc2: {
      str: '', //一時文字列 strList: [], //中置式ストレージ（先入先出キュー）
      strListP: [], // サフィックス式 (キュー先入先出)
      list: [], //演算子のスタックを格納します（先入れ先出し）
      count: [], //式スタックを計算する（先入れ先出し）
      flag: 0 // 文字列の最後の桁が演算子の桁であるかどうかを示します},
    isqr: 偽、
  },
   //このイベントをすべてのテキストまたはビューにバインドし、対応するカスタム属性値を追加します clickKeyBoard(e) {
    that = this とする;
    let input = e.currentTarget.dataset.con //各入力の内容を取得します if (input == "c") {
      that.handleClear();
    } それ以外の場合 (入力 == "←") {
      that.handleDelete();
    } それ以外 {
      //処理文字列を呼び出します that.handleInfo(input);

    }


  },

  //ローカルユーザーの入力操作を処理する handleInfo(input) {
    if (this.data.calc2.str.length == 0) { //最初にクリックif (input == "-" || this.checkShuZi(input)) { //マイナス記号の場合this.addStr(input);
      } それ以外 {
        戻る;
      }
    } それ以外 {
      if (this.data.calc2.flag == 1) { //最後の桁が記号であることを示します if (this.checkFuHao(input)) {
          this.data.calc2.str = this.data.calc2.str.substring(0, this.data.calc2.str.length - 1); //最後のシンボルを削除し、最新のシンボルを追加します this.addStr(input);
        } それ以外 {
          this.addStr(入力);
        }
        コンソールログ();
      } それ以外 {
        this.addStr(入力);
        この結果();
      }
    }
    この結果();
  },

  //顧客が等号をクリックする result() {
    //等号をクリックするたびに、リストが空になります。this.data.calc2.strList.length = 0;
    this.data.calc2.strListP.length = 0;
    this.data.calc2.list.length = 0;
    this.data.calc2.count.length = 0;

    // 式をインフィックス式キューに変換します。this.expressToStrList(this.data.express);
    console.log(this.data.calc2.strList);

    // インフィックス式セットを一時変数に割り当てます。let tempList = this.data.calc2.strList;
    this.expressToStrListP(tempList);
    console.log(this.data.calc2.strListP);

    //最終計算 let tempP = this.data.calc2.strListP
    (let m in tempP) {
      if (this.checkFuHao2(tempP[m])) { //ドットなしのシンボル方式判定 let m1 = this.data.calc2.count[0]; //最初のデータを取り出す this.data.calc2.count.shift(); //取り出した後データを削除する let m2 = this.data.calc2.count[0];
        this.data.calc2.count.shift();
        // console.log('m1 は ' + m1 です);
        // console.log('m2 is' + m2);
        // console.log('演算子は ' + tempP[m] です);
        // console.log('計算結果は次のとおりです: ' + this.countDetail(m2, tempP[m], m1));
        this.data.calc2.count.unshift(this.countDetail(m2, tempP[m], m1)); // 計算結果をcountに格納します} else {
        this.data.calc2.count.unshift(tempP[m]) // 数字をプッシュします}
    }
    console.log('最終計算結果は' + parseFloat(this.data.calc2.count[0]).toFixed(2));
    this.setData({
      結果: this.data.calc2.count[0]
    });
  },

  //実際の計算 countDetail(e1, e2, e3) {
    結果を 0.0 とします。
    コンソールログ(e1);
    コンソールログ(e2);
    コンソールログ(e3);
    試す {
      (e2 == "×") の場合 {
        (typeof(e1) != "未定義") の場合 {
          結果 = parseFloat(e1) * parseFloat(e3);
        } それ以外 {
          結果 = parseFloat(e3);
        }
      } そうでない場合 (e2 == "÷") {
        (typeof(e1) != "未定義") の場合 {
          結果 = parseFloat(e1) / parseFloat(e3);
        } それ以外 {
          結果 = parseFloat(e3);
        }
      } そうでない場合 (e2 == "%") {
        (typeof(e1) != "未定義") の場合 {
          結果 = parseFloat(e1) / parseFloat(e3);
        } それ以外 {
          結果 = parseFloat(e3);
        }
      } そうでない場合 (e2 == "+") {
        (typeof(e1) != "未定義") の場合 {
          結果 = parseFloat(e1) + parseFloat(e3);
        } それ以外 {
          結果 = parseFloat(e3);
        }
      } それ以外 {
        if (typeof (e1) != "未定義") {
          結果 = parseFloat(e1) - parseFloat(e3);
        } それ以外 {
          結果 = parseFloat(e3);
        }
      }
    } キャッチ（エラー）{

    }
    結果を返します。
  },

  //中置式セットを後置式セットに変換する expressToStrListP(tempList) {
    for (let item in tempList) {
      if (this.checkFuHao2(tempList[item])) { //ピリオドなしのシンボル法判定 if (this.data.calc2.list.length == 0) {
          this.data.calc2.list.unshift(tempList[item]); // 加算演算子を直接追加します} else {
          if (this.checkFuHaoDX(this.data.calc2.list[0], tempList[item])) {
            (this.data.calc2.list 内の x を) {
              this.data.calc2.strListP.push(this.data.calc2.list[x]); //すべての演算子をlistPに格納します}
            this.data.calc2.list.length = 0; //ループ後、リストを空にする this.data.calc2.list.unshift(tempList[item]); //新しい要素を追加する } else {
            this.data.calc2.list.unshift(tempList[item]); // 加算演算子を直接追加します}
        }
      } それ以外 {
        this.data.calc2.strListP.push(tempList[item]); // 数値をサフィックスコレクションに直接追加します}
    }
    //ループが終了した後、最後のものは数値である可能性があり、取得されたものは文字ではないため、演算子の残りのものをlistPに追加する必要がありますif (this.data.calc2.list.length > 0) {
      (this.data.calc2.list 内の x を) {
        this.data.calc2.strListP.push(this.data.calc2.list[x]); //すべての演算子をlistPに格納します}
      this.data.calc2.list.length = 0; //ループ後、リストを空にする}
  },

  // 2 つの演算子の優先順位を判断します (m1 はリスト セットに最後に追加された要素であり、これから追加される要素と比較します。m1 が m2 より大きい場合は、リスト セットを listp にポップし、次に m2 をリストに追加します。それ以外の場合は、m2 を直接リストに追加します)
  チェックFuHaoDX(m1, m2) {
    ((m1 == "%" || m1 == "×" || m1 == "÷") && (m2 == "-" || m2 == "+")) {
      true を返します。
    } それ以外 {
      false を返します。
    }
  },

  //文字列式をインフィックスキューに変換する expressToStrList(express) {
    let temp = ''; //一時変数を定義する //式をインフィックスキューに変更する for (let i = 0; i < express.length; i++) {
      if (i == 0 && express[i] == "-") {
        temp = temp + express[i];
      } それ以外 {
        if (this.checkShuZi2(express[i])) { //iが数値の場合 temp = temp + express[i];
        } それ以外 {
          （温度長さ＞0）の場合{
            if (express[i] == ".") {
              temp = temp + express[i];
            } それ以外 {
              this.data.calc2.strList.push(parseFloat(temp));
              温度 = '';
              this.data.calc2.strList.push(express[i]);
            }
          } それ以外 {
            temp = temp + express[i];
          }
        }
      }
    }
    // 最後までループして、temp に数字があるかどうかを確認し、ある場合はそれを追加します。if (temp.length > 0 && this.checkShuZi(temp.substring(temp.length - 1))) {
      this.data.calc2.strList.push(parseFloat(temp));
      温度 = '';
    }
  },

  //顧客によるクリアキー入力を処理する handleClear() {
    this.data.calc2.str = '';
    this.data.calc2.strList.length = 0;
    this.data.calc2.strListP.length = 0;
    this.data.calc2.list.length = 0;
    this.data.calc2.count.length = 0;
    this.data.calc2.minusFlag = 0;
    this.setData({
      急行： ''、
      結果： ''
    });
  },
  //顧客の戻るキー入力を処理する handleDelete() {
    that = this とする;
    str = that.data.calc2.str とします。
    （文字列の長さ＞0）の場合{
      str = str.substring(0, str.length - 1);
      that.data.calc2.str = str;
      that.setData({
        表現: str,
      });
    } それ以外 {
      戻る;
    }
  },

  //演算子かどうかを判断します（ドットを含む、式を整理するときに使用します。繰り返し入力することはできません）
  checkFuHao(入力) {
    if (入力 == "-" || 入力 == "+" || 入力 == "÷" || 入力 == "%" || 入力 == "×" || 入力 == ".") {
      true を返します。
    } それ以外 {
      false を返します。
    }
  },

  //演算子かどうかを判定する（ピリオドなし）
  checkFuHao2(入力) {
    if (入力 == "-" || 入力 == "+" || 入力 == "÷" || 入力 == "%" || 入力 == "×") {
      true を返します。
    } それ以外 {
      false を返します。
    }
  },

  //数値かどうかを判定する checkShuZi(input) {
    入力 == "0" || 入力 == "1" || 入力 == "2" ||
      入力 == "3" || 入力 == "4" || 入力 == "5" ||
      入力 == "6" || 入力 == "7" || 入力 == "8" || 入力 == "9") {
      true を返します。
    } それ以外 {
      false を返します。
    }
  },

  // 数値かどうかを判定します（式変換インフィックスメソッドで使用される . 記号を含む）
  checkShuZi2(入力) {
    入力 == "0" || 入力 == "1" || 入力 == "2" ||
      入力 == "3" || 入力 == "4" || 入力 == "5" ||
      入力 == "6" || 入力 == "7" || 入力 == "8" || 入力 == "9" || 入力 == ".") {
      true を返します。
    } それ以外 {
      false を返します。
    }
  },

  //文字列に新しい文字を追加します（変数フラグを変更するかどうかを決定するために直接追加します）
  addStr(入力) {
    this.data.calc2.str = this.data.calc2.str + 入力;
    if (this.checkFuHao(入力)) {
      this.data.calc2.flag = 1; //フラグビットを1に設定する
    } それ以外 {
      this.data.calc2.flag = 0;
    }
    this.setData({
      表現: this.data.calc2.str
    });
  },

wxss

/* ページ/インデックス/collect-money/collect-money.wxss */

ページ {
  背景色: #f8f8f8;
}

.ボトムハンドル{
  高さ: 100rpx;
  幅: 100%;
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
}

.fixation-box {
  位置: 固定;
  下部: 0;
  幅: 750rpx;
}

.sweep-コード検証{
  背景: #fff;
  上境界線: 1rpx 実線 #e3e3e3;
  幅: 220rpx;
  色: #333;
}

.artificial-collection、.sweep-code-verification {
  高さ: 100%;
  ディスプレイ: フレックス;
  flex-direction: 列;
  アイテムの位置を中央揃えにします。
  フォントサイズ: 24rpx;
  コンテンツの中央揃え: 中央;
}

.人工コレクション {
  背景: #f3b055;
  幅: 248rpx;
  色: #fff;
}

.支払いコード{
  背景画像: 線形グラデーション(203度, #6f6f6f 0%, #3c3c3c 96%);
  フレックス: 1;
  フォントサイズ: 34rpx;
  色: #fff;
  テキスト配置: 中央;
  行の高さ: 100rpx;
}

.sweep-code-verification イメージ {
  幅: 40rpx;
  高さ: 40rpx;
}

.artificial-collection画像{
  幅: 40rpx;
  高さ: 40rpx;
}

.計算機ボックス{
  背景色: #fff;
}

.calculator-line {
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
}

.boxtn {
  幅: 25%;
  高さ: 154rpx;
  左境界線: なし;
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  コンテンツの中央揃え: 中央;
}

.calculator-box .calculator-line:最後の子 {
  下部境界線: なし;
}

.calculator-line {
  ボーダー下部: 1rpx 実線 #dedede;
}

.btn1、.btn2 {
  右境界線: 1rpx 実線 #dedede;
}

.btn2 {
  幅: 50%;
}

。等しい {
  背景: #f3b055;
  フォントサイズ: 61rpx;
  色: #fff;
}

.nu​​m {
  フォントサイズ: 60rpx;
  色: #000;
}

。クリア {
  フォントサイズ: 48rpx;
  色: #f3b055;
}

.パーセント{
  フォントサイズ: 60rpx;
  色: #000;
}

.チャージコンテンツ{
  背景: #fff;
  境界線の半径: 24rpx;
  幅: 540rpx;
  ディスプレイ: フレックス;
  flex-direction: 列;
  アイテムの位置を中央揃えにします。
}

.charge-title {
  背景: #f3b055;
  境界線の半径: 12px 12px 0 0;
  幅: 100%;
  高さ: 92rpx;
  フォントサイズ: 34rpx;
  行の高さ: 92rpx;
  テキスト配置: 中央;
  色: #fff;
}

.チャージ-マネー{
  フォントサイズ: 60rpx;
  色: #333;
  行の高さ: 84rpx;
  上マージン: 35rpx;
}

.charge-propmt {
  フォントサイズ: 28rpx;
  色: #999;
  行の高さ: 42rpx;
  パディング下部: 40rpx;
}

.charge-btn {
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  高さ: 100rpx;
  上境界線: 1rpx 実線 #ddd;
  幅: 100%;
}

.charge-cancel、.charge-confirm {
  フレックス: 1;
  テキスト配置: 中央;
  行の高さ: 100rpx;
  フォントサイズ: 34rpx;
}

.チャージキャンセル{
  色: #999;
  右境界線: 1rpx 実線 #ddd;
}

.請求確認{
  色: #f3b055;
}

.成功したコンテンツ{
  背景: #fff;
  境界線の半径: 24rpx;
  幅: 540rpx;
  ディスプレイ: フレックス;
  flex-direction: 列;
  アイテムの位置を中央揃えにします。
}

.成功アイコン{
  幅: 120rpx;
  上マージン: 45rpx;
  高さ: 120rpx;
}

.成功タイトル{
  フォントサイズ: 34rpx;
  色: #333;
  行の高さ: 42rpx;
  パディング: 30rpx 0;
  フォントの太さ: 600;
}

.clear-icon {
  幅: 80rpx;
  高さ: 80rpx;
}

.calculate-box {
  位置: 固定;
  上: 0;
  下部: 875rpx;
  幅: 100%;
  ディスプレイ: フレックス;
  flex-direction: 列;
  align-items: flex-end;
  パディング: 0 50rpx;
}

.結果番号{
  フォントサイズ: 88rpx;
  色: #333;
  行の高さ: 124rpx;
}

.calculate-txt {
  フォントサイズ: 60rpx;
  色: #333;
  行の高さ: 84rpx;
  上マージン: 自動;
  単語折り返し: 単語を区切る;
  テキスト配置: 右;
  単語区切り: 全区切り;
  テキストオーバーフロー: -o-ellipsis-lastline;
  オーバーフロー: 非表示;
  テキストオーバーフロー: 省略記号;
  ディスプレイ: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: 垂直;
}
.サスペンドボックス{
  高さ: 64rpx;
  背景色: rgba(0, 0, 0, .5);
  位置: 固定;
  上: 70rpx;
  左: 0;
  色: #fff;
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  フォントサイズ: 24rpx;
  パディング: 0 20rpx;
  境界線の半径: 0 100rpx 100rpx 0;
  zインデックス: 9;
}
.close-suspend{
  幅: 30rpx;
  高さ: 30rpx;
}

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • WeChatアプレットで計算機機能を実装する
  • WeChatアプレットがシンプルな計算機機能を実装
  • WeChatアプレットが計算機機能を実装
  • WeChat アプレット計算機の例
  • WeChatアプレットが計算機機能を実装
  • WeChatアプレットがシンプルな計算機機能を実装
  • WeChatアプレットはシンプルな計算機を実装する
  • WeChat アプレットのシンプルな計算機の実装コード例
  • 簡単な計算機を実装する小さなプログラム
  • WeChatアプレットはシンプルな計算機を実装する

<<:  MySQL DISTINCTの基本実装原理の詳細な説明

>>:  nginx パニック問題の解決方法の詳細な説明

推薦する

Windows 10 無料インストール版の MySQL インストールと設定のチュートリアル

ネットでいろいろ検索してみたところ、Linux システム向けではなく、現在の新しいバージョンと一致し...

Angular Cookie の読み取りおよび書き込み操作コード

Angular Cookie の読み取りおよび書き込み操作のコードは次のようになります。 var a...

Mysql の mysql.user ユーザー テーブルの詳細な説明

MySQL は、異なるユーザーに異なる権限を割り当てることができるマルチユーザー管理データベースであ...

ミニプログラムの基本的な使用方法の知識ポイント（非常に包括的で、お勧めです！）

目次アプリを登録するときに何をすればよいですか?ページを登録するときに通常何をする必要がありますか?...

Kubernetes (k8s) 入門

Kubernetes は面白そうだったので（ギリシャ人なら名前に問題があると思うでしょうが）、ずっと...

CSS3 のフィルタプロパティの使用に関する詳細な説明

最近、イントラネットポータルを修正していたときに、フィルターを使用する必要がある箇所に遭遇しました。...

Linux seqコマンドの使い方

1. コマンドの紹介seq (シーケンス) コマンドは、指定されたステップ サイズに従って、開始番号...

Vue での keepAlive の使用例の詳細な説明

開発においては、一覧から詳細ページにジャンプし、また詳細ページに戻る際に一覧ページの状態（スクロール...

MYSQL メタデータ ロック (MDL ロック) MDL ロックの問題分析

1. はじめにMYSQL の MDL ロックは常に頭痛の種でした。ロックについて話すとき、通常は I...

Mysql Explainコマンドの使用と分析

mysql explain コマンドは、MySQL がインデックスを使用して選択ステートメントを処理...

MySQLのメモリ使用量を表示する方法の詳細な説明

序文この記事では主にMySQLのメモリ使用量に関する関連コンテンツを紹介し、皆さんの参考と学習のため...

タグのターゲットリンクを iframe に向ける方法

コードをコピーコードは次のとおりです。 <iframe id="myFrameId&...

Linux システムをバックアップする docker コマンドの詳細な説明

tar バックアップ システム sudo tar cvpzf backup.tgz --exclud...

MySQL トリガー: トリガーの作成と使用

この記事では、例を使用して MySQL トリガーの作成と使用について説明します。ご参考までに、詳細は...

MySQL 5.7.19 のインストールと設定方法のグラフィック チュートリアル (win10)

以下に記録されているように、WIN10システムにMYSQLをダウンロードしてインストールするための詳...