微信小程序 计算器(附源码链接)

一、界面

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

 

   

    {{screenData}}

   

 


 

   

      С

     

      +/-

     

   

   

      9

      8

      7

     

   

   

      6

      5

      4

      ×

   

   

      3

      2

      1

      ÷

   

   

      0

      .

     

   

 

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

你可能感兴趣的:(微信小程序 计算器(附源码链接))