小程序 - 计算器

小程序交互练习 - 计算器小程序

目录

计算器

功能描述

准备工作

创建项目

配置导航栏

创建utils目录

math.js文件内容

calc.js文件内容

页面内容

页面样式内容

页面脚本事件

功能截图

总结

计算器

在日常生活中，计算器是人们广泛使用的工具，可以帮助我们快速且方便地计算金额、成本、利润等。下面将会讲解如何开发一个“计算器”微信小程序。

功能描述

在计算器中可以进行整数和小数的加(+)、减(－)、乘(×)、除(÷)运算。​“C”按钮为清除按钮，表示将输入的数字全部清空；​“DEL”按钮为删除按钮，表示删除前面输入的一个数字；​“+/-”按钮为正负号切换按钮，用于实现正负数切换；​“.”按钮为小数点按钮，表示在计算过程中可以输入小数进行计算；​“=”按钮为等号按钮，表示对输入的数字进行计算。

准备工作

创建项目

在微信开发者工具中创建一个微信小程序项目，项目名称为“计算器”​，模板选择“不使用模板”。

配置导航栏

在pages/index/index.json文件中配置页面导航栏，具体代码如下：

{"usingComponents": {"navigation-bar": "/components/navigation-bar/navigation-bar"},"navigationBarTitleText": "计算器"
}

创建utils目录

在项目根目录中创建utils目录，加载math.js和cals.js文件。

