簡単な計算機を実装する小さなプログラム

{
  「ページ」: [
    「ページ/インデックス/インデックス」、
    「ページ/ログ/ログ」
  ]、
  「ウィンドウ」: {
    "ナビゲーションバーの背景色": "#000000",
    "ナビゲーションバーのテキストスタイル": "白",
    "navigationBarTitleText": "スマート計算機"
  },
  "タブバー": { 
    "色": "#ff69b4",
    "選択された色": "#0000ff",
    "背景色": "#ffff00",
    「リスト」: [
      {
        "ページパス": "ページ/インデックス/インデックス",
        "テキスト": "コンピューター"
      },
      {
        "pagePath": "ページ/ログ/ログ",
        "text": "ログ"
      },
      {
        "pagePath": "ページ/ログ/ログ",
        "text": "家に帰る"
      }
    ]
  }
}

/**アプリ.wxss**/
。容器 {
  高さ: 100%;
  ディスプレイ: フレックス;
  flex-direction: 列;
  アイテムの位置を中央揃えにします。
  コンテンツの両端揃え: スペースの間;
  パディング: 200rpx 0;
  ボックスのサイズ: 境界線ボックス;
}

<テンプレート名="計算機キー">
  <button hover-start-time="{{5}}" hover-stay-time="{{100}}" hover-class="calculator-key-hover" data-key="{{className}}" class="calculator-key {{className}}">{{display}}</button>
</テンプレート>

<view class="計算機">
  <view class="calculator-display">
    <view class="calculator-display-text">{{displayValue}}</view>
  </ビュー>
  <view class="電卓キーパッド">
    <view class="入力キー">
      <view class="function-keys" catchtap="onTapFunction">
        <template is="calculator-key" data="{{className: 'key-clear', display: clearDisplay ? 'C' : 'C'}}"/>
        <template is="calculator-key" data="{{className: 'key-sign', display: '+/-'}}"/>
        <template is="calculator-key" data="{{className: 'key-percent', display: '%'}}"/>
   </ビュー>
      <view class="digit-keys" catchtap="onTapDigit">
        <template is="calculator-key" data="{{className: 'key-0', display: '0'}}"/>
        <template is="calculator-key" data="{{className: 'key-dot', display: '●'}}"/>
        <template is="calculator-key" data="{{className: 'key-1', display: '1'}}"/>
        <template is="calculator-key" data="{{className: 'key-2', display: '2'}}"/>
        <template is="calculator-key" data="{{className: 'key-3', display: '3'}}"/>
        <template is="calculator-key" data="{{className: 'key-4', display: '4'}}"/>
        <template is="calculator-key" data="{{className: 'key-5', display: '5'}}"/>
        <template is="calculator-key" data="{{className: 'key-6', display: '6'}}"/>
        <template is="calculator-key" data="{{className: 'key-7', display: '7'}}"/>
        <template is="calculator-key" data="{{className: 'key-8', display: '8'}}"/>
        <template is="calculator-key" data="{{className: 'key-9', display: '9'}}"/>
      </ビュー>
    </ビュー>
    <view class="operator-keys" catchtap="onTapOperator">
        <template is="calculator-key" data="{{className: 'key-divide', display: '÷'}}"/>
        <template is="calculator-key" data="{{className: 'key-multiply', display: '×'}}"/>
        <template is="calculator-key" data="{{className: 'key-subtract', display: '−'}}"/>
        <template is="calculator-key" data="{{className: 'key-add', display: '+'}}"/>
        <template is="calculator-key" data="{{className: 'key-equals', display: '='}}"/>
    </ビュー>
  </ビュー>
</ビュー>

