微信小程序?qū)崿F(xiàn)計算器案例
更新時間:2021年07月19日 13:49:22 作者:流楚丶格念
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)計算器案例,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序?qū)崿F(xiàn)計算器的具體代碼,供大家參考,具體內(nèi)容如下
項目展示
頁面設計
分為上面輸入的顯示部分和下面按鍵部分
<!--pages/index/index.wxml--> <view class="result"> <view class="result-num">{{num}}</view> <view class="result-op">{{op}}</view> </view> <view class="btns"> <view> <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> <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> <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> <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> <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> </view> </view>
頁面樣式
/* pages/index/index.wxss */ page { display: flex; flex-direction: column; height: 100%; color: #555; } .result { flex: 1; background: #f3f6fe; position: relative; } .result-num { position: absolute; font-size: 27pt; bottom: 5vh; right: 3vw; } .result-op { font-size: 15pt; position: absolute; bottom: 1vh; right: 3vw; } .btns { flex: 1; } /* 按鈕樣式 */ .bg { background: rgb(223, 44, 20); } .btns { flex: 1; display: flex; flex-direction: column; font-size: 17pt; border-top: 1rpx solid #ccc; border-left: 1rpx solid #ccc; } .btns > view { flex: 1; display: flex; } .btns > view > view { flex-basis: 25%; border-right: 1rpx solid #ccc; border-bottom: 1rpx solid #ccc; box-sizing: border-box; display: flex; align-items: center; justify-content: center; } .btns > view:last-child > view:first-child { flex-basis: 50%; } .btns > view:first-child > view:first-child { color: #f00; } .btns > view > view:last-child { color: #fc8e00; }
頁面邏輯
util–>calc.js
計算過程是將小數(shù)都乘以兩數(shù)10的最大次冪化為整數(shù),這樣可進行高精度計算,最后再將得數(shù)除以相應的10的次冪
例如
// 精確計算 module.exports = { // 加 add: function(arg1, arg2) { var r1, r2, m try { r1 = arg1.toString().split(".")[1].length } catch (e) { r1 = 0 } try { r2 = arg2.toString().split(".")[1].length } catch (e) { r2 = 0 } // 將小數(shù)都化為整數(shù)在進行計算 m是需要×的10的冪數(shù) m = Math.pow(10, Math.max(r1, r2)) // 最后返回的時候再除以m return (arg1 * m + arg2 * m) / m }, // 減 sub: function(arg1, arg2) { var r1, r2, m, n try { r1 = arg1.toString().split(".")[1].length } catch (e) { r1 = 0 } try { r2 = arg2.toString().split(".")[1].length } catch (e) { r2 = 0 } m = Math.pow(10, Math.max(r1, r2)) //動態(tài)控制精度長度 n = (r1 >= r2) ? r1 : r2 return ((arg1 * m - arg2 * m) / m).toFixed(n) }, // 乘 mul: function(arg1, arg2) { var m = 0, s1 = arg1.toString(), s2 = arg2.toString() try { m += s1.split(".")[1].length } catch (e) {} try { m += s2.split(".")[1].length } catch (e) {} return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m) }, // 除 div: function(arg1, arg2) { var t1 = 0, t2 = 0, r1, r2 try { t1 = arg1.toString().split(".")[1].length } catch (e) {} try { t2 = arg2.toString().split(".")[1].length } catch (e) {} r1 = Number(arg1.toString().replace(".", "")) r2 = Number(arg2.toString().replace(".", "")) return (r1 / r2) * Math.pow(10, t2 - t1) } }
index.js
數(shù)字點擊處理事件
當點擊數(shù)字不為零,并且指示不清空時候,將輸入的num拼接到page里的num
// 數(shù)字按鈕事件處理函數(shù) numBtn: function(e) { var num = e.target.dataset.val if (this.data.num === '0' || this.isClear) { this.setData({ num: num }) this.isClear = false } else { this.setData({ num: this.data.num + num }) } },
運算符處理事件
// 運算符事件處理函數(shù) opBtn: function(e) { var op = this.data.op // 獲取之前的數(shù) var num = Number(this.data.num) this.setData({ op: e.target.dataset.val }) if (this.isClear) { return } this.isClear = true if (this.result === null) { this.result = num return } if (op === '+') { this.result = calc.add(this.result, num) } else if (op === '-') { ...... 其他運算操作(詳細代碼看下面完整代碼部分) ...... } this.setData({ num: this.result + '' }) },
全部js
// pages/index/index.js const calc = require('../../utils/calc.js') Page({ /** * 頁面的初始數(shù)據(jù) */ data: { num: '0', op: '' }, // 結果 result: null, // 是否清空數(shù)字行 /* 清空的情況(值為true) 點擊過運算符之后,改為true 以便下一次輸入數(shù)字顯示 點擊清空 */ isClear: false, // 數(shù)字按鈕事件處理函數(shù) numBtn: function(e) { var num = e.target.dataset.val if (this.data.num === '0' || this.isClear) { this.setData({ num: num }) this.isClear = false } else { this.setData({ num: this.data.num + num }) } }, // 運算符事件處理函數(shù) opBtn: function(e) { var op = this.data.op // 獲取之前的數(shù) var num = Number(this.data.num) this.setData({ op: e.target.dataset.val }) if (this.isClear) { return } this.isClear = true if (this.result === null) { this.result = num return } if (op === '+') { this.result = calc.add(this.result, num) } else if (op === '-') { this.result = calc.sub(this.result, num) } else if (op === '*') { this.result = calc.mul(this.result, num) } else if (op === '/') { this.result = calc.div(this.result, num) } else if (op === '%') { this.result = this.result % num } this.setData({ num: this.result + '' }) }, // 小數(shù)點事件處理函數(shù) dotBtn: function() { if (this.isClear) { this.setData({ num: '0.' }) this.isClear = false return } if (this.data.num.indexOf('.') >= 0) { return } this.setData({ num: this.data.num + '.' }) }, // DEL按鈕處理函數(shù) delBtn: function() { var num = this.data.num.substr(0, this.data.num.length - 1) this.setData({ num: num === '' ? '0' : num }) }, // C按鈕事件處理函數(shù) resetBtn: function() { this.result = null this.isClear = false this.setData({ num: '0', op: '' }) } })
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
javascript與asp.net(c#)互相調(diào)用方法
js與C#之間相互調(diào)用的一些方法2009-12-12JavaScript中的canvas?實現(xiàn)一個圓環(huán)漸變倒計時效果
這篇文章主要介紹了JavaScript中的canvas?實現(xiàn)一個圓環(huán)漸變倒計時效果,文章圍繞主題展開詳細的內(nèi)容介紹,具有一定的參考價值,需要的小伙伴可以參考一下2022-09-09