用微信小程序写了一个加减乘除的运算，看效果可以去微信搜
"吃盖浇饭"
image.png
下面上代码
js文件
Page({
/**
* 页面的初始数据
*/
data: {
id1:'退格',
id2: 'back',
id3:'0',
id4:'+',
id5:'9',
id6: '8',
id7: '7',
id8: '-',
id9: '6',
id10: '5',
id11: '4',
id12: '/',
id13: '3',
id14: '2',
id15: '1',
id16: '=',
screenData:"0",
lastIspast:"",
str:[]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
history: function(){
// wx.navigateTo({
// // url: 'https://www.baidu.com/'
// })
},
clickButton: function(event) {
console.log(event.target.id);
var sd = this.data.screenData;
var id = event.target.id
if(id==this.data.id1){
var data = this.data.screenData;
if(data == 0 ){
return
}
data = data.substring(0,data.length-1);
if(data == "" || data == "-"){
data = 0;
}
this.setData({screenData:data});
}else if(id == this.data.id2){
this.setData({
screenData:"0"
})
} else if (id == this.data.id3){
this.setData({
screenData: "0"
})
} else if (id == this.data.id16){
var data = this.data.screenData;
if(data==0){
return;
}
var lastWrod = data.substring(data.length-1,data.lentgh);
if(isNaN(lastWrod)){
return
}
var num = "";
var lastOperator;
var arr = this.data.screenData.split("");
var optarr = [];
for(var i in arr){
if(isNaN(arr[i])==false){
num+=arr[i];
}else{
lastOperator = arr[i];
optarr.push(num);
optarr.push(arr[i]);
num=""
}
}
optarr.push(Number(num));
var result = Number(optarr[0])*1.0;
console.log(result)
for(var i=1;i<optarr.length;i++){
if (isNaN(optarr[i])){
if(optarr[1]==this.data.id4){
result+=Number(optarr[i+1])
} else if (optarr[1] == this.data.id8){
result -= Number(optarr[i + 1])
} else if (optarr[1] == this.data.id12){
result /= Number(optarr[i + 1])
}
}
}
this.data.str.push(result);
wx.setStorageSync('key', this.data.str)
console.log(wx.getStorageSync('key'))
this.setData({
screenData: result+""
})
}else{
var data;
if (sd == 0) {
data = id;
} else {
data = sd + id;
}
this.setData({
screenData: data
})
}
}
})
wxml文件
<view class="content">
<view class="screen">
{{screenData}}
</view>
<view class='btnGroup'>
<view class='item orange' bindtap="clickButton" id="{{id1}}">退格</view>
<view class='item orange' bindtap="clickButton" id="{{id2}}">清屏</view>
<view class='item orange' bindtap="clickButton" id="{{id3}}">0</view>
<view class='item orange' bindtap="clickButton" id="{{id4}}">+</view>
</view>
<view class='btnGroup'>
<view class='item orange' bindtap="clickButton" id="{{id5}}">9</view>
<view class='item orange' bindtap="clickButton" id="{{id6}}">8</view>
<view class='item orange' bindtap="clickButton" id="{{id7}}">7</view>
<view class='item orange' bindtap="clickButton" id="{{id8}}">-</view>
</view>
<view class='btnGroup'>
<view class='item orange' bindtap="clickButton" id="{{id9}}">6</view>
<view class='item orange' bindtap="clickButton" id="{{id10}}">5</view>
<view class='item orange' bindtap="clickButton" id="{{id11}}">4</view>
<view class='item orange' bindtap="clickButton" id="{{id12}}">/</view>
</view>
<view class='btnGroup'>
<view class='item orange' bindtap="clickButton" id="{{id13}}">3</view>
<view class='item orange' bindtap="clickButton" id="{{id14}}">2</view>
<view class='item orange' bindtap="clickButton" id="{{id15}}">1</view>
<view class='item orange' bindtap="clickButton" id="{{id16}}">=</view>
</view>
<view>
<view bindtap="history">
想整拼图，可惜失败了
</view>
</view>
</view>
wxss文件
.content{
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
}
.screen{
background-color: #fff;
border-radius:3px;
text-align: center;
width: 720rpx;
height: 100rpx;
}
.btnGroup{
display:flex;
flex-direction: row
}
.item{
width:160rpx;
min-height: 150rpx;
margin:10px;
text-align: center;
line-height: 150rpx;
}
完工。
网友评论