在微信小程序中如何实现计算器功能?

/ 0评 / 0

计算器因为在生活中必不可少,今天琢磨一下利用ui实现这个功能来分享一下
同时也加上了最常用的进制转换

首先看一下苹果自带的计算器
模范他的ui设计

<page>
<view class="bigbox">
<view class="screen">
<view class="space"></view>
<view class="screenbox">
<view class="scntop">{{screenStr}}</view>
<view class="scnbom">{{screenData}}</view>
</view>
</view>
<view class="numbox">
<view class="numKey">
<view bindtap="btnClick" class="nums" id="{{clear}}">AC</view>
<view bindtap="btnClick" class="nums" id="{{numx}}">x</view>
<view bindtap="btnClick" class="nums" id="{{numc}}">/</view>
<view bindtap="btnClick" class="nums" id="{{numa}}">+</view>
</view>
<view class="numKey">
<view bindtap="btnClick" class="nums" id="{{num7}}">7</view>
<view bindtap="btnClick" class="nums" id="{{num8}}">8</view>
<view bindtap="btnClick" class="nums" id="{{num9}}">9</view>
<view bindtap="btnClick" class="nums" id="{{numb}}">-</view>
</view>
<view class="numKey">
<view bindtap="btnClick" class="nums" id="{{num4}}">4</view>
<view bindtap="btnClick" class="nums" id="{{num5}}">5</view>
<view bindtap="btnClick" class="nums" id="{{num6}}">6</view>
<view bindtap="btnClick" class="nums" id="{{numt}}">00</view>
</view>
<view>
<view class="numsmall1">
<view bindtap="btnClick" class="num" id="{{num1}}">1</view>
<view bindtap="btnClick" class="num3" id="{{numd}}">.</view>
</view>
<view class="numsmall">
<view bindtap="btnClick" class="num" id="{{num2}}">2</view>
<view bindtap="btnClick" class="num3" id="{{num0}}">0</view>
</view>
<view class="numsmall">
<view bindtap="btnClick" class="num" id="{{num3}}">3</view>
<view bindtap="btnClick" class="num3" id="{{clear}}">DEL</view>
</view>
<view bindtap="btnClick" class="numsma" id="{{result}}">=</view>
</view>
<view class="numKey">
<view bindtap="toBinary" class="nums">转2进制</view>
<view bindtap="toOctonary" class="nums">转8进制</view>
<view bindtap="toHexadecimal" class="nums">转16进制</view>
<view bindtap="changeHex" class="nums">进制转换</view>
</view>
</view>
</view><view class="adContainer">
<ad unit-id="adunit-db83411bc0a7051e" ad-intervals="30" bindload="adLoad" binderror="adError" bindclose="adClose"></ad>
</view>
</page>

前端就这样定下来了

