위 챗 애플 릿 은 간단 한 계산기 기능 을 실현 한다.
wxml
<view class='content'>
<input value='{{calculation}}'></input>
<view class='box'>
<button class='yellow-color'> </button>
<button class='yellow-color' bindtap='empty'> </button>
<button class='yellow-color'>❤</button>
<button bindtap='add' data-text='+' class='yellow-color'>+</button>
</view>
<view class='box'>
<button bindtap='add' data-text='9'>9</button>
<button bindtap='add' data-text='8'>8</button>
<button bindtap='add' data-text='7'>7</button>
<button bindtap='add' class='yellow-color' data-text='-'>-</button>
</view>
<view class='box'>
<button bindtap='add' data-text='6'>6</button>
<button bindtap='add' data-text='5'>5</button>
<button bindtap='add' data-text='4'>4</button>
<button bindtap='add' class='yellow-color' data-text='*'>*</button>
</view>
<view class='box'>
<button bindtap='add' data-text='3'>3</button>
<button bindtap='add' data-text='2'>2</button>
<button bindtap='add' data-text='1'>1</button>
<button bindtap='add' data-text='/' class='yellow-color'>÷</button>
</view>
<view class='box'>
<button bindtap='add' data-text='0'>0</button>
<button bindtap='add' data-text='.'>.</button>
<button> </button>
<button class='yellow-color' bindtap='res'>=</button>
</view>
</view>
wxss
input {
width: 95%;
height: 250rpx;
margin: 0 auto;
margin-bottom: 20rpx;
border-bottom: 1rpx solid #ccc;
}
.box {
display: flex;
}
button {
width: 20%;
height: 150rpx;
margin-bottom: 20rpx;
line-height: 150rpx;
background-color:rgb(0, 150, 250);
color: white;
}
.yellow-color {
background-color: rgb(247, 142, 24)
}
JS
//index.js
//
const app = getApp()
Page({
data: {
calculation:"",
result:0,
character:[], //
operand: [], //
temp:false
},
//
add:function(e) {
let input = e.currentTarget.dataset.text;
var that = this;
if (input == '+' || input == '-' || input == '*' || input == '/') {
this.data.temp = false; //
var item = 'character[' + this.data.character.length+ ']';
this.setData({
[item] :input
})
} else {
var item = 'operand['+this.data.operand.length+']';
if(that.data.temp) {
//
var res = 'operand[' + (this.data.operand.length-1) + ']'
var ress= that.data.operand.length-1;
var xyz = that.data.operand[ress] * 10 + parseInt(input);
that.setData({
[res]:xyz
})
} else {
input = parseInt(input);
that.data.temp = true;
that.setData({
[item]: input
})
}
}
//
this.setData({
calculation:this.data.calculation+input
})
},
//
res:function() {
console.log(this.data.character.length);
console.log(this.data.operand.length)
var character_len = this.data.character.length ;
var operand_len = this.data.operand.length;
console.log(operand_len - character_len)
if(operand_len - character_len == 1) {
this.data.result = this.data.operand[0];
console.log(" "+this.data.result);
for(var i=0;i<character_len;i++) {
if(this.data.character[i] == '+') {
this.data.result = this.data.result + this.data.operand[i + 1];
}
if (this.data.character[i] == '-') {
this.data.result = this.data.result - this.data.operand[i + 1];
}
if (this.data.character[i] == '*') {
this.data.result = this.data.result * this.data.operand[i + 1];
}
if (this.data.character[i] == '/') {
this.data.result = this.data.result / this.data.operand[i + 1];
}
}
} else {
this.setData({
result:' , , '
})
}
this.setData({
calculation:this.data.result
})
},
//
empty:function() {
this.setData({
calculation: "",
result: 0,
character: [], //
operand: [], //
temp: false
}
}
})
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
OpenSSL 생 성 ssl 인증서텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.