uniapp实现简易计算器
uniapp实现简易计算器
·
如图：
<template>
<view class="uni-popup-calculator">
<view class="uni-popup-calculator-title">
<view>{{str}}</view>
<view>{{number}}</view>
</view>
<view class="uni-popup-content">
<view class="uni-popup-cell"
:class="[item.flag?'active':'',item.width == 2?'cur':'',item.border?'border':'']"
@click.stop="calculationTwo(item)" v-for="(item,idx) in calculator" :key="idx">{{item.name}}</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
number: '0', //计算器显示区域值
str:"0",
calculator: [{
name: 'c',
flag: false,
type: 'clear',
width: 2,
border: true
},
{
name: '%',
flag: false,
type: 'operator',
width: 1,
border: false
},
{
name: '/',
flag: false,
type: 'operator',
width: 1,
border: false
},
{
name: '7',
flag: false,
type: 'number',
width: 1,
border: true
},
{
name: '8',
flag: false,
type: 'number',
width: 1,
border: false
},
{
name: '9',
flag: false,
type: 'number',
width: 1,
border: false
},
{
name: '*',
flag: false,
type: 'operator',
width: 1,
border: false
},
{
name: '4',
flag: false,
type: 'number',
width: 1,
border: true
},
{
name: '5',
flag: false,
type: 'number',
width: 1,
border: false
},
{
name: '6',
flag: false,
type: 'number',
width: 1,
border: false
},
{
name: '+',
flag: false,
type: 'operator',
width: 1,
border: false
},
{
name: '1',
flag: false,
type: 'number',
width: 1,
border: true
},
{
name: '2',
flag: false,
type: 'number',
width: 1,
border: false
},
{
name: '3',
flag: false,
type: 'number',
width: 1,
border: false
},
{
name: '-',
flag: false,
type: 'operator',
width: 1,
border: false
},
{
name: '0',
flag: false,
type: 'number',
width: 2,
border: true
},
{
name: '.',
flag: false,
type: 'string',
width: 1,
border: false
},
{
name: '=',
flag: false,
type: 'equal',
width: 1,
border: false
},
],
numberOne: '', //变量一
numberTwo: '', //变量二
symbol: '', //运算符
complete: false, //判断是否完成一次计算
current: -1,
}
},
created() {},
methods: {
//计算器方法二:
calculationTwo: function(item) {
let that = this;
//按键点击效果
item.flag = true;
setTimeout(() => {
item.flag = false;
}, 200);
//判断输入的第一位是否是小数点
switch (item.type) {
case 'string':
//小数点
if (that.complete) {
that.number = '0';
that.complete = false;
}
if (that.symbol) {
if ((that.number).indexOf('.') == -1) {
that.numberTwo = that.numberTwo + '.';
that.number = that.numberTwo;
}
} else {
if ((that.number).indexOf('.') == -1) {
that.number = that.number + '.';
}
}
break;
case 'number':
//数字
if (that.complete) {
that.number = '0';
that.complete = false;
}
if (that.symbol) {
that.numberTwo += item.name;
that.number = that.numberTwo;
} else {
if (that.number == '0') {
that.number = item.name;
} else {
that.number += item.name;
}
}
break;
case 'operator':
//运算符
that.symbol = item.name;
if (item.name != '%') {
that.numberOne = that.number;
that.numberTwo = '';
} else {
that.number = parseFloat(that.number) / 100;
}
break;
case 'equal': //等号
if (that.symbol == '-') {
that.number = that.subtraction(that.numberOne, that.numberTwo);
} else if (that.symbol == '+') {
that.number = that.addition(that.numberOne, that.numberTwo);
} else if (that.symbol == '*') {
that.number = that.multiplication(that.numberOne, that.numberTwo);
} else if (that.symbol == '/') {
that.number = that.division(that.numberOne, that.numberTwo);
} else if (that.symbol == '%') {
that.number = parseFloat(that.number) / 1;
}
this.str = this.numberOne + this.symbol + this.numberTwo + '='
that.complete = true;
that.numberOne = '';
that.numberTwo = '';
that.symbol = '';
break;
case 'clear': //清除符
that.clear();
break;
}
if(!this.numberOne && !this.complete){
this.str = this.number
}else if(!this.complete){
this.str = this.numberOne + this.symbol + this.numberTwo
}
},
/*** 清除* */
clear: function() {
let that = this;
that.number = '0';
that.numberOne = '';
that.numberTwo = '';
that.symbol = '';
that.compile = false;
},
/*** 除法* */
division: function(arg1, arg2) {
var t1 = 0,
t2 = 0,
r1, r2;
try {
t1 = arg1.toString().split(".")[1].length
} catch (e) {}
try {
t2 = arg2.toString().split(".")[1].length
} catch (e) {}
Math.r1 = Number(arg1.toString().replace(".", ""))
Math.r2 = Number(arg2.toString().replace(".",""))
return (Math.r1 / Math.r2) * Math.pow(10, t2 - t1);
},
/*** 乘法* */
multiplication: function(arg1, arg2) {
var m = 0,
s1 = arg1.toString(),
s2 = arg2.toString();
try {
m += s1.split(".")[1].length
} catch (e) {}
try {
m += s2.split(".")[1].length
} catch (e) {}
return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m)
},
/*** 加法* */
addition: function(arg1, arg2) {
var r1, r2, m;
try {
r1 = arg1.toString().split(".")[1].length;
} catch (e) {
r1 = 0;
}
try {
r2 = arg2.toString().split(".")[1].length;
} catch (e) {
r2 = 0;
}
m = Math.pow(10, Math.max(r1, r2));
return (arg1 * m + arg2 * m) / m;
},
/*** 减法* */
subtraction: function(arg1, arg2) {
var r1, r2, m, n;
try {
r1 = arg1.toString().split(".")[1].length;
} catch (e) {
r1 = 0;
}
try {
r2 = arg2.toString().split(".")[1].length;
} catch (e) {
r2 = 0;
}
m = Math.pow(10, Math.max(r1,
r2
)); //last modify by deeka//动态控制精度长度
n = (r1 >= r2) ? r1 : r2;
return ((arg1 * m - arg2 * m) / m).toFixed(n);
}
}
}
</script>
<style lang="less">
.uni-popup-calculator {
background-color: #333333;
}
.uni-popup-calculator-title {
background-color: #ccc;
font-size: 50rpx;
font-weight: 600;
color: #FFFFFF;
view{
width: 100%;
height: 120rpx;
padding: 24rpx;
box-sizing: border-box;
}
}
.uni-popup-content {
width: 750rpx;
background-color: #FFFFFF;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
.uni-popup-cell {
width: 186rpx;
height: 98rpx;
line-height: 98rpx;
text-align: center;
font-size: 44rpx;
font-weight: 600;
color: #333333;
border-bottom: 1px solid #f5f5f5;
border-left: 1px solid #f5f5f5;
box-sizing: border-box;
}
.uni-popup-cell.cur {
width: 372rpx;
}
.uni-popup-cell.border {
border-left: none;
}
.uni-popup-cell.active {
background-color: #f5f5f5;
}
}
</style>
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
1
0- 0
已为社区贡献3条内容
所有评论(0)