この記事では、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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: Windows 10 の仮想マシンに Mac システムをインストールするグラフィック チュートリアル
目次1. 数値型1.1 数値型の分類1.1.1 浮動小数点数1.1.2 ビットタイプ1.1.3 時間...
<br />関連記事: ハイパーリンクを表示して開く方法症状<br />ユー...
目次1. 要素の入手方法文書から入手ID取得クラス名 (className) を取得します。タグ名 ...
この記事では、JavaScriptで全選択と全選択解除の操作を実装するための具体的なコードを参考まで...
ブラウザがHTMLを読み込みレンダリングする順序1. IE は上から下へダウンロードし、上から下へレ...
目次1. シーンレイアウト2. ハンドルリスナーを追加する1. イベントの変更を監視する2. 座標設...
目次1. はじめに2. 自己増分ストレージの説明3つの自己付加価値修正メカニズム4. 自己評価を修正...
目次序文メタデータとは参照文書アドレスまずはMySQLについてお話しましょうOracleについて話し...
marquee タグを使用してフォントのスクロールを設定したいです。コードは次のように記述しましたが...
プロジェクトを実行すると、リアルタイム更新、広告アニメーションの連続表示などの要件に遭遇することは避...
<br />私の仕事で使用しているアノテーションの書き方の基準をまとめました。技術的な内...
<br />以前、「コンテンツページ番号のプレビューナビゲーション」と「写真プレビューナ...
目次1. 次のコードはwatchの簡単な使用法です2. 即時監視3. ハンドラメソッド4. 深い属性...
MySQLデータベースの接続が多すぎますこのエラーは明らかに、mysql_connect の後に m...
序文プロジェクトを開発しているときに、かなり厄介な問題に遭遇しました。この製品では、判断のためにブラ...