WeChatアプレットで計算機機能を実装する

WeChatアプレットで計算機機能を実装する

この記事は、WeChat アプレットを使用して作成された簡単な計算機です。興味のある方はご覧ください。

ページセクション

<ビュークラス='ボックス'>
     <view class='txt'>{{screenNum}}</view> 
    <view capture-bind:touchstart="compute">
     <表示>
       <button data-val='clear' class='boxtn btn1'>AC</button>
       <button data-val='back' class='boxtn btn1'>←</button>
       <button data-val='#' class='boxtn btn1'>#</button>
       <button data-val='/' class='boxtn btn'>/</button>
     </ビュー>
       <表示>
       <button data-val='7' class='boxtn'>7</button>
       <button data-val='8' class='boxtn'>8</button>
       <button data-val='9' class='boxtn'>9</button>
       <button data-val='*' class='boxtn btn'>*</button>
     </ビュー>
       <表示>
       <button data-val='4' class='boxtn'>4</button>
       <button data-val='5' class='boxtn'>5</button>
       <button data-val='6' class='boxtn'>6</button>
       <button data-val='-' class='boxtn btn'>-</button>
     </ビュー>
       <表示>
       <button data-val='1' class='boxtn'>1</button>
       <button data-val='2' class='boxtn'>2</button>
       <button data-val='3' class='boxtn'>3</button>
       <button data-val='+' class='boxtn btn'>+</button>
     </ビュー>
       <表示>
       <button data-val='1' class='boxtn btn2'>0</button>
       <button data-val='.' class='boxtn'>.</button>
       <button data-val='=' class='boxtn btn'>=</button>
     </ビュー>
    </ビュー>
</ビュー>

スタイルセクション

。箱{
  幅:100%;
  高さ: 700ピクセル;
  背景: #000;
}
。TXT{
  色: #fff;
  幅: 100%;
  高さ:120px;
  フォントサイズ: 50px;
  テキスト配置: 右;
}
.boxtn{
  幅: 90ピクセル;
  高さ:90px;
  表示:ブロック;
  フロート:左;
  境界線の半径: 50%;
  行の高さ: 90px;
  テキスト配置: 中央;
  左マージン: 3px;
  上マージン: 5px;
  色:#fff;
  背景: #333333;
  フォントの太さ: 太字;
  フォントサイズ: 25px;
}
.btn{
  背景: #f09a37;
}
.btn1{
  背景: #a5a5a5;
  色:#000;
}
.btn2{
  幅: 180ピクセル;
  境界線の半径: 40px;
}

js部分

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

ページ({

  /**
   * ページの初期データ */
  データ: {
    screenNum: 0, //画面に表示される数値 currentNum: '', //現在の入力数値 storage: 0, //保存されている数値 operator: '', //演算子 off: false,
  },

  計算: 関数 (e) {
    var btn_num = e.target.dataset.val;
    var obj = this;
    if (!isNaN(btn_num)) {
      obj.data.off == trueの場合{
        obj.data.currentNum = ''
        obj.data.off = false;
      }
      obj.data.currentNum += btn_num
      obj.data.currentNum = 数値(obj.data.currentNum);
      obj.data.currentNum = obj.data.currentNum.toString();
    } それ以外 {
      スイッチ (btn_num) {
        ケース '+':
        場合 '-':
        場合 '*':
        場合 '/':
        '='の場合:
          // 画面上の現在の数値と演算子を変数に格納します。if (obj.data.storage == 0) {
            obj.data.storage = obj.data.currentNum;
            obj.data.operator = btn_num;
          } それ以外 {
            obj.data.off が true の場合 {
              (obj.data.operator == '+')の場合{
                obj.data.currentNum = 数値(obj.data.storage) + 数値(obj.data.currentNum)
              } そうでない場合 (obj.data.operator == '-') {
                obj.data.currentNum = 数値(obj.data.storage) - 数値(obj.data.currentNum)
              } そうでない場合 (obj.data.operator == '*') {
                obj.data.currentNum = 数値(obj.data.storage) * 数値(obj.data.currentNum)
              } そうでない場合 (obj.data.operator == '/') {
                obj.data.currentNum = 数値(obj.data.storage) / 数値(obj.data.currentNum)
              }
            }
            obj.data.storage = obj.data.currentNum;
            obj.data.operator = btn_num;
          }

          obj.data.off = true;
          壊す;
        ケース 'クリア':
          obj.data.storage = 0;
          obj.data.currentNum = '0';
          obj.data.operator = '';
          壊す;
        ケース「戻る」:
          obj.data.currentNum = obj.data.currentNum.slice(0, -1);
          obj.data.currentNum == ''の場合{
            obj.data.currentNum = '0';
          }
          壊す;
        場合 '。':
          if (obj.data.currentNum.indexOf('.') == -1) { // "." が含まれているかどうかを確認します
            obj.data.currentNum += btn_num
          }
          壊す;
      }
    }
    obj.setData({
      画面番号: obj.data.currentNum
    })
  },

})

