欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序計(jì)算器實(shí)現(xiàn)案例詳解

 更新時(shí)間：2023年06月16日 09:51:19   作者：顏顏yan_  
最近繼續(xù)玩一些微信小程序的api來做例子,感覺自己可能創(chuàng)造力不很足,只能模仿著別人的例子來做一個(gè)自己的計(jì)算器了,下面這篇文章主要給大家介紹了關(guān)于微信小程序計(jì)算器實(shí)現(xiàn)案例的相關(guān)資料,需要的朋友可以參考下

前言

嗨嗨嗨，好久沒更新小程序?qū)诹?，本期淺淺用小程序?qū)懸粋€(gè)計(jì)算器。

實(shí)現(xiàn)效果

實(shí)現(xiàn)步驟

新建一個(gè)項(xiàng)目，在app.json中配置文件導(dǎo)航欄的標(biāo)題和顏色。

先在index.wxml中編寫計(jì)算器頁面的外層結(jié)構(gòu)，也就是兩個(gè)view，第一個(gè)view顯示數(shù)字和運(yùn)算符，第二個(gè)view顯示各種按鈕。
然后在index.wxss中添加樣式。在page（整體頁面）中使用flex布局，將result和btns的flex設(shè)置為1，實(shí)現(xiàn)兩個(gè)view平分頁面的效果。

<view class="result"></view>
<view class="btns"></view>
page{
    display: flex;
    flex-direction: column;
    height: 100%;
}
.result{
    flex: 1;
    background-color: #e0e0e0;
}
.btns{
    flex: 1;
}

wxml

接下來我們來編寫頁面內(nèi)容。我們可以先觀察計(jì)算器的布局，計(jì)算器的布局是5行4列，所以我們先寫5個(gè)view組件表示5行，每個(gè)view中分別添加4個(gè)view表示4列。每個(gè)view表示計(jì)算器的不同按鍵。給每個(gè)按鍵定義數(shù)據(jù)data-val。
上半部分只有兩個(gè)view組件，分別是用戶輸入的數(shù)字和需要的操作，這里需要綁定數(shù)據(jù)num和op
知識(shí)點(diǎn)： view組件的hover-class屬性表示該組件按下時(shí)的class樣式。

<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="*">x</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>

wxss

接下來編寫樣式啦，利用flex布局實(shí)現(xiàn)按鈕根據(jù)容器的大小自動(dòng)平分寬度和高度，設(shè)置flex-basis:“50%”;用于使按鈕“0”占用兩個(gè)按鈕的寬度。

page{
    display: flex;
    flex-direction: column;
    height: 100%;
}
.result{
    flex: 1;
    background-color: #e0e0e0;
    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;
    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: red;
}
.btns > view >view:last-child{
    color: #fc8e00;
}
.bg{
    background: #ccc;
}

頁面效果如下：

js

數(shù)字按鈕事件處理函數(shù)

  1. 添加數(shù)字按鈕事件實(shí)現(xiàn)數(shù)字的輸入，先設(shè)置值，即num和op。
  2. 設(shè)置result和isClear，其中result用來保存上次運(yùn)算結(jié)果。isClear表示輸入的數(shù)字是否替代當(dāng)前的數(shù)字，如果isClear的值為false，則表示下次輸入的數(shù)字放在當(dāng)前顯示數(shù)字的末尾；如果isClear的值為true，則表示下次輸入的數(shù)字替代當(dāng)前的數(shù)字。
  3. 判斷當(dāng)前輸入的數(shù)字是否為0。如果為0，則設(shè)置num的值為0；否則設(shè)置num的值為當(dāng)前輸入的值。
Page({
    data: {
        num: '',
        op: '',
    },
    // 數(shù)字按鈕處理事件
    // 保存上次運(yùn)算結(jié)果
    result: null,
    isClear: false,
    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});
        }
    }
})

計(jì)算按鈕處理事件

  • 獲取當(dāng)前輸入的數(shù)字和符號(hào)；
  • 判斷是否重復(fù)計(jì)算；
  • 判斷符號(hào)是什么，當(dāng)符號(hào)為+時(shí)，返回的結(jié)果就是當(dāng)前數(shù)字加上添加的數(shù)字；當(dāng)符號(hào)為-時(shí)，返回的結(jié)果就是當(dāng)前數(shù)字減去添加的數(shù)字…
// 計(jì)算按鈕事件
    opBtn:function(e){
        var op = this.data.op;
        var num = Number(this.data.num);
        this.setData({op:e.target.dataset.val});
        //判斷是否重復(fù)計(jì)算
        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 + ''})
    },

清空數(shù)字、刪除數(shù)字、添加“.”事件處理函數(shù)

  // 清空數(shù)字、刪除數(shù)字、添加“.”事件處理函數(shù)
    dotBtn:function(){
        if(this.isClear){
            this.setData({num:'0.'});
            this.isClear =  false;
            return
        }
        if(this.data.num.indexOf('.' >=0)){
            return
        }
    },
    delBtn:function(){
        var num = this.data.num.substr(0,this.data.num.length - 1);
        this.result = num;
        this.setData({num:num === ''?'0':num})
    },
    resBtn:function(){
        this.result = null;
        this.isClear = false;
        this.setData({num:'0',op:''})
    }
})

總結(jié)

到此這篇關(guān)于微信小程序計(jì)算器實(shí)現(xiàn)案例的文章就介紹到這了,更多相關(guān)微信小程序計(jì)算器案例內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論