uniapp中实现简易计算器

uniapp中实现简易计算器
主要问题:在计算器的实现过程中会遇到小数点计算精度;
此计算器是依赖了uni-popup的弹出层插件,可在uniapp官方组件中查找扩展插件popup弹窗层下载,也可直接点击该(https://ext.dcloud.net.cn/plugin?id=329)链接直接下载

计算器效果图

话不多说上代码:

HTML源码

<template> <view class="uni-popup-calculator"> <view class="uni-popup-calculator-title"> <text>{{number}}</text> </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>

Js源码

<script> export default { name: 'UniPopupCalculator', inject: ['popup'], data() { return { number: '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; } that.complete = true; that.numberOne = ''; that.numberTwo = ''; that.symbol = ''; break; case 'clear': //清除符  that.clear(); break; } }, /** * 清除 * */ 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>

Css源码

<style lang="less"> .uni-popup-calculator { background-color: #333333; } .uni-popup-calculator-title { width: 702rpx; height: 120rpx; line-height: 120rpx; padding: 0 24rpx; text-align: right; background-color: #333333; font-size: 50rpx; font-weight: 600; color: #FFFFFF; } .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; } .uni-popup-cell.cur { width: 372rpx; } .uni-popup-cell.border { border-left: none; } .uni-popup-cell.active { background-color: #f5f5f5; } } </style>

实现计算器的基本功能,希望能帮到你谢谢!记着点赞哦!

 

本网页由快兔兔AI采集器生成,目的为演示采集效果,若侵权请及时联系删除。

原文链接:https://www.cnblogs.com/houxianzhou/p/15918139.html

更多内容