効果図は以下のとおりです

WeChat 開発者ツールのダウンロードアドレス

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

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

<<:  この SQL 書き込み方法では本当にインデックスが失敗するのでしょうか?

>>:  Tomcat 実行時の JVM エンコーディングの問題を修正

推薦する

jsはブラウザを閉じるときにアカウントのログアウトを処理します

目次古典的なアプローチ質問その他の質問注意が必要な問題古典的なアプローチご存知のとおり、アカウントの...

JavaScript イベント キャプチャ バブリングとキャプチャの詳細

目次1. イベントの流れ1. コンセプト2. DOMイベントフロー2. イベントの委任1. イベント...

LinuxのバックグラウンドでPythonプログラムを実行するいくつかの方法

1. 最初の方法は、unhup コマンドを直接使用してプログラムをバックグラウンドで実行することです...

MySQLで負荷分散を実装する方法

序文MySQL は、クライアント/サーバー構造に基づく、高速、高性能、マルチスレッドのオープン ソー...

MySql でメモリ使用量を削減する方法の詳細な説明

序文デフォルトでは、MySQL はデータベース クエリ データをキャッシュするために大きなメモリ ブ...

mysql8.0.14.zip のインストール中にデータ フォルダを自動的に作成できませんでした。サービスを開始できません。

今日システムを再インストールした後、コンピューターに mysql を再インストールし、ZIP ファイ...

期間限定フラッシュセール機能を実現するJavaScriptタイマー

この記事では、期間限定フラッシュセール機能を実装するためのJavaScriptの具体的なコードを参考...

CSS3 で複数のカスタムフォントを導入する

今日、HTML に問題を発見しました。多くのデフォルト フォントが提供されていますが、「Bold」、...

JavaScript で二分探索木を実装する

JavaScriptでの検索二分木実装は参考までに。具体的な内容は以下のとおりです。バイナリ検索木 ...

nginx で http でアクセスする Web サイトを https に変更する方法

目次1. 背景2. 前提条件https:証明書システム: 3. 操作プロセス3.1 証明書の生成3....

MySQL の起動時に InnoDB エンジンが無効になる問題の解決方法

問題を見つける今日、仕事中に、ローカル データベースから仮想マシン CentOS 6.6 上のデータ...

HTML4.0 要素のデフォルトスタイルの配置

コードをコピーコードは次のとおりです。 html、アドレス、引用ブロック、本文、dd、div、 dl...

Win10でのJDKのインストールと環境変数の設定に関する詳細なチュートリアル

目次序文1. 準備2. インストール3. 環境変数を設定する1. 「新規」をクリックすると、ポップア...

CSS ウェイト値(カスケード)の例の詳細な説明

•CSSには多くのセレクターがあります。複数のセレクターを同じ要素に適用するとどうなるでしょうか? ...

MacにHomebrewをインストールする際の注意点

最近、Xiao Ming は新しい Mac を購入し、独自のブログ Web サイトを構築したいと考え...