微信小程序计算器（附源码链接）

一、界面

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’

})

}

})

2、index.wxml

</view>

</view>

</view>

</view>

</view>

</view>

3、index.wcss

/* //height: 90%;*/

.content {

display: flex;

flex-direction: column;

align-items: center;

background-color: #ccc;

font-family: "Microsoft YaHei";

overflow-x: hidden;

}

.layout-top{

width: 100%;

margin-bottom: 10rpx;

}

.layout-bottom{

width: 100%;

}

.screen {

text-align: right;

width: 100%;

line-height: 200rpx;

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

微信小程序 计算器（附源码链接）

推荐阅读更多精彩内容

微信小程序计算器（附源码链接）