微信小程序--计算器
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 (firstWord == "－")
{
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 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 iconBtn" bindtap="history">
<icon type="{{iconType}}" color="{{iconColor}}" class="icon" size="25"/>
</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.wxss
.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;
}
4、csdn下载链接：
https://download.csdn.net/download/kevin_lp/11931364