微信小程序計(jì)算器實(shí)例詳解
微信小程序計(jì)算器實(shí)例,供大家參考,具體內(nèi)容如下
index.wxml
<view class="content"> <view class="num">{{num}}</view> <view class="operotor">{{op}}</view> </view> <view class="entry"> <view> <view class="item" bindtap="resetBtn">c</view> <view class="item" bindtap="delBtn">DEL</view> <view class="item" bindtap="opBtn" data-val="%">%</view> <view class="item" bindtap="opBtn" data-val="/">÷</view> </view> <view> <view class="item" bindtap="numBtn" data-val="7">7</view> <view class="item" bindtap="numBtn" data-val="8">8</view> <view class="item" bindtap="numBtn" data-val="9">9</view> <view class="item" bindtap="opBtn" data-val="*">x</view> </view> <view> <view class="item" bindtap="numBtn" data-val="4">4</view> <view class="item" bindtap="numBtn" data-val="5">5</view> <view class="item" bindtap="numBtn" data-val="6">6</view> <view class="item" bindtap="opBtn" data-val="-">-</view> </view> <view> <view class="item" bindtap="numBtn" data-val="1">1</view> <view class="item" bindtap="numBtn" data-val="2">2</view> <view class="item" bindtap="numBtn" data-val="3">3</view> <view class="item" bindtap="opBtn" data-val="+">+</view> </view> <view> <view class="item tow" bindtap="numBtn" data-val="0">0</view> <view class="item one" bindtap="dotBtn" data-val=".">.</view> <view class="item one" bindtap="opBtn" data-val="=">=</view> </view> </view>
index.css
page { display: flex; flex-direction: column; height: 100%; } .content { flex: 1; background-color: #f3f6fe; position: relative; } .content .num { position: absolute; font-size: 27pt; bottom: 5vh; right: 3vw; } .content .operotor { font-size: 15pt; position: absolute; bottom: 1vh; right: 3vw; } .entry { flex: 1; font-size: 17pt; border-top: 1rpx solid #ccc; } .entry .item { flex: 1; padding: 30rpx 0; text-align: center; flex-basis: 25%; border-left: 1rpx solid #ccc; border-bottom: 1rpx solid #ccc; } .entry > view { display: flex; } .entry > view .tow { flex: 2; } .entry > view .one { flex: 1; }
index.js
Page({ data: { num: "", // 存儲(chǔ)數(shù)字 op: "" //存儲(chǔ)運(yùn)算符 }, result: null, isClear: false, numBtn: function(e) { var num = e.target.dataset.val //console.log(num) 得到data-val的值 console.log(this.isClear) if (this.data.num === "0" || this.isClear) { this.setData({ num: num }) this.isClear = false } else { this.setData({ num: this.data.num + 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) { return } this.isClear = true if (this.result === null) { this.result = num return } if (op === "+") { this.result = this.result + num } else if (op === "-") { this.result = this.result - num } else if (op === "*") { this.result = this.result * num } else if (op === "/") { this.result = this.result / num } else if (op === "%") { this.result = this.result % num } this.setData({ num: this.result }) }, 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 + "." }) }, delBtn: function() { var num = this.data.num.substr(0, this.data.num.length - 1) this.setData({ num: num === "" ? "0" : num }) }, resetBtn: function() { this.result = null this.isClear = false this.setData({ num: "0", op: "" }) } })
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 微信小程序 簡(jiǎn)易計(jì)算器實(shí)現(xiàn)代碼實(shí)例
- 微信小程序?qū)崿F(xiàn)計(jì)算器功能
- 微信小程序?qū)崿F(xiàn)簡(jiǎn)易計(jì)算器
- 用微信小程序?qū)崿F(xiàn)計(jì)算器功能
- 微信小程序?qū)崿F(xiàn)簡(jiǎn)易計(jì)算器
- 微信小程序?qū)崿F(xiàn)計(jì)算器小功能
- 微信小程序?qū)崿F(xiàn)小型計(jì)算器
- 微信小程序?qū)崿F(xiàn)計(jì)算器案例
- 微信小程序?qū)崿F(xiàn)簡(jiǎn)單計(jì)算器
- 微信小程序計(jì)算器實(shí)現(xiàn)案例詳解
相關(guān)文章
js跨域請(qǐng)求數(shù)據(jù)的3種常用的方法
這篇文章主要介紹了js跨域請(qǐng)求數(shù)據(jù)的3種常用的方法,需要的朋友可以參考下2015-12-12three.js顯示中文字體與tween應(yīng)用詳析
這篇文章主要給大家介紹了關(guān)于three.js顯示中文字體與tween應(yīng)用的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01JavaScript對(duì)象的特性與實(shí)踐應(yīng)用深入詳解
這篇文章主要介紹了JavaScript對(duì)象的特性與實(shí)踐應(yīng)用,結(jié)合實(shí)例形式較為深入的分析了javascript對(duì)象的相關(guān)概念、操作方法及注意事項(xiàng),需要的朋友可以參考下2018-12-12JavaScript 字符串處理函數(shù)使用小結(jié)
JavaScript 字符串處理函數(shù)使用小結(jié),學(xué)習(xí)js的朋友可以參考下。2010-12-12options預(yù)檢請(qǐng)求的前后端解決方式詳解
這篇文章主要為大家介紹了options預(yù)檢請(qǐng)求的前后端解決方式詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04淺析AMD CMD CommonJS規(guī)范--javascript模塊化加載學(xué)習(xí)心得總結(jié)
下面小編就為大家分享一篇淺析AMD CMD CommonJS規(guī)范--javascript模塊化加載學(xué)習(xí)心得總結(jié)。小編覺得寫的非常不錯(cuò),需要的朋友可以過(guò)來(lái)參考一下2016-03-03通用javascript代碼判斷版本號(hào)是否在版本范圍之間
通用判斷版本號(hào)是否在兩者之間,也可以搭配判斷是否大于某版本號(hào),小于取反即可,本文給大家介紹通用javascript代碼判斷版本號(hào)是否在版本范圍之間,需要的朋友參考下2015-11-11原生JS版和jquery版實(shí)現(xiàn)checkbox的全選/全不選/點(diǎn)選/行內(nèi)點(diǎn)選(Mr.Think)
腳本之家小編之前整理不少checkbox全選全不選這方便的文章,但看了這篇以后發(fā)現(xiàn)實(shí)現(xiàn)方法更好2016-10-10