微信小程序--计算器（附源码下载地址）

一、界面
1、主要界面：基本计算

2、扩展界面：单位计算

3、其它界面
房贷计算、正则表达式等，具体可扫码试用

三、代码：
1、主界面
index.js

Page({
data: {
idb: “back”,
idc: “clear”,
idt: “toggle”,
idadd: “＋”,
id9: “9”,
id8: “8”,
id7: “7”,
idj: “－”,
id6: “6”,
id5: “5”,
id4: “4”,
idx: “×”,
id3: “3”,
id2: “2”,
id1: “1”,
iddiv: “÷”,
id0: “0”,
idd: “.”,
ide: “＝”,
screenData: “0”,
operaSymbo: { “＋”: “+”, “－”: “-”, “×”: “*”, “÷”: “/”, “.”: “.” },
lastIsOperaSymbo: false,
iconType: ‘waiting_circle’,
iconColor: ‘white’,
arr: [],
logs: []
},
onLoad: function (options) {
// 页面初始化 options为页面跳转所带来的参数
},
onReady: function () {
// 页面渲染完成
},
onShow: function () {
// 页面显示
},
onHide: function () {
// 页面隐藏
},
onUnload: function () {
// 页面关闭
},
clickBtn: function (event) {
var id = event.target.id;
if (id == this.data.idb) { //退格←
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 });
this.data.arr.pop();
} else if (id == this.data.idc) { //清屏C
this.setData({ “screenData”: “0” });
this.data.arr.length = 0;
} else if (id == this.data.idt) { //正负号+/-
var data = this.data.screenData;
if (data == “0”) {
return;
}
var firstWord = data.charAt(0);
if (data == “－”) {
data = data.substr(1);
this.data.arr.shift();
} else {
data = “－” + data;
this.data.arr.unshift("－");
}
this.setData({ “screenData”: data });
} else if (id == this.data.ide) { //等于＝
var data = this.data.screenData;
if (data == “0”) {
return;
}
//eval是js中window的一个方法，而微信页面的脚本逻辑在是在JsCore中运行，JsCore是一个没有窗口对象的环境，所以不能再脚本中使用window，也无法在脚本中操作组件
//var result = eval(newData);
var lastWord = data.charAt(data.length);
if (isNaN(lastWord)) {
return;
}
var num = “”;
var lastOperator = “”;
var arr = this.data.arr;
var optarr = [];
for (var i in arr) {
if (isNaN(arr[i]) == false || arr[i] == this.data.idd || arr[i] == this.data.idt) {
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.idadd) {
result += Number(optarr[i + 1]);
} else if (optarr[1] == this.data.idj) {
result -= Number(optarr[i + 1]);
} else if (optarr[1] == this.data.idx) {
result = Number(optarr[i + 1]);
} else if (optarr[1] == this.data.iddiv) {
result /= Number(optarr[i + 1]);
}
}
}
//存储历史记录
this.data.logs.push(data + ‘=’ + result);
wx.setStorageSync(“calclogs”, this.data.logs);
this.data.arr.length = 0;
this.data.arr.push(result);
this.setData({ “screenData”: result + “” });
} else {
if (this.data.operaSymbo[id]) { //如果是符号±/
if (this.data.lastIsOperaSymbo || this.data.screenData == “0”) {
return;
}
}
var sd = this.data.screenData;
var data;
if (sd == 0) {
data = id;
} else {
data = sd + id;
}
this.setData({ “screenData”: data });
this.data.arr.push(id);
if (this.data.operaSymbo[id]) {
this.setData({ “lastIsOperaSymbo”: true });
} else {
this.setData({ “lastIsOperaSymbo”: false });
}
}
},
history: function () {
wx.navigateTo({
url: ‘…/history/history’
})
}
})

index.mxml
<<

С
←

＋

9
8
7
－

6
5
4
×

3
2
1
÷

0
.
＝

