微信小程序?qū)崿F(xiàn)小型計(jì)算器
更新時(shí)間：2022年09月09日 16:23:04 作者：richest_qi
這篇文章主要為大家詳細(xì)
介紹了微信小程序?qū)崿F(xiàn)小型計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
介紹了微信小程序?qū)崿F(xiàn)小型計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)小型計(jì)算器的具體代碼，供大家參考，具體內(nèi)容如下
app.js
// app.js
App({
? onLaunch() {
? },
? REGEXP:/^[\+\-×÷]$/
})app.wxss
/**app.wxss**/
.container {
? height: 100%;
? display: flex;
? flex-direction: column;
? align-items: center;
? justify-content: space-between;
? padding: 200rpx 0;
? box-sizing: border-box;
}?index.html
<!--index.wxml-->
<view class="result">
? <view class="result-express">{{express}}</view>
? <view class="result-value">{{result}}</view>
</view>
<view class="btns">
? <view class="item">
? ? <view class="reset" hover-class="bg" bindtap="reset">C</view>
? ? <view class="devide" hover-class="bg" bindtap="clickNumBtn" data-val="7">7</view>
? ? <view class="multiply" hover-class="bg" bindtap="clickNumBtn" data-val="4">4</view>
? ? <view class="delete" hover-class="bg" bindtap="clickNumBtn" data-val="1">1</view>
? ? <view class="percent" hover-class="bg" bindtap="clickNumBtn" data-val="%">%</view>
? </view>
? <view class="item">
? ? <view class="devide" hover-class="bg" bindtap="clickOptBtn" data-val="÷">÷</view>
? ? <view class="eight" hover-class="bg" bindtap="clickNumBtn" data-val="8">8</view>
? ? <view class="five" hover-class="bg" bindtap="clickNumBtn" data-val="5">5</view>
? ? <view class="two" hover-class="bg" bindtap="clickNumBtn" data-val="2">2</view>
? ? <view class="zero" hover-class="bg" bindtap="clickNumBtn" data-val="0">0</view>
? </view>
? <view class="item">
? ? <view class="multiply" hover-class="bg" bindtap="clickOptBtn" data-val="×">×</view>
? ? <view class="nine" hover-class="bg" bindtap="clickNumBtn" data-val="9">9</view>
? ? <view class="six" hover-class="bg" bindtap="clickNumBtn" data-val="6">6</view>
? ? <view class="three" hover-class="bg" bindtap="clickNumBtn" data-val="3">3</view>
? ? <view class="dot" hover-class="bg" bindtap="clickNumBtn" data-val=".">.</view>
? </view>
? <view class="item">
? ? <view class="delete" hover-class="bg" bindtap="delete">DEL</view>
? ? <view class="subtract" hover-class="bg" bindtap="clickOptBtn" data-val="-">-</view>
? ? <view class="add" hover-class="bg" bindtap="clickOptBtn" data-val="+">+</view>
? ? <view class="equal" hover-class="bg" bindtap="equal">=</view>
? </view>
</view>index.wxss
/* index.wxss */
page{
? display: flex;
? flex-direction: column;
? height: 100%;
}
.result,.btns{
? flex: 1;
}
.result{
? background: #f3f6fe;
}
.btns{
? display: flex;
? flex-direction: row;
}
.item{
? flex-basis: 25%;
? display: flex;
? flex-direction: column;
}
.item view{
? flex-basis: 20%;
? border-bottom: 1rpx solid #eee;
? border-right: 1rpx solid #eee;
? display: flex;
? justify-content: center;
? align-items: center;
? box-sizing: border-box;
? font-size: 17pt;
}
.item view:first-child{
? color: rgb(41, 192, 252);
}
.item:last-child view{
? color: rgb(41, 192, 252);
}
.item view.equal{
? flex-basis:40%;
? background-color: rgb(41, 192, 252);
? color:#fff;
}
.bg{
? background-color: #eee;
}
.result{
? position: relative;
}
.result-express{
? position: absolute;
? bottom:5vh;
? right: 3vw;
? font-size: 27pt;
}
.result-value{
? position: absolute;
? bottom: 1vh;
? right: 3vw;
? font-size: 16pt;
? color: darkgray;
}index.js
// index.js
const app = getApp();
const {REGEXP} = app;
Page({
? data:{
? ? express:"",
? ? result:"",
? ? isEqualBtnClicked:false
? },
? reset:function(e){
? ? this.setData({
? ? ? express:"",
? ? ? result:"",
? ? ? isEqualBtnClicked:false
? ? })
? },
? preProcess:function(express){
? ? if(REGEXP.test(express[express.length-1])){
? ? ? express = express.slice(0,express.length-1);
? ? }
? ? return express;
? },
? delete:function(){
? ? const {express} = this.data;
? ? let newExpress = express.slice(0,express.length-1);
? ? let expressForCalc = this.preProcess(newExpress);
? ? let temp = this.calculate(expressForCalc);
? ? let newResult = temp==="0"?"":temp;
? ? this.setData({
? ? ? express:newExpress,
? ? ? result:newResult
? ? })
? },
? equal:function(){
? ? const {express} = this.data;
? ? let expressForCalc = this.preProcess(express);
? ? this.setData({
? ? ? result:"",
? ? ? express:this.calculate(expressForCalc),
? ? ? isEqualBtnClicked:true
? ? })
? },
? clickNumBtn:function(e){
? ? const val = e.target.dataset.val;
? ? let {express} = this.data;
? ? express+=val;
? ? this.setData({
? ? ? express:express,
? ? ? result:this.calculate(express)
? ? },function(){
? ? ? console.log(`click numBtn,current express: ${this.data.express},it'time to get result:${this.calculate(express)}`);
??
? ? })
? },
? clickOptBtn:function(e){
? ? let {express} = this.data;
? ? if(express==="" || REGEXP.test(express[express.length-1])) return;
? ? const opt = e.target.dataset.val;
? ? express+=opt;
? ? this.setData({
? ? ? express:express
? ? },function(){
? ? ? console.log("click optBtn,current express:",this.data.express);
? ? })
? },
? getLeftAndRight:function(express,i){
? ? const REGEXP = /\d+(\.\d+)?/;
? ? const REGEXP2 = /[\+\-×÷]/;
? ? let front = express.slice(0,i);
? ? let back = express.slice(i+1);
??
? ? let temp = front.split(REGEXP2);
? ? let left = Number(temp[temp.length-1]);
??
? ? let right = Number(back.match(REGEXP)[0]);
??
? ? return {left,right};
? },
? calculate:function(express){
? ? const REGEXP1 = /[×÷]/;
? ? const REGEXP2 = /\+(\d+)(\.\d+)?/;//正數(shù)
? ? const REGEXP3 = /\-(\d+)(\.\d+)?/;//負(fù)數(shù)
? ? const REGEXP4 = /\d+(\.\d+)?/; ?
? ? const {getLeftAndRight} = this;
??
? ? let temp;
? ? let result = 0;
??
? ? //先乘除
? ? while((temp = express.match(REGEXP1)) !== null){
? ? ? let opt = temp[0];
? ? ? let i = temp["index"];
? ? ? let {left,right} = getLeftAndRight(express,i);
? ? ? switch(opt){
? ? ? ? case "×":express = express.replace(left+opt+right,left*right);break;
? ? ? ? case "÷":express = express.replace(left+opt+right,left/right);break;
? ? ? }
? ? }
??
? ? //后加減
? ? let firstNum = 0,sum1=0,sum2=0;
??
? ? let res = express.match(REGEXP4);
? ? if(res!==null && res["index"]===0){
? ? ? let str = res[0];
? ? ? firstNum = Number(str);
? ? ? express = express.slice(str.length);
? ? }
??
? ? while((temp = express.match(REGEXP2)) != null){
? ? ? let str = temp[0];
? ? ? express = express.replace(str,"");
? ? ? sum1 += Number(str.slice(1));
? ? }
? ? while((temp = express.match(REGEXP3)) != null){
? ? ? let str = temp[0];
? ? ? express = express.replace(str,"");
? ? ? sum2 += Number(str.slice(1));
? ? }
? ??
? ? result += firstNum + sum1 - sum2;
? ??
? ? return result.toString();
? }
})測試驗(yàn)證
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
理運(yùn)用命名空間讓js不產(chǎn)生沖突避免全局變量的泛濫
為了避免變量之間的覆蓋與沖突，可以生成命名空間，命名空間是一種特殊的前綴，在不同的匿名函數(shù)中，根據(jù)功能聲明一個(gè)不同的命名空間2014-06-06
chrome瀏覽器如何斷點(diǎn)調(diào)試異步加載的JS
chrome瀏覽器不僅僅可以用來上網(wǎng)，對(duì)于開發(fā)人員來說，它更像是一款強(qiáng)大的開發(fā)輔助工具。今天這篇文章給大家分享在chrome瀏覽器如何斷點(diǎn)調(diào)試異步加載的JS，有需要的可以參考借鑒。2016-09-09
js遍歷獲取表格內(nèi)數(shù)據(jù)的方法(必看)
下面小編就為大家?guī)硪黄猨s遍歷獲取表格內(nèi)數(shù)據(jù)的方法(必看)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04
微信小程序?qū)崿F(xiàn)九宮格翻牌動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)九宮格翻牌動(dòng)畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
JS Array.from()將偽數(shù)組轉(zhuǎn)換成數(shù)組的方法示例
這篇文章主要介紹了JS Array.from()將偽數(shù)組轉(zhuǎn)換成數(shù)組的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
JavaScript判斷textarea值是否為空并給出相應(yīng)提示
假如用戶沒有輸入數(shù)據(jù)則給出相應(yīng)提示，那么該如何來判斷呢？下面以判斷textarea值是否為空為例2014-09-09
基于Bootstrap使用jQuery實(shí)現(xiàn)簡單可編輯表格
這篇文章主要介紹了基于Bootstrap使用jQuery實(shí)現(xiàn)簡單可編輯表格的相關(guān)資料,需要的朋友可以參考下2016-05-05
下面小編就為大家?guī)硪黄宄秊g覽器緩存的幾種方法總結(jié)(必看)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-12-12
JavaScript創(chuàng)建數(shù)組的方法詳解
這篇文章主要為大家介紹了JavaScript創(chuàng)建數(shù)組的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
Javascript判斷文件是否存在(客戶端/服務(wù)器端)
這篇文章主要介紹了Javascript判斷文件是否存在的方法適用于客戶端、服務(wù)器端，遠(yuǎn)程文件，示例代碼如下,需要的朋友可以參考下2014-09-09