js就就计较复杂了
Page({
data: {
dele: "",
num0: 0,
num1: 1,
num2: 2,
num3: 3,
num4: 4,
num5: 5,
num6: 6,
num7: 7,
num8: 8,
num9: 9,
numt: "00",
numa: "+",
numx: "x",
numb: "-",
numc: "/",
numd: ".",
result: "=",
fuhao: "",
clear: "clear",
screenData: "",
screenStr: "",
flag: !1,
ans: 0,
s3: "",
bb: 0
},
btnClick: function(a) {
console.log(a.target.id);
var t = a.target.id, e = this.data.ans, s = this.data.s3, n = this.data.fuhao;
this.data.flag1;
if (s.length > 8) this.setData({
screenData: "overflow",
screenStr: "overflow",
s3: ""
}); else if (t == this.data.dele) {
if (0 == (i = this.data.screenData) || "" == i) return void this.setData({
screenData: "",
s3: ""
});
if ("" == (i = i.substring(0, i.length - 1)) || "-" == i) return i = "", void this.setData({
screenData: i,
s3: ""
});
var o = this.data.s3;
o = 1e8 * o / 1e7, o = parseFloat(o), o *= 1, this.setData({
screenData: i,
s3: o
});
} else {
if (t == this.data.clear) return console.log(a.target.id), void this.setData({
screenData: "",
screenStr: "",
flag: !1,
ans: 0,
s3: "",
bb: 0,
fuhao: "",
ret: {
times: 1,
num: 0
}
});
if (t == this.data.result) return console.log(e), 0 == this.data.ans && n == this.data.numb && (s = -s,
console.log("bb===" + s)), 0 == e ? e = s : n == this.data.numa ? (console.log("+"),
e = 1e9 * parseFloat(e) + 1e9 * parseFloat(s), e /= 1e9) : n == this.data.numb ? (console.log("-"),
e = 1e9 * parseFloat(e) - 1e9 * parseFloat(s), e /= 1e9) : n == this.data.numx ? (console.log("*"),
e = 1e8 * parseFloat(e) / 1e8 * (1e8 * parseFloat(s) / 1e8)) : n == this.data.numc ? (console.log("/"),
e = 1e9 * parseFloat(e) / (1e9 * parseFloat(s))) : e = s + 0, e *= 1, void this.setData({
screenData: e,
screenStr: e
});
if (parseInt(t) >= 0 && parseInt(t) <= 9 || t == this.data.numd) {
var r = this.data.s3, i = r + t;
this.setData({
screenData: i
}), r += t, this.setData({
s3: r
}), console.log("输入的数" + this.data.s3);
} else t != this.data.numa && t != this.data.numb && t != this.data.numx && t != this.data.numc || (0 == this.data.ans && n == this.data.numb && (s = -s,
console.log("bb===" + s)), console.log("bb=" + s), console.log("ans=" + e), 0 == e ? e = s : n == this.data.numa ? (console.log("+"),
e = 1e9 * parseFloat(e) + 1e9 * parseFloat(s), e /= 1e9) : n == this.data.numb ? (console.log("-"),
e = parseFloat(e) - parseFloat(s), e = 1e9 * parseFloat(e) - 1e9 * parseFloat(s),
e /= 1e9) : n == this.data.numx ? (console.log("*"), e = 1e8 * parseFloat(e) / 1e8 * (1e8 * parseFloat(s) / 1e8)) : n == this.data.numc ? (console.log("/"),
e = 1e8 * parseFloat(e) / (1e8 * parseFloat(s))) : e = s + 0, console.log("is" + e),
e *= 1, this.setData({
s3: "",
ans: e,
fuhao: t,
screenData: e,
screenStr: t
}));
}
},
toBinary: function(a) {
var t;
t = this.data.screenData, 1 == this.data.flag && (t = this.data.screenStr), this.setData({
screenStr: t,
flag: !0
});
var e = t, s = new Array(), n = "";
if (0 != e && "." != e) {
for (var o = 0; 1; o++) {
if (!(t / 2 >= 1)) {
s[o] = 1;
break;
}
s[o] = t % 2, t = parseInt(t / 2);
}
for (o = s.length; o > 0; o--) n += s[o - 1];
this.setData({
screenData: n
});
}
},
toOctonary: function(a) {
var t;
t = this.data.screenData, 1 == this.data.flag && (t = this.data.screenStr), this.setData({
screenStr: t,
flag: !0
}), console.log(t);
var e = [], s = "";
if (0 != t && "." != t) {
for (;t > 0; ) e.push(t % 8), t = parseInt(t / 8);
for (;e.length > 0; ) s += e.pop();
this.setData({
screenData: s
});
}
},
toHexadecimal: function(a) {
var t;
this.data.screenData;
if (t = this.data.screenData, console.log(t), 1 == this.data.flag && (t = this.data.screenStr),
this.setData({
screenStr: t,
flag: !0
}), 0 != t && "." != t) {
var e = 15, s = t, n = -1, o = "", r = "0x";
do {
switch (++n, s &= e) {
case 10:
s = "A";
break;

case 11:
s = "B";
break;

case 12:
s = "C";
break;

case 13:
s = "D";
break;

case 14:
s = "E";
break;

case 15:
s = "F";
}
o += s, s = t >>>= 4;
} while (t);
do {
r += o[n];
} while (n--);
o = n = s = e = t, this.setData({
screenData: r
});
}
},
changeHex: function(a) {
wx.navigateTo({
url: "./changehex"
});
},
onLoad: function(a) {},
onReady: function() {},
onShow: function() {},
onHide: function() {},
onUnload: function() {},
onPullDownRefresh: function() {},
onReachBottom: function() {},
onShareAppMessage: function(a) {
return {
title: "一个木函--计算器",
path: "/pages/tools/calc/calc",
imageUrl: "https://api.isoyu.com/ARU_GIF_S.php"
};
}
});

