微信小程序实现简单的计算器功能

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)
}

//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}}
})

如果感觉这篇文章对你有帮助，加个关注吧！！！

也可关注我的公众号，我们一起交流。

微信小程序实现简单的计算器功能相关推荐

微信小程序之简单商城部分功能总结
前段时间,突然接到公司得一个需求,叫我去做一个微信小程序得开发,类似一个商城的开发,然后基本看了看微信小程序的开发文档就着手开始做了,为了节约前端一些基本布局啥的,在某宝1.99买了个框架快速搭建了前 ...
微信小程序实现简单定位功能
微信小程序实现简单定位功能,简单易读,获取经纬度信息在pages下创建一个单页如local local.js如下 var app = getApp() Page({ data:{latitude:' ...
【微信小程序系列】微信小程序超简单教程，基本语法，获取用户基本数据信息，实现对云数据库的增删改查及小程序外部api的引用示例（附源码）
[微信小程序系列]微信小程序超简单教程小程序项目结构静态页面的构成 HTML:结构 css:样式 js:行为小程序页面全部存放在pages, 而且pages目录只能存放页面页面包括4个文件, ...
微信小程序的简单介绍
微信小程序的简单介绍 1.与HTML的区别 HTML 微信小程序 <div></div> <view></view> <h1></h1 ...
uni-app 微信小程序模仿 app二层楼功能
uni-app 微信小程序模仿 app二层楼功能先占个坑,今天应该写不完, 后续在慢慢补全更新终于写完了这个的计算量很大,我自己的安卓机测试的时候一卡一卡的,公司同事的iphone是没有问题 ...
微信小程序分销系统有哪些功能及优势？
一.微信小程序分销系统有哪些功能? 1.商品管理 2.订单管理 3.分销管理 4.财务管理 5.数据统计二.微信小程序分销系统为何如此火爆? 1.微信小程序分销系统拥有AP ...
微信小程序云开发实现退款功能
微信小程序云开发实现退款功能官方文档小程序云开发实现微信支付官方文档非常的简单,也没有示例代码,只是列出了许多需要的参数,对于新手来说会可能有点迷糊.可以我的步骤跟着一步一步来. 一.获取退款A ...
微信小程序 - 实现左滑动删除功能
微信小程序 - 实现左滑动删除功能效果图: 实现过程: 一.wxml布局这里我是先用了一个大盒子包裹小盒子,然后小盒子里面进行左右布局(左边为内容部分,右边为删除按钮)的方式实现的 <vie ...
微信小程序购物车数量加减功能
微信小程序购物车数量加减功能 wxml  <view class="stepper">  < ...

微信小程序实现简单的计算器功能

微信小程序实现简单的计算器功能相关推荐

最新文章

热门文章