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

微信小程序?qū)崿F(xiàn)簡易計算器功能

 更新時間：2022年09月08日 15:26:15   作者：沐小俠  
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡易計算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序?qū)崿F(xiàn)簡易計算器的具體代碼，供大家參考，具體內(nèi)容如下

實現(xiàn)代碼：

<!--pages/computer.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" data-val="7" bindtap="numBtn">7</view>
? ? ? ? <view hover-class="bg" data-val="8" bindtap="numBtn">8</view>
? ? ? ? <view hover-class="bg" data-val="9" bindtap="numBtn">9</view>
? ? ? ? <view hover-class="bg" bindtap="opBtn" data-val="*">×</view>
? ? </view>
? ? <view>
? ? ? ? <view hover-class="bg" data-val="4" bindtap="numBtn">4</view>
? ? ? ? <view hover-class="bg" data-val="5" bindtap="numBtn">5</view>
? ? ? ? <view hover-class="bg" data-val="6" bindtap="numBtn">6</view>
? ? ? ? <view hover-class="bg" bindtap="opBtn" data-val="-">-</view>
? ? </view>
? ? <view>
? ? ? ? <view hover-class="bg" data-val="1" bindtap="numBtn">1</view>
? ? ? ? <view hover-class="bg" data-val="2" bindtap="numBtn">2</view>
? ? ? ? <view hover-class="bg" data-val="3" bindtap="numBtn">3</view>
? ? ? ? <view hover-class="bg" bindtap="opBtn" data-val="+">+</view>
? ? </view>
? ? <view>
? ? ? ? <view hover-class="bg" data-val="0" bindtap="numBtn">0</view>
? ? ? ? <view hover-class="bg" bindtap="dotBtn">.</view>
? ? ? ? <view hover-class="bg" bindtap="opBtn" data-val="=">=</view>
? ? </view>
</view>
/* pages/computer.wxss */
page{
? ? display: flex;
? ? flex-direction: column;
? ? height: 100%
}
.result{
? ? flex: 1;
? ? background-color: #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;
? ? display: flex;
? ? flex-direction: column;
? ? font-size: 17pt;
? ? border-top: 1px solid #ccc;
? ? border-left: 1px solid #ccc;
}
.btns>view{
? ? flex: 1;
? ? display: flex;
}
.btns>view>view{
? ? flex:1;
? ? border-right: 1px solid #ccc;
? ? border-bottom: 1px solid #ccc;
? ? box-sizing: border-box;
? ? display: flex;
? ? align-items: center;
? ? justify-content: center;
}
.btns>view:last-child>view:first-child{
? ? flex: 2;
}
.btns>view:first-child>view:first-child{
? ? color: #f00;
}
.btns>view>view:last-child{
? ? color: #fc8e00;
}
.bg{
? ? background-color: #eee;
}
// pages/computer.js
Page({

? ? /**
? ? ?* 頁面的初始數(shù)據(jù)
? ? ?*/
? ? data: {
? ? ? ? num:'0',
? ? ? ? op:''
? ? },
? ? 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})
? ? ? ?}
? ? },
? ? opBtn:function(e){
? ? ? ? var op = this.data.op
? ? ? ? var num = Number(this.data.num)
? ? ? ? var val = e.target.dataset.val
? ? ? ? if(val==='/'){
? ? ? ? ? ? this.setData({op:'÷'})
? ? ? ? }else if(val==='*'){
? ? ? ? ? ? this.setData({op:'×'})
? ? ? ? }else{
? ? ? ? ? ? this.setData({op:val})
? ? ? ? }
? ? ? ? //用于多次按計算按鈕時，避免重復(fù)計算的問題
? ? ? ? if(this.isClear){
? ? ? ? ? ? return
? ? ? ? }
? ? ? ? this.isClear=true
? ? ? ? if(this.result===null||this.result===undefined){
? ? ? ? ? ? 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).toFixed(2)
? ? ? ? }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 temp = this.data.num.toString()
? ? ? ? var num = temp.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:''})
? ? }
})

computer.json

{
? "navigationBarTitleText":"計算器",
? "navigationBarBackgroundColor":"#fff",
? "navigationBarTextStyle":"black",
? "usingComponents": {}
?
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論