index.wxss
.content {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
background-color: #ccc;
font-family: “Microsoft YaHei”;
overflow-x: hidden;
}
.layout-top{
width: 100%;
margin-bottom: 30rpx;
}
.layout-bottom{
width: 100%;
}
.screen {
text-align: right;
width: 100%;
line-height: 260rpx;
padding: 0 10rpx;
font-weight: bold;
font-size: 60px;
box-sizing: border-box;
border-top: 1px solid #fff;
}
.btnGroup {
display: flex;
flex-direction: row;
flex: 1;
width: 100%;
height: 5rem;
background-color: #fff;
}
.item {
width:25%;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
margin-top: 1px;
margin-right: 1px;
}
.item:active {
background-color: #ff0000;
}
.zero{
width: 50%;
}
.orange {
color: #fef4e9;
background: #f78d1d;
font-weight: bold;
}
.blue {
color:#d9eef7;
background-color: #0095cd;
}
.iconBtn{
display: flex;
}
.icon{
display: flex;
align-items: center;
width:100%;
justify-content: center;
}
四、csdn下载链接：
https://download.csdn.net/download/kevin_lp/11931364

微信小程序--计算器（附源码下载地址）相关推荐

数字信号 fft c源码_如何制作一个简单的人体动态识别微信小程序（附源码）
知乎小白第一次写专栏,还请多指教. 先放成果. GitHub源码: lrioxh/HAR-applet-of-Wechatgithub.com b站演示视频: 居然不需要服务器?!如何制作一个简单的 ...
零基础一天学会开发制作一个微信小程序【附源码】
时至如今,微信已然成为一个全民通用的工具,相应的微信小程序开发已经是一个热门的开发项目. 小程序的前端代码和web是极其相似的,wxml和html.wxss和css以及js,现在还经常将wxss读作c ...
小程序+spring boot记账微信小程序毕业设计-附源码180815
记账微信小程序摘要随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,记账微信小程序被用户普遍使用 ...
【微信小程序】实现微信小程序登录(附源码)
实现微信小程序登录文章目录实现微信小程序登录登录功能简介界面展示代码展示登录功能简介通过点击登录按钮,调用微信接口wx.getUserProfile拿到微信的个人信息,先检查是否之前已经 ...
教你快速开发一个狼人杀微信小程序（附源码）
点击关注公众号,利用碎片时间学习一.项目展示狼人杀是一款多人参与的,通过语言描述推动.较量口才和分析判断能力的策略类桌面游戏玩家人数适于4-18人参与主要角色有:狼人 .预言家 .平民 .女巫 ...
【微信小程序云工具箱源码】
工具箱源码,趣味工具微信小程序源码皮皮趣味小工具小程序源码,支持功能去水印,精选壁纸,图片压缩,文字生成二维码,图片加水印模拟来电,手持弹幕,掷骰子-等使用小工具,一个小程序有几十个功能. 微信小 ...
最新WordPress微信小程序社区论坛源码多端应用
WordPress多端应用 WordPress作为后端生成多端小程序.快应用及APP,可用于资讯.新闻.博客.企业官网等后端使用开源博客建站系统wordpress和微慕小程序开源版插件前端使用u ...
PHP开发B2C商城微信小程序商城系统源码+数据库，轻量级前后端分离的电商系统，支持微信小程序 + H5+ 公众号 + APP
项目介绍一款轻量级.高性能.前后端分离的电商系统,支持微信小程序 + H5+ 公众号 + APP,前后端源码完全开源,看见及所得,完美支持二次开发,可学习可商用,让您快速搭建个性化独立商城. 完整代 ...
【增强版短视频去水印源码】去水印微信小程序+去水印软件源码
源码简介与安装说明: 2021增强版短视频去水印源码去水印微信小程序源码网站去水印软件源码安装环境(需要材料):备案域名–服务器安装宝塔-安装 Nginx 或者 Apache php5.6 以上 ...
（已更新）【增强版短视频去水印源码】去水印微信小程序+去水印软件源码
源码简介与安装说明: 安装环境(需要材料):备案域名–服务器安装宝塔-安装 Nginx 或者 Apache php5.6 以上-安装 sg11 插件小程序已自带解析接口,支持全网主流短视频平台,搭建 ...

微信小程序--计算器（附源码下载地址）

微信小程序--计算器（附源码下载地址）相关推荐

最新文章

热门文章