2-7 微信小程序计算器

结合之前学过的今天来写一下计算器：

拿到设计图以后先分析一下：

1、上面一块显示区域，下面为按钮区域

2、下面的按钮区域可以flex的row排列方式，一个一个创建这些按钮

先写好界面：

1、创建计算器页面（app.json页面）：

"pages":["pages/calculator/calculator",]

2、wxml编写页面（用比较笨的方法写的，便于看明白）

<!-- 显示区域 -->
<view class='screen'><view>{{result}}</view>
</view><!-- 按钮区域 -->
<!--
id 用于按钮点击时记录按钮 也可以使用dataset方式
class 多个类名用空格隔开
hover-class 设置按钮点击效果的样式类-->
<view class='buttongloup'><view class='buttonbox'><button id='{{id1}}' class='btn-item gray' hover-class='shadow' bindtap='clickBtn'>清除</button><button id='{{id2}}' class='btn-item gray' hover-class='shadow' bindtap='clickBtn'>回退</button><button id='{{id3}}' class='btn-item gray' hover-class='shadow' bindtap='clickBtn'><icon type='waiting' color='#999'></icon></button><button id='{{id4}}' class='btn-item orange'hover-class='shadow' bindtap='clickBtn'>/</button></view><view class='buttonbox'><button id='{{id5}}' class='btn-item white' hover-class='shadow' bindtap='clickBtn'>7</button><button id='{{id6}}' class='btn-item white' hover-class='shadow' bindtap='clickBtn'>8</button><button id='{{id7}}' class='btn-item white' hover-class='shadow' bindtap='clickBtn'>9</button><button id='{{id8}}' class='btn-item orange' hover-class='shadow' bindtap='clickBtn'>*</button></view><view class='buttonbox'><button id='{{id9}}' class='btn-item white' hover-class='shadow' bindtap='clickBtn'>4</button><button id='{{id10}}' class='btn-item white' hover-class='shadow' bindtap='clickBtn'>5</button><button id='{{id11}}' class='btn-item white' hover-class='shadow' bindtap='clickBtn'>6</button><button id='{{id12}}' class='btn-item orange' hover-class='shadow' bindtap='clickBtn'>-</button></view><view class='buttonbox'><button id='{{id13}}' class='btn-item white' hover-class='shadow' bindtap='clickBtn'>1</button><button id='{{id14}}' class='btn-item white' hover-class='shadow' bindtap='clickBtn'>2</button><button id='{{id15}}' class='btn-item white' hover-class='shadow' bindtap='clickBtn'>3</button><button id='{{id16}}' class='btn-item orange' hover-class='shadow' bindtap='clickBtn'>+</button></view><view class='buttonbox'><button id='{{id17}}' class='btn-item zero white' hover-class='shadow' bindtap='clickBtn'>0</button><button id='{{id18}}' class='btn-item white' hover-class='shadow' bindtap='clickBtn'>.</button><button id='{{id19}}' class='btn-item orange' hover-class='shadow' bindtap='clickEqualBtn'>=</button></view>
</view>

3、wxss页面修饰

.buttongloup{width: 100%;background-color: white;position: fixed;bottom: 0;
}.buttonbox{display: flex;flex-direction: row;align-items:flex-start;background-color: white;
}button{width: 25%;height: 150rpx;display: flex;align-items:center;justify-content: center;border-radius: 0;
}button::after{border-radius: 0;
}.zero{width: 50%;
}.screen{position: fixed;bottom: 780rpx;word-wrap: break-word;width: 750rpx;
}.screen view{color: white;font-size: 30px;text-align: right;margin-right: 30rpx;
}page{background-color: black;
}.orange{background-color: orange;
}.gray{background-color: #cfcfcf;
}.white{background-color: white;
}.shadow{background-color: #999;
}

4、js初始数据以及逻辑