math.js文件内容
// 精准计算功能，用于解决JavaScript浮点数运算精度不准确的问题
module.exports = {// 加法add: function (a, b) {var r1, r2, mtry {r1 = a.toString().split('.')[1].length} catch (e) {r1 = 0}try {r2 = b.toString().split('.')[1].length} catch (e) {r2 = 0}m = Math.pow(10, Math.max(r1, r2))return (a * m + b * m) / m},// 减法sub: function (a, b) {var r1, r2, m, ntry {r1 = a.toString().split('.')[1].length} catch (e) {r1 = 0}try {r2 = b.toString().split('.')[1].length} catch (e) {r2 = 0}m = Math.pow(10, Math.max(r1, r2))// 动态控制精度长度n = (r1 >= r2) ? r1 : r2return ((a * m - b * m) / m).toFixed(n)},// 乘法mul: function (a, b) {var m = 0,s1 = a.toString(),s2 = b.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)},// 除法div: function (a, b) {var t1 = 0,t2 = 0,r1, r2try {t1 = a.toString().split('.')[1].length} catch (e) {}try {t2 = b.toString().split('.')[1].length} catch (e) {}r1 = Number(a.toString().replace('.', ''))r2 = Number(b.toString().replace('.', ''))return (r1 / r2) * Math.pow(10, t2 - t1)}}  
calc.js文件内容
// 引入math.js模块，获取math对象
const math = require('./math.js')
// 计算器中的数字处理
module.exports = {target: 'num1', // 表示当前正在输入哪个数字，取num1或num2num1: '0', // 保存第1个数字num2: '0', // 保存第2个数字op: '', // 运算符，值可以是+、-、×、÷// 设置当前数字setNum(num) {this[this.target] = num},// 获取当前数字getNum() {return this[this.target]},// 切换到第2个数字changeNum2() {this.target = 'num2'},// 重置reset() {this.num1 = '0'this.num2 = '0'this.target = 'num1'this.op = ''},// 进行运算getResult() {let result = 0if (this.op === '+') {result = math.add(this.num1, this.num2)} else if (this.op === '-') {result = math.sub(this.num1, this.num2)} else if (this.op === '×') {result = math.mul(this.num1, this.num2)} else if (this.op === '÷') {result = math.div(this.num1, this.num2)}return result}
}

 

页面内容

在pages/index/index.wxml文件中编写“计算器”微信小程序的页面结构，

具体内容如下：

<!--index.wxml-->
<navigation-bar title="计算器" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<!-- 结果区域 -->
<view class="result"><!-- 当前计算式 --><view class="result-sub">{{sub}}</view><!-- 当前计算结果 --><view class="result-num">{{num}}</view>
</view>
<!-- 按钮区域 -->
<view class="btns"><!-- 第一行按钮 --><view><!-- 清除按钮 --><view hover-class="bg" hover-start-time="50" bind:tap="resetBtn">C</view><!-- 删除按钮 --><view hover-class="bg" hover-start-time="50" bind:tap="delBtn">DEL</view><!-- 正负号切换按钮 --><view hover-class="bg" hover-start-time="50" bind:tap="negBtn">+/-</view><!-- 除号按钮 (+:Positive,-:Negtive)--><view hover-class="bg" hover-start-time="50" bind:tap="opBtn" data-val="÷">÷</view></view><!-- 第二行按钮 --><view><!-- 7按钮 --><view hover-class="bg" hover-start-time="50" bind:tap="numBtn" data-val="7">7</view><!-- 8按钮 --><view hover-class="bg" hover-start-time="50" bind:tap="numBtn" data-val="8">8</view><!-- 9按钮 --><view hover-class="bg" hover-start-time="50" bind:tap="numBtn" data-val="9">9</view><!-- 乘号按钮--><view hover-class="bg" hover-start-time="50" bind:tap="opBtn" data-val="×">×</view></view><!-- 第三行按钮 --><view><!-- 4按钮 --><view hover-class="bg" hover-start-time="50" bind:tap="numBtn" data-val="4">4</view><!-- 5按钮 --><view hover-class="bg" hover-start-time="50" bind:tap="numBtn" data-val="5">5</view><!-- 6按钮 --><view hover-class="bg" hover-start-time="50" bind:tap="numBtn" data-val="6">6</view><!-- 减号按钮--><view hover-class="bg" hover-start-time="50" bind:tap="opBtn" data-val="-">-</view></view><!-- 第四行按钮 --><view><!-- 4按钮 --><view hover-class="bg" hover-start-time="50" bind:tap="numBtn" data-val="1">1</view><!-- 5按钮 --><view hover-class="bg" hover-start-time="50" bind:tap="numBtn" data-val="2">2</view><!-- 6按钮 --><view hover-class="bg" hover-start-time="50" bind:tap="numBtn" data-val="3">3</view><!-- 减号按钮--><view hover-class="bg" hover-start-time="50" bind:tap="opBtn" data-val="+">+</view></view><!-- 第五行按钮 --><view><!-- 0按钮 --><view hover-class="bg" hover-start-time="50" bind:tap="numBtn" data-val="0">0</view><!-- 点按钮 --><view hover-class="bg" hover-start-time="50" bind:tap="dotBtn">.</view><!-- 等号按钮 —— 进行计算 --><view hover-class="bg" hover-start-time="50" bind:tap="execBtn">=</view></view>
</view>

页面样式内容

在pages/index/index.wxss文件中编写页面样式，具体代码如下：

/**index.wxss**/
/* 页面样式 */
page {height: 100vh;display: flex;flex-direction: column;color: #555;}/* 结果区域样式 */.result {flex: 1;  /* 垂直均分手机屏幕，因为flex-direction:column */background-color: #f3f6fe;position: relative;}/* 当前计算式样式 */.result-sub {font-size: 52rpx;position: absolute;bottom: 16vh;right: 3vw;}/* 当前计算结果样式 */.result-num {font-size: 100rpx;position: absolute;bottom: 3vh;right: 3vw;}/* 按钮区域样式 */.btns {flex: 1;display: flex;flex-direction: column;font-size: 48rpx;border-top: 1rpx solid #ccc;border-left: 1rpx solid #ccc;}/* 按钮区域每一行的样式 */.btns > view {flex: 1;display: flex;}/* 按钮区域每一行中每个按钮的样式 */.btns > view > view {flex-basis: 25%; /* 每个按钮均分一行空间 */border-right: 1rpx solid #ccc; /* 右边框线 */border-bottom: 1rpx solid #ccc;  /* 底边框线 */box-sizing: border-box;  /* 控制盒模型的尺寸计算方式 */display: flex; /* 弹性布局，默认是水平方向 */align-items: center; /* 交叉轴居中 - 垂直居中 */justify-content: center; /* 主轴居住 - 水平居中 */}/* 0按钮跨2列,view:first-child ~ view:nth-child(1) */.btns > view:last-child > view:nth-child(1) {flex-basis: 50%;}/* 清除样式类 */.btns > view:first-child > view:first-child {color: #f00;}/* 最后一列按钮样式 */.btns > view > view:last-child {color: #fc8100;}/* 按钮的盘旋样式类 */.bg {background: #eee;}

页面脚本事件

在pages/index/index.js文件的Page({})中编写页面逻辑，具体代码如下：

// index.js
const calc = require('../../utils/calc.js')
Page({data: {sub: '',num: '0'},// 设置3个变量标识numChangeFlag: false,execFlag: false,resultFlag: false,numBtn: function (e) {// 点击数字按钮，获取对应的数字，将其值赋给numvar num = e.target.dataset.valif (this.resultFlag) {this.resetBtn()}// 设置输入的数字calc.setNum(this.data.num === '0' ? num : this.data.num + num)// 在页面中显示输入的数字this.setData({num: calc.getNum()})},opBtn: function (e) {calc.op = e.target.dataset.val// 判断是否已经输入第2个数字if (this.execFlag) {this.execFlag = false// 已经输入第2个数字，再判断当前是否为计算结果状态if (this.resultFlag) {// 当前是计算结果状态，需要在计算结果的基础上计算this.resultFlag = false} else {// 连续计算，将计算结果作为第1个数字calc.num1 = calc.getResult()}}this.numChangeFlag = trueif (this.numChangeFlag) {this.numChangeFlag = falsethis.execFlag = true // 代表已输入第2个数字this.data.num = '0' // 将num设为0，避免数字进行拼接calc.changeNum2() // 将target切换到第2个数字}this.setData({sub: calc.num1 + ' ' + calc.op + ' ',num: calc.num2})},execBtn: function () {if (this.numChangeFlag) {this.numChangeFlag = falsethis.execFlag = truecalc.num2 = this.data.num}// 如果已经输入第2个数字，执行计算操作if (this.execFlag) {this.resultFlag = truevar result = calc.getResult()this.setData({sub: calc.num1 + ' ' + calc.op + ' ' + calc.num2 + ' = ',num: result})calc.num1 = resultcalc.num2 = '0'}},resetBtn: function () {calc.reset() // 调用reset()实现数字、运算符的重置this.execFlag = falsethis.numChangeFlag = falsethis.resultFlag = falsethis.setData({sub: '',num: '0'})},dotBtn: function () {// 如果当前是计算结果状态，则重置计算器if (this.resultFlag) {this.resetBtn()}// 如果等待输入第2个数字且还没有输入第2个数字，设为“0.”if (this.numChangeFlag) {this.numChangeFlag = falsecalc.setNum('0.')} else if (this.data.num.indexOf('.') < 0) {// 如果当前数字中没有“.”，需要加上“.”calc.setNum(this.data.num + '.')}this.setData({num: calc.getNum()})},negBtn: function () {// 如果是0，不加正负号if (this.data.num === '0' || this.data.num === '0.') {return}// 如果当前是计算结果状态，则重置计算器if (this.resultFlag) {this.resetBtn()} else if (this.data.num.indexOf('-') < 0) {// 当前没有负号，加负号calc.setNum('-' + this.data.num)} else {// 当前有负号，去掉负号calc.setNum(this.data.num.substr(1))}this.setData({num: calc.getNum()})},delBtn: function () {// 如果当前是计算结果状态，则重置计算器if (this.resultFlag) {return this.resetBtn()}// 非计算结果状态，删除当前数字中最右边的一个字符var num = this.data.num.substr(0, this.data.num.length - 1)calc.setNum(num === '' || num === '-' || num === '-0.' ? '0' : num)this.setData({num: calc.getNum()})}
})

功能截图

总结

小程序交互-计算器小程序

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/888745.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

视频监控汇聚平台：Liveweb安防监控平台实现接入监控视频集中管理方案

视频监控汇聚平台：Liveweb安防监控平台实现接入监控视频集中管理方案

随着各行业数字化转型的不断推进&#xff0c;视频监控技术在行业内的安防应用及管理支撑日益增多。然而&#xff0c;由于前期规划不清晰、管理不到位等问题&#xff0c;视频监管系统普遍存在以下问题&#xff1a; 1. 各部门单位在视频平台建设中以所属领域为单位&#xff0c;导…
阅读更多...
遇到问题：hive中的数据库和sparksql 操作的数据库不是同一个。

遇到问题：hive中的数据库和sparksql 操作的数据库不是同一个。

遇到的问题&#xff1a; 1、hive中的数据库和sparksql 操作的数据库不同步。 观察上面的数据库看是否同步 &#xff01;&#xff01;&#xff01; 2、查询服务器中MySQL中hive的数据库&#xff0c;发现创建的位置没有在hdfs上&#xff0c;而是在本地。 这个错误产生的原因是&…
阅读更多...
SQL靶场第六关

SQL靶场第六关

一.判断闭合点 闭合点是" 输入?id1页面无变化 输入?id1"页面报错&#xff0c;加上--&#xff0c;页面恢复正常&#xff0c;说明闭合点是" 二.判断列数 输入?id1" order by 3--页面正常 输入?id1" order by 4--页面异常&#xff0c;说明有3列…
阅读更多...
fedora下Jetbrains系列IDE窗口中文乱码解决方法

fedora下Jetbrains系列IDE窗口中文乱码解决方法

可以看到窗口右部分的中文内容为小方块。 进入 Settings - Appearance & Behavior - Appearance - Use custom font : Note Sans Mono CJK SC &#xff0c;设置后如下图&#xff1a;
阅读更多...
解决IDEA的easycode插件生成的mapper.xml文件字段之间逗号丢失

解决IDEA的easycode插件生成的mapper.xml文件字段之间逗号丢失

问题 easycode插件生成的mapper.xml文件字段之间逗号丢失&#xff0c;如图 解决办法 将easycode(在settings里面的othersettings)设置里面的Template的mapper.xml.vm和Global Config的mybatisSupport.vm的所有$velocityHasNext换成$foreach.hasNext Template的mapper.xml.vm(…
阅读更多...
科技型中小企业信息库数据（1952-2021年）

科技型中小企业信息库数据（1952-2021年）

一、包含指标&#xff1a; 企业名称 登记状态 法定代表人 注册资本 成立日期 核准日期 所属省份 所属城市 所属区县 电话 更多电话 邮箱 更多邮箱 统一社会信用代码 纳税…
阅读更多...
机器学习决策树原理详解

机器学习决策树原理详解

一、引言 在当今蓬勃发展的人工智能与大数据领域&#xff0c;大模型正以前所未有的影响力改变着众多行业的格局。而决策树作为机器学习算法家族中的经典成员&#xff0c;以其简洁直观的特点和广泛的适用性&#xff0c;不仅能独立解决诸多实际问题&#xff0c;更是诸多先进大模…
阅读更多...
Day2——需求分析与设计

Day2——需求分析与设计

教师端签到应用软件的需求分析&#xff1b; 产品经理如何写好产品需求文档&#xff08;附模板&#xff09; 需求分析是软件开发过程中的关键步骤&#xff0c;它确保了开发的软件能够满足用户的需求。以下是进行需求分析的具体步骤&#xff1a; 1. 确定分析目标 明确教师端签到…
阅读更多...
个人IP建设：简易指南

个人IP建设：简易指南

许多个体创业者面临的一个关键挑战是如何为其企业创造稳定的需求。 作为个体创业者&#xff0c;您无法使用营销团队&#xff0c;因此许多人通过推荐和他们的网络来产生需求。因此&#xff0c;扩大您的网络是发展您的业务和产生持续需求的最佳策略。 这就是个人IP和品牌发挥作…
阅读更多...
Leetcode—1539. 第 k 个缺失的正整数【简单】

Leetcode—1539. 第 k 个缺失的正整数【简单】

2024每日刷题&#xff08;206&#xff09; Leetcode—1539. 第 k 个缺失的正整数 C实现代码 class Solution { public:int findKthPositive(vector<int>& arr, int k) {int missing 1;int cur 1;int n arr.size();int missingCnt 0;int ptr 0;for(; missingCn…
阅读更多...
STM32串口接收与发送(关于为什么接收不需要中断而发生需要以及HAL_UART_Transmit和HAL_UART_Transmit_IT的区别)

STM32串口接收与发送(关于为什么接收不需要中断而发生需要以及HAL_UART_Transmit和HAL_UART_Transmit_IT的区别)

一、HAL_UART_Transmit和HAL_UART_Transmit_IT的区别 1. HAL_UART_Transmit_IT&#xff08;非阻塞模式&#xff09;&#xff1a; HAL_UART_Transmit_IT 是非阻塞的传输函数&#xff0c;也就是说&#xff0c;当你调用 HAL_UART_Transmit_IT 时&#xff0c;它不会等到数据完全发…
阅读更多...
2024年华中杯数学建模B题使用行车轨迹估计交通信号灯周期问题解题全过程文档及程序

2024年华中杯数学建模B题使用行车轨迹估计交通信号灯周期问题解题全过程文档及程序

2024年华中杯数学建模 B题 使用行车轨迹估计交通信号灯周期问题 原题再现 某电子地图服务商希望获取城市路网中所有交通信号灯的红绿周期&#xff0c;以便为司机提供更好的导航服务。由于许多信号灯未接入网络&#xff0c;无法直接从交通管理部门获取所有信号灯的数据&#x…
阅读更多...
数字图像处理 实验三 数字图像的几何运算

数字图像处理 实验三 数字图像的几何运算

一、实验目的 掌握图像的基本几何变换的方法 1. 图像的平移 2. 图像的旋转 二、实验环境 1. PC计算机 2. MatLab软件/语言包括图像处理工具箱(Image Processing Toolbox) 3. 实验所需要的图片 三、实验原理 提示&#xff1a;图片平移就是实现运算 四、实验图像 图片名称&a…
阅读更多...
11.20[JAVAEXP3]重定向细究【DEBUG】

11.20[JAVAEXP3]重定向细究【DEBUG】

设置了根域名访问为testServlet,让他重定向到首页为test.jsp&#xff0c;事实上也都触发了&#xff0c;但是最后显示的为什么不是test.jsp生成页面&#xff0c;依然还是index.jsp生成的页面&#xff1f;&#xff1f; 重定向是通过Dispatcher进行的&#xff0c;而不是sendRedir…
阅读更多...
大端存储和小端存储究竟是什么

大端存储和小端存储究竟是什么

数据存储方式 数据在计算机中表现为是0101的二进制形式,cpu在读取数据的时候需要从低地址向高地址读取 注意: 永远都是从低地址开始读取数据 低地址和高地址 内存地址空间&#xff1a; 计算机的内存被划分为一个连续的地址空间&#xff0c;这个空间从0开始&#xff0c;一直…
阅读更多...
8. Debian系统中显示屏免密码自动登录

8. Debian系统中显示屏免密码自动登录

本文介绍如何在Debian系统上&#xff0c;启动后&#xff0c;自动免密登录&#xff0c;不卡在登录界面。 1. 修改lightDM配置文件 嵌入式Debian系统采用lightDM显示管理器&#xff0c;所以&#xff0c;一般需要修改它的配置文件/etc/lightdm/lightdm.conf&#xff0c;找到[Seat…
阅读更多...
三菱伺服JET产品线（选型说明）

三菱伺服JET产品线（选型说明）

伺服放大器功能提升 伺服放大器MELSERVO-JET系列为进一步优化了独家控制引擎的高性能伺服放大器。 可通过与支持CC-LinK IE TSN的运动控制器的同步通信,进行高 速、高精度的运动控制。 除了旋转型伺服电机以外,还支持线性伺服电机。MR-JET-G-N1支持EtherCAT。 旋转型伺服电机 …
阅读更多...
关于Chrome自动同步书签的解决办法

关于Chrome自动同步书签的解决办法

前言 并不一定适用所有用户&#xff0c; 目前我在网上搜集了一些资料&#xff0c;也做了一些尝试。 就我个人总结的经验来讲&#xff0c;分享大家以下几种办法&#xff1a; 1.书签同步插件 点击如下&#x1f517;&#xff1a; Chrome书签同步https://bm.famend.cn/ …
阅读更多...
基于elementui的远程搜索下拉选择分页组件

基于elementui的远程搜索下拉选择分页组件

在开发一个练手项目的时候&#xff0c;需要一个远程搜索的下拉选择组件&#xff1b; elementui自带的el-select支持远程搜索&#xff1b;但如果一次性查询的数据过多&#xff1b;会导致卡顿。故自己实现一个可分页的远程下拉选择组件 效果&#xff1a; 代码&#xff1a; <…
阅读更多...
告别充电焦虑：移动充电机器人的革命性解决方案

告别充电焦虑：移动充电机器人的革命性解决方案

移动充电机器人作为新能源汽车领域的黑科技&#xff0c;正逐渐崭露头角。它的出现为电动汽车充电带来了全新的解决方案&#xff0c;解决了传统充电方式的诸多痛点。 新能源汽车具有诸多优点&#xff0c;如科技含量高、噪音小、使用成本低等&#xff0c;但 “续航焦虑”“充电焦…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023