この記事は、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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: この SQL 書き込み方法では本当にインデックスが失敗するのでしょうか?
>>: Tomcat 実行時の JVM エンコーディングの問題を修正
目次古典的なアプローチ質問その他の質問注意が必要な問題古典的なアプローチご存知のとおり、アカウントの...
目次1. イベントの流れ1. コンセプト2. DOMイベントフロー2. イベントの委任1. イベント...
1. 最初の方法は、unhup コマンドを直接使用してプログラムをバックグラウンドで実行することです...
序文MySQL は、クライアント/サーバー構造に基づく、高速、高性能、マルチスレッドのオープン ソー...
序文デフォルトでは、MySQL はデータベース クエリ データをキャッシュするために大きなメモリ ブ...
今日システムを再インストールした後、コンピューターに mysql を再インストールし、ZIP ファイ...
この記事では、期間限定フラッシュセール機能を実装するためのJavaScriptの具体的なコードを参考...
今日、HTML に問題を発見しました。多くのデフォルト フォントが提供されていますが、「Bold」、...
JavaScriptでの検索二分木実装は参考までに。具体的な内容は以下のとおりです。バイナリ検索木 ...
目次1. 背景2. 前提条件https:証明書システム: 3. 操作プロセス3.1 証明書の生成3....
問題を見つける今日、仕事中に、ローカル データベースから仮想マシン CentOS 6.6 上のデータ...
コードをコピーコードは次のとおりです。 html、アドレス、引用ブロック、本文、dd、div、 dl...
目次序文1. 準備2. インストール3. 環境変数を設定する1. 「新規」をクリックすると、ポップア...
•CSSには多くのセレクターがあります。複数のセレクターを同じ要素に適用するとどうなるでしょうか? ...
最近、Xiao Ming は新しい Mac を購入し、独自のブログ Web サイトを構築したいと考え...