var util = require('../../utils/mathStr.js');
Page({/*** 页面的初始数据*/data: {id1:"clear",id2: "back",id3: "history",id4: "/",id5: "7",id6: "8",id7: "9",id8: "*",id9: "4",id10: "5",id11: "6",id12: "-",id13: "1",id14: "2",id15: "3",id16: "+",id17: "0",id18: "dot",id19: "equals",result:"0",dotSign:false,},clickBtn:function(e){console.log(e);var btnValue = e.target.id;var res = this.data.result;var newDotSign = this.data.dotSign;/* 0和9字符判断为数字时候会自动转换判断为点击的是数字其次为字符也可以用isnan*/if (btnValue >= "0" && btnValue<="9"){console.log(btnValue);/* 判断按钮点击都是数字时字符在显示区域时的链接方式判断0，否则会出现000的数字*/if (res == "0"){res = btnValue}else{res = res + btnValue;}}else{/* 判断非数字如果是. 默认为没有添加以后设置为true为了避免出现0.....的情况如果是clear 清除并将数据设置为初始状态如果是back 判断被删掉的那个字符是否为.不然删掉后就不能打.了，以及删到最后一个数字时默认为0最后判断运算符的连接方式，判断最后一个字符是否为数字如果是就可以添加运算符不然会出现9+++情况最后得到一个字符串的运算表达式，在eval可以直接转换并计算结果，但是小程序禁用了，在这里我们选择自己写一个，并给调用*/if (btnValue == "dot"){if (!newDotSign){res=res+'.';newDotSign = true;}} else if (btnValue == "clear"){res = '0';newDotSign = false;} else if (btnValue == "back") {var length = res.length;if (length>1){var deleta = res.substr(length-1,1);res = res.substr(0,length-1);if (deleta=='.'){newDotSign = false;}}else{res="0";}} else if (btnValue == "+" || btnValue == "-" || btnValue == "*" || btnValue == "/"){if(!isNaN(res.charAt(res.length-1))){newDotSign = false;res = res + btnValue;}}}this.setData({result :  res,dotSign : newDotSign,})},clickEqualBtn: function (e) {//判断最后一个字符是否只是为一个符号，如果是则删掉该符号var res = this.data.result;var newDotSign = this.data.dotSign;var length = res.length;var lastS = res.charAt(length - 1);console.log(lastS);if (isNaN(lastS)){res = res.substr(0, length - 1);if (lastS=='.'){newDotSign = false;}}console.log(res);var final = util.calcExpression(res);//转为结果为字符否则会报错(输出结果为数字，函数接收的数据不为字符时会报错)var charRes = String(final);this.setData({result: charRes,dotSign: newDotSign,});}})

5、创建mathStr.js文件给调用,调用方式

var util = require('../../utils/mathStr.js');

var final = util.calcExpression(传入的运算字符串);

/**计算没有括号的表达式的值(操作符限定为'+'、'-'、'*'、'/') */
function calcExpressionWithoutQuote(expression) {if ((expression.indexOf('(') > -1) || (expression.indexOf(')') > -1)) {return calcQuote(expression);}var operators = [];var nums = [];var lastOperatorIndex = -1;for (var i = 0; i < expression.length; i++) {var charAtIndex = expression.charAt(i);if (isOperatorChar(charAtIndex)) {operators[operators.length] = charAtIndex;nums[nums.length] = expression.substring(lastOperatorIndex + 1, i);lastOperatorIndex = i;}if (i == (expression.length - 1) && lastOperatorIndex < i) {nums[nums.length] = expression.substring(lastOperatorIndex + 1, expression.length);}}if (operators.length <= 0 || nums.length <= 0) {return expression;}while (operators.indexOf('*') > -1 || operators.indexOf('/') > -1) {operators.forEach(function (value, index) {if (value == '*' || value == '/') {// 拿到操作符位置。var tempResult = calcExpressionWithSingleOperator(nums[index], nums[index + 1], value);operators.splice(index, 1);nums.splice(index, 2, [tempResult]);}});}var calcResult = nums[0] * 1;// 现在只剩下'+'、'-'了if (operators.indexOf('+') > -1 || operators.indexOf('-') > -1) {for (var index = 0; index < operators.length; index++) {var value = operators[index];if (value == '+' || value == '-') {calcResult = calcExpressionWithSingleOperator(calcResult, nums[index + 1], value);}}return calcResult;} else {return (nums[0] * 1);}}
/*** 计算只有一个操作符的表达式的值(操作符限定为'+'、'-'、'*'、'/')*/
function calcExpressionWithSingleOperator(num1, num2, operator) {if (operator == '+') return num1 * 1 + num2 * 1;if (operator == '-') return num1 * 1 - num2 * 1;if (operator == '*') return num1 * num2;if (operator == '/') return num1 / num2;return NaN;
}/** 计算算术表达式的值 */
function calcExpression(expression) {expression = expression.replace(/\s/g, '').replace(/÷/g, '/').replace(/x/g, '*').replace(/×/g, '*').replace(/X/g, '*');if (getCharCountInString(expression, '(') != getCharCountInString(expression, ')'))return NaN;while (expression && (expression.indexOf('(') > -1) && (expression.indexOf(')') > -1)) {var firstRightQuoteIndex = expression.indexOf(')');var leftQuoteIndex = expression.indexOf('(');for (var i = leftQuoteIndex; i < firstRightQuoteIndex; i++) {if (expression.charAt(i) == '(') {leftQuoteIndex = i;}}var tempExpression = expression.substring(leftQuoteIndex + 1, firstRightQuoteIndex);var tempValue = calcExpressionWithoutQuote(tempExpression);expression = expression.substring(0, leftQuoteIndex) + tempValue + expression.substring(firstRightQuoteIndex + 1, expression.length);}return calcExpressionWithoutQuote(expression);
}/**获取字符串中某子字符串出现次数 */
function getCharCountInString(strings, chars) {return (strings.split(chars)).length - 1;
}
/**判断字符是否是运算符 */
function isOperatorChar(aimChar) {return '+-*/'.indexOf(aimChar) > - 1;
}module.exports = {//导出函数，供需求处调用calcExpression: calcExpression
}

2-7 微信小程序计算器相关推荐

微信小程序-计算器小程序《从零开始学微信小程序》
主界面的代码块  <view class="container" ...
微信小程序--计算器demo实现
最近微信小程序很火,根据官网简单实现计算器功能,重在动手体验. 微信小程序官网:https://mp.weixin.qq.com/debug/wxadoc/dev/index.html 计算器功能:加 ...
【微信小程序——计算器】
文章目录前言 1.计算器的效果图 2.index.wxml 3.index.js 3.index.json 5.index.wxss 总结前言微信小程序是一种不需要下载安装即可使用的应用,它实 ...
微信小程序计算器（含源码）、含js精确运算代码
目录一.引言与效果图二.源码 0.目录结构: 1.xxxx.wxml文件 2.样式文件 (1)xxxx.less文件 (2)xxxx.wxss文件 (不会使用 less 的可以用这个) 3.xxx ...
2021-06-15记录端午假期学习微信小程序计算器
程序参考GitHub/wxapp-sCalc-master 效果如图 calc.wxss,calc.wxml,calc.js.内容如下由于手机编写博客屏幕太小不好处理排班讲究看吧!走了些许弯 ...
微信小程序--计算器（附源码下载地址）
一.界面 1.主要界面:基本计算 2.扩展界面:单位计算 3.其它界面房贷计算.正则表达式等,具体可扫码试用三.代码: 1.主界面 index.js Page({ data: { idb: &qu ...
微信小程序 - 计算器（含历史记录）
1.实现效果图 2.代码编写 index.wxml   <view ...
微信小程序——计算器案例
文章目录案例链接项目展示页面设计页面样式页面逻辑 util-->calc.js index.js 全部js 案例链接 https://download.csdn.net/downloa ...
微信小程序科学计算器（微信小程序+java+python）
微信小程序之科学计算器 (微信小程序+java+python) 先把自己的小程序和页面贴出来 1.前后端实现步骤: 1.前端采用的就是微信小程序开发工具,后端采用的是以springboot为基础,调用 ...

2-7 微信小程序计算器

2-7 微信小程序计算器相关推荐

最新文章

热门文章