因为还要考虑到高级计算的用户
我们还要写个页面
<view>
<view class="screen">
<view class="space"></view>
<view class="screenbox">
<view class="scntop">{{screenStr}}</view>
<view class="scnbom">{{screenData}}</view>
</view>
</view>
<modal noCancel bindcancel="modalChange" bindconfirm="modalSure" cancelText="取消" confirmText="确定" hidden="{{modalHidden}}" title="说明">
先点击下面你要输入的原进制数,输入后再点击你要转换的进制数。
</modal>
<view class="numbox">
<view class="numKey">
<view bindtap="btnClick" class="nums" id="{{clear}}">AC</view>
<view bindtap="btnClick" class="nums" id="{{numA}}">A</view>
<view bindtap="btnClick" class="nums" id="{{numB}}">B</view>
<view bindtap="btnClick" class="nums" id="{{numC}}">C</view>
</view>
<view class="numKey">
<view bindtap="btnClick" class="nums" id="{{num7}}">7</view>
<view bindtap="btnClick" class="nums" id="{{num8}}">8</view>
<view bindtap="btnClick" class="nums" id="{{num9}}">9</view>
<view bindtap="btnClick" class="nums" id="{{numD}}">D</view>
</view>
<view class="numKey">
<view bindtap="btnClick" class="nums" id="{{num4}}">4</view>
<view bindtap="btnClick" class="nums" id="{{num5}}">5</view>
<view bindtap="btnClick" class="nums" id="{{num6}}">6</view>
<view bindtap="btnClick" class="nums" id="{{numE}}">E</view>
</view>
<view class="numKey">
<view bindtap="btnClick" class="nums" id="{{num1}}">1</view>
<view bindtap="btnClick" class="nums" id="{{num2}}">2</view>
<view bindtap="btnClick" class="nums" id="{{num3}}">3</view>
<view bindtap="btnClick" class="nums" id="{{numF}}">F</view>
</view>
<view class="numKey">
<view bindtap="btnClick" class="nums" id="{{numdo}}">.</view>
<view bindtap="btnClick" class="nums" id="{{num0}}">0</view>
<view bindtap="btnClick" class="nums" id="{{numT}}">00</view>
<view bindtap="btnClick" class="nums" id="{{del}}">DEL</view>
</view>
<view class="numKey">
<view bindtap="toBinary" class="numb" id="{{numTwo}}" style="bgcolor:{{colT}};">二</view>
<view bindtap="toOctonary" class="numb" id="{{numEight}}" style="color:{{colE}};">八</view>
<view bindtap="toTenhex" class="numb" id="{{numTen}}" style="color:{{colS}};">十</view>
<view bindtap="toHexadecimal" class="numb" id="{{numSixteen}}" style="color:{{colsix}};">十六</view>
</view>
</view>
</view>

