一、界面
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為頁面跳轉(zhuǎn)所帶來的參數(shù)
},
onReady: function () {
// 頁面渲染完成
},
onShow: function () {
// 頁面顯示
},
onHide: function () {
// 頁面隱藏
},
onUnload: function () {
// 頁面關(guān)閉
},
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是一個沒有窗口對象的環(huán)境，所以不能再腳本中使用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({ “l(fā)astIsOperaSymbo”: true });
} else {
this.setData({ “l(fā)astIsOperaSymbo”: false });
}
}
},
history: function () {
wx.navigateTo({
url: ‘…/history/history’
})
}
})
2警儒、index.wxml
<view class="content">
? <view class="layout-top">
? ? <view class="screen">
? ? {{screenData}}
? ? </view>
? </view>
? <view class="layout-bottom">
? ? <view class="btnGroup">
? ? ? <view class="item orange" bindtap="clickBtn" id="{{idc}}">С</view>
? ? ? <view class="item orange" bindtap="clickBtn" id="{{idb}}">←</view>
? ? ? <view class="item orange" bindtap="clickBtn" id="{{idt}}">＋/－</view>
? ? ? <view class="item orange" bindtap="clickBtn" id="{{idadd}}">＋</view>
? ? </view>
? ? <view class="btnGroup">
? ? ? <view class="item blue" bindtap="clickBtn" id="{{id9}}">9</view>
? ? ? <view class="item blue" bindtap="clickBtn" id="{{id8}}">8</view>
? ? ? <view class="item blue" bindtap="clickBtn" id="{{id7}}">7</view>
? ? ? <view class="item orange" bindtap="clickBtn" id="{{idj}}">－</view>
? ? </view>
? ? <view class="btnGroup">
? ? ? <view class="item blue" bindtap="clickBtn" id="{{id6}}">6</view>
? ? ? <view class="item blue" bindtap="clickBtn" id="{{id5}}">5</view>
? ? ? <view class="item blue" bindtap="clickBtn" id="{{id4}}">4</view>
? ? ? <view class="item orange" bindtap="clickBtn" id="{{idx}}">×</view>
? ? </view>
? ? <view class="btnGroup">
? ? ? <view class="item blue" bindtap="clickBtn" id="{{id3}}">3</view>
? ? ? <view class="item blue" bindtap="clickBtn" id="{{id2}}">2</view>
? ? ? <view class="item blue" bindtap="clickBtn" id="{{id1}}">1</view>
? ? ? <view class="item orange" bindtap="clickBtn" id="{{iddiv}}">÷</view>
? ? </view>
? ? <view class="btnGroup">
? ? ? <view class="item blue zero" bindtap="clickBtn" id="{{id0}}">0</view>
? ? ? <view class="item blue" bindtap="clickBtn" id="{{idd}}">.</view>
? ? ? <view class="item orange" bindtap="clickBtn" id="{{ide}}">＝</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