ページ（{
  データ： {
    value: null, // 最後の計算の結果。null は最後の計算の結果がないことを意味します。displayValue: '0', // 値を表示します。operator: null, // 最後の計算の記号。null は未完了の計算がないことを意味します。waitingForOperand: false // 前のキーが計算記号であるかどうか。},

  onLoad: 関数 (オプション) {
    this.calculatorOperations = {
      'キー分割': (前の値、次の値) => 前の値 / 次の値、
      'キー乗算': (前の値、次の値) => 前の値 * 次の値、
      'key-add': (前の値、次の値) => 前の値 + 次の値、
      'key-subtract': (前の値、次の値) => 前の値 - 次の値、
      'key-equals': (前の値、次の値) => 次の値
    }
  },

  /* AC 操作、解放前の時間に戻る*/
  すべてクリア() {
    this.setData({
      値: null、
      表示値: '0',
      演算子: null、
      オペランド待ち: false
    })
  },

  /* 現在表示されている入力値のみをクリアします*/
  クリアディスプレイ() {
    this.setData({
      表示値: '0'
    })
  },

  onTapFunction: 関数 (イベント) {
    定数キー = event.target.dataset.key;

    スイッチ（キー）{
      ケース 'キークリア':
        if (this.data.displayValue !== '0') {
          this.clearDisplay();
        } それ以外 {
          this.clearAll();
        }

        壊す;

      case 'キー-サイン':
        var newValue = parseFloat(this.data.displayValue) * -1

        this.setData({
          表示値: 文字列(新しい値)
        })

        壊す;

      ケース 'キーパーセント':
        const fixedDigits = this.data.displayValue.replace(/^-?\d*\.?/, '')
        var newValue = parseFloat(this.data.displayValue) / 100

        this.setData({
          表示値: 文字列(newValue.toFixed(fixedDigits.length + 2))
        });

        壊す;

      デフォルト：
        壊す;
    }
  },

  onTapOperator: 関数 (イベント) {
    次の演算子は、event.target.dataset.key に設定されます。
    const inputValue = parseFloat(this.data.displayValue);

    if (this.data.value == null) {
      this.setData({
        値: 入力値
      });
    } それ以外の場合 (this.data.operator) {
      const currentValue = this.data.value || 0;
      const newValue = this.calculatorOperations[this.data.operator](currentValue, inputValue);

      this.setData({
        値: 新しい値、
        表示値: 文字列(新しい値)
      });
    }

    this.setData({
      オペランド待ち: true、
      演算子: nextOperator
    });
  },

  onTapDigit: 関数 (イベント) {
    const key = event.target.dataset.key; // データキーに従ってキーをマークします if (key == 'key-dot') {
      // ピリオドを押します if (!(/\./).test(this.data.displayValue)) {
        this.setData({
          表示値: this.data.displayValue + '.',
          オペランド待ち: false
        })
      }
    } それ以外 {
      // 数字キーを押します const digit = key[key.length - 1];

      if (this.data.waitingForOperand) {
        this.setData({
          displayValue: 文字列(数字)、
          オペランド待ち: false
        })
      } それ以外 {
        this.setData({
          displayValue: this.data.displayValue === '0' ? 文字列(数字): this.data.displayValue + 数字
        })
      }
    }
  }
})

ページ {
  高さ:100%;
}

.計算機{
  幅: 100%;
  高さ：100vh;
  境界線:実線 1px;
  背景: rgb(238, 5, 5);
  位置: 相対的;
  ボックスシャドウ: 0px 0px 20px 0px rgb(211, 41, 41);
  ディスプレイ: フレックス;
  flex-direction: 列;
  ボックスのサイズ: 境界線ボックス;
}

.calculator-display { /*背景色を表示*/
  背景: #2c2a2c;
  フレックス: 1;
}

/*TODO: テキストの垂直中央揃えの問題を解決し、デジタルカラーを表示する*/
.計算機の表示テキスト{
  パディング: 0 30px;
  フォントサイズ: 3em;
  色: rgb(245, 245, 248);
  テキスト配置: 右;
}

.電卓キーパッド{
  ディスプレイ: フレックス;

}

.計算機 .ファンクションキー {
  ディスプレイ: フレックス;
  色:rgb(245, 13, 13);

}

.計算機 .数字キー {
  背景: #0808f7;
  ディスプレイ: フレックス;
  flex-direction: 行;
  flex-wrap: ラップを逆にする;
}

.calculator-key-hover { /*ボタンを押した後のボタンの色*/
  ボックスシャドウ: インセット 0px 0px 25vw 0px hsla(71, 90%, 48%, 0.898);
}


.計算機キー{
背景色:水色;

  表示: ブロック;
  幅: 25vw;
  高さ：25vw;
  行の高さ: 25vw;
  上境界線: 1px実線rgb(6, 245, 78);
  右境界線: 1px実線rgb(19, 241, 12);
  テキスト配置: 中央;
  ボックスのサイズ: 境界線ボックス;
}

.計算機 .関数キー .計算機キー {
  フォントサイズ: 2em;

}

.計算機 .数字キー .計算機キー {
  フォントサイズ: 3em;
}

.計算機 .数字キー .キー0 {
  幅：50vw;
  テキスト配置: 左;
  左パディング: 9vw;
}

.計算機 .数字キー .ドットキー {
  パディングトップ: 1em;
  フォントサイズ: 0.75em;
}

.計算機 .演算子キー .計算機キー {
  色: rgb(248, 165, 10);
  右境界線: 0;
  フォントサイズ: 3em;
}

.計算機 .ファンクションキー {
  背景: linear-gradient(下へ、rgb(6, 6, 240) 0%、rgb(52, 5, 240) 100%);
}

.計算機 .演算子キー {
  背景: linear-gradient(下へ、rgba(252,156,23,1) 0%、rgba(247,126,27,1) 100%);
}

.入力キー{
  幅: 100%;
}

.演算子キー {
  幅: 100%;
}