js呼呼呼呼累死看
Page({
data: {
dele: "",
num0: 0,
num1: 1,
num2: 2,
num3: 3,
num4: 4,
num5: 5,
num6: 6,
num7: 7,
num8: 8,
num9: 9,
numT: "00",
numA: "a",
numB: "b",
numC: "c",
numD: "d",
numE: "e",
numF: "f",
numTwo: "two",
numEight: "eight",
numTen: "ten",
numSixteen: "six",
numdo: ".",
clear: "clear",
screenData: "0",
screenStr: "0",
flag1: "",
flag: !1,
colT: "",
colE: "",
colS: "",
colsix: "",
modalHidden: !0
},
btnClick: function(a) {
console.log(a.target.id);
var t = a.target.id;
if (t == this.data.dele) {
if (0 == (e = this.data.screenData)) return;
"" != (e = e.substring(0, e.length - 1)) && "-" != e || (e = 0), this.setData({
screenData: e
});
} else if (t == this.data.clear) console.log(a.target.id), this.setData({
screenData: "0",
screenStr: "0"
}); else {
var e, s = this.data.screenData;
if ((e = 0 == s ? t : s + t).length > 25) return void this.setData({
screenData: "overflow"
});
this.setData({
screenData: e,
screenStr: e
});
}
},
toBinary: function(a) {
if (console.log(a.target.id), console.log(this.data.flag), this.setData({
colT: "red",
colE: "",
colS: "",
colsix: ""
}), 0 != this.data.flag) {
if (1 == this.data.flag) {
var t = this.data.screenStr;
if (0 == t || "." == t) return;
var e;
"eight" == this.data.flag1 ? e = parseInt(t, 8) : "ten" == this.data.flag1 ? e = t : "six" == this.data.flag1 && (e = parseInt(t, 16));
for (var s = new Array(), n = "", i = 0; 1; i++) {
if (!(e / 2 >= 1)) {
s[i] = 1;
break;
}
s[i] = e % 2, e = parseInt(e / 2);
}
for (i = s.length; i > 0; i--) n += s[i - 1];
this.setData({
screenData: n
});
}
} else this.setData({
flag: !0,
flag1: "two"
});
},
toOctonary: function(a) {
if (console.log(a.target.id), console.log(this.data.flag), this.setData({
colT: "",
colE: "red",
colS: "",
colsix: ""
}), 0 != this.data.flag) {
if (1 == this.data.flag) {
var t = this.data.screenStr;
if (0 == t || "." == t) return;
var e;
"two" == this.data.flag1 ? e = parseInt(t, 2) : "ten" == this.data.flag1 ? e = t : "six" == this.data.flag1 && (e = parseInt(t, 16));
for (var s = [], n = ""; e > 0; ) s.push(e % 8), e = parseInt(e / 8);
for (;s.length > 0; ) n += s.pop();
console.log(n), this.setData({
screenData: n
});
}
} else this.setData({
flag: !0,
flag1: "eight",
colT: "red"
});
},
toTenhex: function(a) {
if (console.log(a.target.id), this.setData({
colT: "",
colE: "",
colS: "red",
colsix: ""
}), 0 != this.data.flag) {
if (1 == this.data.flag) {
var t = this.data.screenStr;
if (0 == t || "." == t) return;
var e;
"two" == this.data.flag1 ? e = parseInt(t, 2) : "eight" == this.data.flag1 ? e = parseInt(t, 8) : "six" == this.data.flag1 && (e = parseInt(t, 16));
}
this.setData({
screenData: e
});
} else this.setData({
flag: !0,
flag1: "ten"
});
},
toHexadecimal: function(a) {
if (console.log(a.target.id), this.setData({
colT: "",
colE: "",
colS: "",
colsix: "red"
}), 0 != this.data.flag) {
if (1 == this.data.flag) {
var t = this.data.screenStr;
if (0 == t || "." == t) return;
var e;
"two" == this.data.flag1 ? e = parseInt(t, 2) : "eight" == this.data.flag1 ? e = parseInt(t, 8) : "ten" == this.data.flag1 && (e = t);
var s = 15, n = e, i = -1, o = "", l = "0x";
do {
switch (++i, n &= s) {
case 10:
n = "A";
break;

case 11:
n = "B";
break;

case 12:
n = "C";
break;

case 13:
n = "D";
break;

case 14:
n = "E";
break;

case 15:
n = "F";
}
o += n, n = e >>>= 4;
} while (e);
do {
l += o[i];
} while (i--);
o = i = n = s = e, this.setData({
screenData: l
});
}
} else this.setData({
flag: !0,
flag1: "six"
});
},
onLoad: function(a) {
this.setData({
modalHidden: !1
});
},
modalSure: function(a) {
this.setData({
modalHidden: !0
});
},
onReady: function() {},
onShow: function() {},
onHide: function() {},
onUnload: function() {},
onPullDownRefresh: function() {},
onReachBottom: function() {},
onShareAppMessage: function(a) {
return {
title: "一个木函--进制计算器",
path: "/pages/tools/calc/changehex",
imageUrl: "https://api.isoyu.com/ARU_GIF_S.php"
};
}
});

评论已关闭。