この記事では、参考までに、計算機を実装するためのWeChatアプレットの具体的なコードを紹介します。具体的な内容は次のとおりです。 プロジェクトの表示ページデザイン上部の入力表示部と下部のキー部に分かれています <!--pages/index/index.wxml--> <ビュークラス="結果"> <view class="result-num">{{num}}</view> <view class="result-op">{{op}}</view> </ビュー> <view class="btns"> <表示> <view hover-class="bg" bindtap="resetBtn">C</view> <view hover-class="bg" bindtap="delBtn">DEL</view> <view hover-class="bg" bindtap="opBtn" data-val="%">%</view> <view hover-class="bg" bindtap="opBtn" data-val="/">÷</view> </ビュー> <表示> <view hover-class="bg" bindtap="numBtn" data-val="7">7</view> <view hover-class="bg" bindtap="numBtn" data-val="8">8</view> <view hover-class="bg" bindtap="numBtn" data-val="9">9</view> <view hover-class="bg" bindtap="opBtn" data-val="*">×</view> </ビュー> <表示> <view hover-class="bg" bindtap="numBtn" data-val="4">4</view> <view hover-class="bg" bindtap="numBtn" data-val="5">5</view> <view hover-class="bg" bindtap="numBtn" data-val="6">6</view> <view hover-class="bg" bindtap="opBtn" data-val="-">-</view> </ビュー> <表示> <view hover-class="bg" bindtap="numBtn" data-val="1">1</view> <view hover-class="bg" bindtap="numBtn" data-val="2">2</view> <view hover-class="bg" bindtap="numBtn" data-val="3">3</view> <view hover-class="bg" bindtap="opBtn" data-val="+">+</view> </ビュー> <表示> <view hover-class="bg" bindtap="numBtn" data-val="0">0</view> <view hover-class="bg" bindtap="dotBtn">.</view> <view hover-class="bg" bindtap="opBtn" data-val="=">=</view> </ビュー> </ビュー> ページスタイル/* ページ/インデックス/index.wxss */ ページ { ディスプレイ: フレックス; flex-direction: 列; 高さ: 100%; 色: #555; } 。結果 { フレックス: 1; 背景: #f3f6fe; 位置: 相対的; } .結果番号{ 位置: 絶対; フォントサイズ: 27pt; 下部:5vh; 右:3vw; } .結果-op { フォントサイズ: 15pt; 位置: 絶対; 下部:1vh; 右:3vw; } .btns{ フレックス: 1; } /* ボタンのスタイル */ .bg { 背景: rgb(223, 44, 20); } .btns{ フレックス: 1; ディスプレイ: フレックス; flex-direction: 列; フォントサイズ: 17pt; 上境界線: 1rpx 実線 #ccc; 左境界線: 1rpx 実線 #ccc; } .btns > ビュー { フレックス: 1; ディスプレイ: フレックス; } .btns > 表示 > 表示 { フレックスベース: 25%; 右境界線: 1rpx 実線 #ccc; 下部境界線: 1rpx 実線 #ccc; ボックスのサイズ: 境界線ボックス; ディスプレイ: フレックス; アイテムの位置を中央揃えにします。 コンテンツの中央揃え: 中央; } .btns > ビュー:最後の子 > ビュー:最初の子 { フレックスベース: 50%; } .btns > ビュー:最初の子 > ビュー:最初の子 { 色: #f00; } .btns > ビュー > ビュー:最後の子 { 色: #fc8e00; } ページロジックユーティリティ–>calc.js 計算プロセスは、2 つの数値のうち最も大きい 10 の累乗を小数点に掛けて整数に変換し、高精度の計算を実行できるようにし、最後に結果を対応する 10 の累乗で割ります。 例えば // 正確な計算 module.exports = { // 追加: function(arg1, arg2) { 変数 r1, r2, m 試す { r1 = arg1.toString().split(".")[1].length } キャッチ (e) { r1 = 0 } 試す { r2 = arg2.toString().split(".")[1].length } キャッチ (e) { r2 = 0 } // 計算する前にすべての小数を整数に変換します。m は 10 の累乗であり、m = Math.pow(10, Math.max(r1, r2)) に掛ける必要があります。 // 最後に、返すときにmで割ります (arg1 * m + arg2 * m) / m を返す }, // 減算 sub: function(arg1, arg2) { 変数 r1, r2, m, n 試す { r1 = arg1.toString().split(".")[1].length } キャッチ (e) { r1 = 0 } 試す { r2 = arg2.toString().split(".")[1].length } キャッチ (e) { r2 = 0 } m = Math.pow(10, Math.max(r1, r2)) //動的制御精度長さ n = (r1 >= r2) ? r1 : r2 ((arg1 * m - arg2 * m) / m).toFixed(n) を返す }, // mul で乗算: function(arg1, arg2) { var m = 0, s1 = arg1.toString(), s2 = arg2.toString() 試す { m += s1.split(".")[1].length } キャッチ (e) {} 試す { m += s2.split(".")[1].length } キャッチ (e) {} Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m) を返します。 }, // div以外: function(arg1, arg2) { var t1 = 0, t2 = 0、 r1, r2 試す { t1 = arg1.toString().split(".")[1].length } キャッチ (e) {} 試す { t2 = arg2.toString().split(".")[1].length } キャッチ (e) {} r1 = Number(arg1.toString().replace(".", "")) r2 = Number(arg2.toString().replace(".", "")) 戻り値 (r1 / r2) * Math.pow(10, t2 - t1) } } インデックス デジタルクリックイベントハンドラー クリックした数字がゼロでなく、表示がクリアされていない場合は、入力した数値がページ内の数値に連結されます。 //数字ボタンイベント処理関数numBtn: function(e) { var num = e.target.dataset.val if (this.data.num === '0' || this.isClear) { this.setData({ 番号: 番号 }) this.isClear = false } それ以外 { this.setData({ 数値: this.data.num + 数値 }) } }, オペレーターはイベントを処理する // オペレータイベント処理関数 opBtn: function(e) { var op = this.data.op // 前の番号を取得します var num = Number(this.data.num) this.setData({ op: e.target.dataset.val }) if (this.isClear) { 戻る } this.isClear = true if (this.result === null) { this.result = 数値 戻る } (op === '+')の場合{ this.result = calc.add(this.result, num) } そうでない場合 (op === '-') { ...... その他の操作(詳細なコードについては、以下の完全なコードセクションを参照してください) ...... } this.setData({ 数値: this.result + '' }) }, すべてのjs // ページ/インデックス/index.js const calc = require('../../utils/calc.js') ページ({ /** * ページの初期データ */ データ: { 数値: '0', op: '' }, // 結果 result: null, // 数直線をクリアするかどうか/* クリア済み(値は true) 演算子をクリックした後、これを true に変更すると、次に数字を入力するときに、*/ をクリックすると表示がクリアされます。 isClear: false、 //数字ボタンイベント処理関数numBtn: function(e) { var num = e.target.dataset.val this.data.num === '0' の場合、 this.isClear になります。 this.setData({ 番号: 番号 }) this.isClear = false } それ以外 { this.setData({ 数値: this.data.num + 数値 }) } }, // オペレータイベント処理関数 opBtn: function(e) { var op = this.data.op // 前の番号を取得します var num = Number(this.data.num) this.setData({ op: e.target.dataset.val }) if (this.isClear) { 戻る } this.isClear = true if (this.result === null) { this.result = 数値 戻る } (op === '+')の場合{ this.result = calc.add(this.result, num) } そうでない場合 (op === '-') { this.result = calc.sub(this.result, num) } そうでない場合 (op === '*') { this.result = calc.mul(this.result, num) } そうでなければ (op === '/') { this.result = calc.div(this.result, num) } そうでない場合 (op === '%') { this.result = this.result % 数値 } this.setData({ 数値: this.result + '' }) }, // 小数点イベント処理関数 dotBtn: function() { if (this.isClear) { this.setData({ 数値: '0.' }) this.isClear = false 戻る } (this.data.num.indexOf('.') >= 0)の場合{ 戻る } this.setData({ 数値: this.data.num + '.' }) }, // DELボタン処理関数delBtn: function() { var num = this.data.num.substr(0, this.data.num.length - 1) this.setData({ 数値: 数値 === '' ? '0' : 数値 }) }, // C ボタンイベント処理関数 resetBtn: function() { this.result = null this.isClear = false this.setData({ 数値: '0', op: '' }) } }) 事例ダウンロード: WeChat アプレット計算機事例 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: 同じ日の最初の3つのデータを取得するためのMySQLタイムラインデータ
>>: Linux centos7 に phpMyAdmin をインストールするチュートリアル
概要私たちは、双十一に天猫で化粧品を購入する人の平均支出額を知りたい(商品の価格帯を見つけるのに役立...
著者: 丁易出典: https://chengxuzhixin.com/blog/post/mysq...
MySQL 8.0.12 のインストールには 2 日かかり、さまざまな問題が発生しました。以下にまと...
XHTML には多くのタグがありますが、頻繁に使用されるのはごくわずかであり、習得する必要があるのは...
マタタグとは<meta> 要素は、検索エンジン向けの説明やキーワード、更新頻度など、ペー...
この記事では、カルーセルマップの効果を実現するためのjsの具体的なコードを参考までに共有します。具体...
私が最も頻繁に使用するコマンドは次の通りです:選択肢CDギットls ssh須藤数週間前、私はこの R...
目次1. データベースエンジン1.1 ビューデータベースエンジン1.2 デフォルトのデータベースエン...
1. はじめにデータベース内のデータ量が一定レベルに達すると、システムパフォーマンスのボトルネックを...
目次自動インクリメント ID を更新する理由は何ですか?質問解決方法これは私が知っている問題ですが、...
1.位置:固定一部の Web サイトの右下隅にあるポップアップ ウィンドウなどの、ブラウザーを基準と...
指定されたテーブルからデータをエクスポートするMySQLの詳細な説明必要とする: 1. テーブルはす...
ファイアウォールファイアウォールは一連のルールです。パケットが保護されたネットワーク空間に出入りする...
暗い背景スタイルのページ デザインは非常に人気があり、シックでエレガント、そして非常にクリエイティブ...
#include <asm/io.h> #define ioremap(cookie,...