小程序 - 计算器

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

目录

计算器

功能描述

准备工作

创建项目

配置导航栏

创建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安防监控平台实现接入监控视频集中管理方案

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

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

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

渗透测试--哈希窃取哈希中继攻击

在渗透测试中&#xff0c;我们一旦能够将用户的哈希定向到我们的smbserver我们就可以滥用它们。主要有以下两种利用方式&#xff1a;1.窃取NTLM 2.中继NTLM。了解上述两种方式&#xff0c;将打开我们的视野&#xff0c;但在此之前&#xff0c;我们必须知道我们在什么场景下&…

SQL靶场第六关

一.判断闭合点 闭合点是" 输入?id1页面无变化 输入?id1"页面报错&#xff0c;加上--&#xff0c;页面恢复正常&#xff0c;说明闭合点是" 二.判断列数 输入?id1" order by 3--页面正常 输入?id1" order by 4--页面异常&#xff0c;说明有3列…

linux中fscy命令详解

在Linux系统中&#xff0c;fscy命令是一个用于检测和修复文件系统错误的工具。尽管搜索结果中没有直接提到fscy命令&#xff0c;但根据提供的信息&#xff0c;我们可以推断这可能是一个特定发行版或者特定版本的Linux系统中的命令&#xff0c;或者是fsck命令的一个变体。通常&a…

使用 Acme.sh 自动生成和续签免费 SSL 证书(含通配符支持)

Acme.sh 是一个开源的脚本&#xff0c;能够从 ZeroSSL、Let’s Encrypt 等证书颁发机构&#xff08;CA&#xff09;获取免费的 HTTPS 证书。该脚本特别简单易用&#xff0c;并且支持多种验证方式。下面将详细介绍使用 Acme.sh 生成、安装和更新证书的各个步骤。 Github地址 使用…

为什么类 UNIX 操作系统通常内置编译器?为什么 Windows 更倾向于直接使用二进制文件?

操作系统是否内置编译器&#xff0c;取决于该系统的设计目标、用户群体以及常见的使用场景。以下是内置编译器和直接使用二进制的设计理念和原因的分析&#xff1a; 为什么类 UNIX 操作系统通常内置编译器&#xff1f; 面向开发者的需求&#xff1a; 类 UNIX 系统&#xff08;如…

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

可以看到窗口右部分的中文内容为小方块。 进入 Settings - Appearance & Behavior - Appearance - Use custom font : Note Sans Mono CJK SC &#xff0c;设置后如下图&#xff1a;

解决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(…

有关EF Core

public class MyOwnDatabase : DbContext {public MyOwnDatabase(string connectionStringOrDbName "nameMyOwnDatabase"): base(connectionStringOrDbName){} } : base(connectionStringOrDbName) : base(...) 是在调用基类 DbContext 的构造函数。这里将 connect…

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

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

Android WebView加载本地html文件

加载本地文件分为两种&#xff0c;一种是加载手机文件中的&#xff0c;也就是html文件存储在我们的手机内存中。另外一种是加载assets中的文件 1.加载asstes中的html //1. asset目录下的index.html文件 String url "file:///android_asset/html/index.html"; webvi…

机器学习决策树原理详解

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

Day2——需求分析与设计

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

代码随想录训练营打卡第34天|62.不同路径 63.不同路径II

62.不同路径 一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角&#xff08;在下图中标记为 “Finish” &#xff09;。 问总共有多少条不同的路径&#…

个人IP建设:简易指南

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

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的区别)

一、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题 使用行车轨迹估计交通信号灯周期问题 原题再现 某电子地图服务商希望获取城市路网中所有交通信号灯的红绿周期&#xff0c;以便为司机提供更好的导航服务。由于许多信号灯未接入网络&#xff0c;无法直接从交通管理部门获取所有信号灯的数据&#x…

Flink集群搭建整合Yarn运行

Flink 集群 1. 服务器规划 服务器h1、h4、h5 2. StandAlone 模式&#xff08;不推荐&#xff09; 2.1 会话模式 在h1操作 #1、解压 tar -zxvf flink-1.19.1-bin-scala_2.12.tgz -C /app/#2、修改配置文件 cd /app/flink-1.19.1/conf vim conf.yaml ##内容&#xff1a;## j…