WeChatアプレットがシンプルな計算機機能を実装

WeChatアプレットがシンプルな計算機機能を実装

この記事では、WeChatアプレットの計算機機能を実装するための具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

wxml

<ビュークラス='コンテンツ'>
  <入力値='{{計算}}'></input>
  <ビュークラス='ボックス'>
    <button class='yellow-color'>バックスペース</button>
    <button class='yellow-color' bindtap='empty'>画面をクリア</button>
    <button class='yellow-color'>❤</button>
    <button bindtap='add' data-text='+' class='yellow-color'>+</button>
  </ビュー>

  <ビュークラス='ボックス'>
    <button bindtap='add' data-text='9'>9</button>
    <button bindtap='add' data-text='8'>8</button>
    <button bindtap='add' data-text='7'>7</button>
    <button bindtap='add' class='yellow-color' data-text='-'>-</button>
  </ビュー>

  <ビュークラス='ボックス'>
    <button bindtap='add' data-text='6'>6</button>
    <button bindtap='add' data-text='5'>5</button>
    <button bindtap='add' data-text='4'>4</button>
    <button bindtap='add' class='yellow-color' data-text='*'>*</button>
  </ビュー>

  <ビュークラス='ボックス'>
    <button bindtap='add' data-text='3'>3</button>
    <button bindtap='add' data-text='2'>2</button>
    <button bindtap='add' data-text='1'>1</button>
    <button bindtap='add' data-text='/' class='yellow-color'>÷</button>
  </ビュー>

  <ビュークラス='ボックス'>
    <button bindtap='add' data-text='0'>0</button>
    <button bindtap='追加' data-text='.'>.</button>
    <button>履歴</button>
    <button class='yellow-color' bindtap='res'>=</button>
  </ビュー>


</ビュー>

wxss

入力{
  幅: 95%;
  高さ: 250rpx;
  マージン: 0 自動;
  下部マージン: 20rpx;
  下部境界線: 1rpx 実線 #ccc;
}

。箱 {
  ディスプレイ: フレックス;
}
ボタン {
  幅: 20%;
  高さ: 150rpx;
  下部マージン: 20rpx;
  行の高さ: 150rpx;
  背景色:rgb(0, 150, 250);
  色: 白;
}

.黄色 {
  背景色: rgb(247, 142, 24)
}

JS

//index.js
//アプリケーションインスタンスを取得する const app = getApp()

ページ({
  データ: {
    計算:""、
    結果:0,
    文字:[], // 演算子記号 オペランド: [], // 数値 temp:false
  },

  // データを入力するための入力ボックス add:function(e) {
    入力をe.currentTarget.dataset.textとします。
    var that = this;
    if (入力 == '+' || 入力 == '-' || 入力 == '*' || 入力 == '/') {
      this.data.temp = false; // 前回が演算子であったかどうかを記録するために使用されます var item = 'character[' + this.data.character.length+ ']';
      this.setData({
        [項目] :入力
      }) 
    } それ以外 {
      var item = 'オペランド['+this.data.operand.length+']';
     
      if (that.data.temp) {
        // 前の値を取得する var res = 'operand[' + (this.data.operand.length-1) + ']'
        
        var ress = that.data.operand.length-1;
        var xyz = that.data.operand[ress] * 10 + parseInt(input);
        that.setData({
          [解像度]:xyz
        })
      } それ以外 {
        入力 = parseInt(入力);
        .data.temp = true; となります。
        that.setData({
          [項目]: 入力
        })
      }
    }
    // すべてのコンテンツを表示ボックスに入れる this.setData({
      計算:this.data.calculation+input
    })

  },

  // 答えを計算する res:function() {
    console.log(このデータ文字の長さ);
    console.log(このデータオペランドの長さ)
    var character_len = this.data.character.length;
    var operand_len = this.data.operand.length;
    console.log(オペランド長 - 文字長)
    if (オペランド長 - 文字長 == 1) {
      this.data.result = this.data.operand[0];
      console.log("初期値"+this.data.result);
      for(var i=0;i<character_len;i++) {
        if(this.data.character[i] == '+') {
          this.data.result = this.data.result + this.data.operand[i + 1];

        }
        if (this.data.character[i] == '-') {
          this.data.result = this.data.result - this.data.operand[i + 1];

        }
        if (this.data.character[i] == '*') {
          this.data.result = this.data.result * this.data.operand[i + 1];

        }
        if (this.data.character[i] == '/') {
          this.data.result = this.data.result / this.data.operand[i + 1];

        }
        
      }
    } それ以外 {
      this.setData({
        結果: 「入力が正しくありません。データを消去して再入力してください」
      })
    }

    this.setData({
     計算:this.data.result
    })
  },

  // 画面をクリアする empty:function() {
    this.setData({
      計算: "",
      結果: 0,
      文字: [], // 演算子記号 オペランド: [], // 数値 temp: false
    }
  }
})

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

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

<<:  MySQL インデックス カバレッジの例の分析

>>:  Windows 10 の仮想マシンに Mac システムをインストールするグラフィック チュートリアル

推薦する

MySQLデータベースの基礎知識

目次1. データベースを理解する1.1 データベースとデータ構造の関係1.2 なぜデータベースが必要...

表には表示したい境界コードが表示されます

テーブルの共通プロパティ基本的な属性は、width (幅)、height (高さ)、border (...

JS ES6 スプレッド演算子の魔法のような使い方

目次1. 属性を追加する2. 複数のオブジェクトを結合する3. オブジェクトのプロパティを削除する4...

Vueはプライベートフィルターと基本的な使用法を定義します

プライベート フィルターとグローバル フィルターのメソッドと概念は同じですが、プライベート フィルタ...

Angular環境構築と簡単な体験のまとめ

Angular入門Angular は、Google が開発したオープンソースの Web フロントエン...

イメージの起動時にdocker runまたはdocker restartが自動的に終了する問題を解決します

コマンドを実行します: docker run --name centos8 -d centos /b...

タブ切り替え機能を実装するJavaScriptカスタムプラグイン

この記事では、タブ切り替え機能を実装するためのJavaScriptの具体的なコードを参考までに共有し...

0.1秒の価値!フロントエンドのウェブページの高速化の問題について簡単に説明します

私が現在の仕事の面接を受けたとき、リーダーが真剣にこう言っていたのを覚えています。「今の世の中はイン...

Vue.jsのレンダリング関数の使い方の詳しい説明

Vue では、ほとんどの場合、テンプレートを使用して HTML を作成することを推奨しています。ただ...

CSSはクーポンスタイルを実装するために放射状グラデーションを使用します

この記事では、CSS で放射状グラデーションを使用して、次の図に示すクーポン スタイルの効果を実現す...

Docker コンテナを他のサーバーに移行する 5 つの方法

多くの場合、移行は避けられません。ハードウェアのアップグレード、データ センターの変更、古いオペレー...

nginx設定ファイルの場所を見つける方法の詳細な説明

よく知らないサーバーの場合や、かなり前にインストールした場所を忘れてしまった場合、構成ファイルの場所...

Bootstrap 3.0 学習ノートのページレイアウト

今回はレイアウトを中心に学習しますが、これは基本的なHTMLタグのほとんどにも存在するため、比較的簡...

JavaScript の遅延読み込み属性パターンを理解する

従来、開発者はインスタンスで必要になる可能性のあるデータに対して JavaScript クラス内にプ...