uniapp写一个计算器用于记账（微信小程序，APP）

最新推荐文章于 2024-05-26 13:14:51 发布
最新推荐文章于 2024-05-26 13:14:51 发布
阅读量1.1k 收藏 2
点赞数 1
文章标签： uni-app 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csdnyp/article/details/134187880
版权

提要：自己用uniapp写了一个记账小程序（目前是小程序），写到计算器部分，在网上找了别人写的计算器，大多数逻辑都是最简单的，都不能满足一个记账计算器的基本逻辑。与其在网上找来找去，还不如自己多捣鼓捣鼓。

 git地址

https://gitee.com/yapplee/kog-calculator.git

效果图 

 

主要代码

贴部分主要代码，其它代码去git拉代码看，用HBuilderX能直接运行

可自行修改布局，自行加入除法运算

 

kogmini
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用UniApp构建简易计算器
emmp40的博客
06-20 1055
通过Vue.js的模板语法和UniApp提供的丰富功能，我们可以快速开发出一个具有基本计算功能的应用程序。如果你对跨平台应用开发感兴趣，或者想要寻找一个强大且易用的工具来实现你的创意，那么不妨尝试一下UniApp。按钮部分使用嵌套的`<view>`和`<button>`元素来创建一系列按钮，而按钮的文本和样式则通过Vue绑定实现。第三步：处理计算逻辑 我们需要在页面的script标签中添加逻辑代码，来处理按钮的点击事件和计算逻辑。在这段代码中，我们使用了Vue.js的模板语法来定义计算器页面的结构。
uniapp实现计算器功能
10-05
使用uniapp进行简单移动开发
用uniapp实现一个简单的计算器
06-08
用uniapp实现一个简单的计算器，亲测有效！
uniapp房贷计算器,适用pc移动端
02-01
房贷计算器，功能全面，设计及页面好看，适用于移动端和pc端
精仿苹果自带的计算器，颜值高！基于SUMER UI3.0和Uniapp前端框架！在“计算器” App中，你可以使用标准计算器进行基本的算术计算。或使用科学计算器进行指数函数、对数函数和三角函数的计算。
最新发布
我的昵称：程序员SUMER（全网同名）
05-26 374
精仿苹果自带的计算器，颜值高！基于SUMER UI3.0和uniapp前端框架！在“计算器” App 中，你可以使用标准计算器进行基本的算术计算。或使用科学计算器进行指数函数、对数函数和三角函数的计算。
uniapp实现简易计算器
weixin_47586598的博客
03-20 1512
uniapp实现简易计算器
uniapp中制作战力计算器
在无知中学习，在学习中成长，在成长中学习
09-15 1043
uniapp中制作战力计算器 <template> <view class="calculate-wrap"> <!-- 计时器-start --> <view class="calculate-screen"> <view class="calculate-screen-title"> <image class="calculate-screen-small" mode="aspectFill" src="@/p
uniapp中实现简易计算器
纸鸢的博客
02-02 3843
uniapp中实现简易计算器 主要问题：在计算器的实现过程中会遇到小数点计算精度； 此计算器是依赖了uni-popup的弹出层插件，可在uniapp官方组件中查找扩展插件popup弹窗层下载，也可直接点击该（https://ext.dcloud.net.cn/plugin?id=329）链接直接下载 计算器效果图 HTML源码 <template> <view class="uni-popup-calculator"> <view class="uni-popup-ca
微信小程序 简易计算器 (源码)
05-30
微信小程序 简易计算器 (源码)微信小程序 简易计算器 (源码)微信小程序 简易计算器 (源码)微信小程序 简易计算器 (源码)微信小程序 简易计算器 (源码)微信小程序 简易计算器 (源码)微信小程序 简易计算器 (源码)微信...
uniapp房贷计算器小程序源码包
08-12
【uniapp房贷计算器小程序...总的来说，这个uniapp房贷计算器小程序源码包提供了一个实际的计算工具，涵盖了房贷计算的基本要素，并展示了uni-app在小程序开发中的实际应用，对于学习者和开发者都有很高的参考价值。
微信小程序简易计算器源码
03-07
微信小程序简易计算器源码是一个适合初学者的项目，旨在帮助新手快速掌握微信小程序的基本开发技能。这个项目实现了基本的加法、减法、乘法和除法运算，提供了直观的用户界面，用户可以通过点击按钮进行计算操作。接...
Android 计算器（仅限定两个数的运算）
10-18
Android 计算器（仅限定两个数的运算），运算完点击一个数会自动进行下一次运算，不用手动清楚前面的数据，有一个缺点：运算结果可能会损失精度
实现简单的计算器，一次性处理一串运算表达式
12-09
核心是算法，关于怎么一次性处理一连串的运算表达式，例如：1+2*3*4-5*6/7-8
科学计算器 微信小程序
10-20
微信小程序源码，前端源码，简单展示源码，原生小程序源码 非uniapp，仅供参考，如有涉及版权问题请联系作者。微信小程序源码，前端源码，简单展示源码，原生小程序源码 非uniapp，仅供参考，如有涉及版权问题请联系作者。
微信小程序 iOS计算器（截图+源码）
05-11
微信小程序 iOS计算器（截图+源码）微信小程序 iOS计算器（截图+源码）微信小程序 iOS计算器（截图+源码）微信小程序 iOS计算器（截图+源码）微信小程序 iOS计算器（截图+源码）微信小程序 iOS计算器（截图+源码）...
微信小程序源码简易计算器
11-19
微信小程序源码简易计算器本资源系百度网盘分享地址
uniapp 做的一个房贷计算器
陈熙之的博客
10-15 1254
在支付宝的文档中找到一个比较详细的公式 等额本息计算公式 每月还款额=贷款本金×[月利率×（1+月利率）^还款月数]÷[（1+月利率）^还款月数-1] 总支付利息：总利息=还款月数×每月月供额-贷款本金 每月应还利息=贷款本金×月利率×〔(1+月利率)^还款月数-(1+月利率)^(还款月序号-1)〕÷〔(1+月利率)^还款月数-1〕 每月应还本金=贷款本金×月利率×(1+月利率)^(还款月序号-1)÷〔(1+月利率)^还款月数-1〕 总利息=还款月数×每月月供额-贷款本金 等额本金计算..
uniapp实现计数器
qq_40791594的博客
03-30 875
Uni-app 是一个跨平台开发框架，可以使用 Vue 组件语法编写一次编译即可发布到多个平台的应用程序，包括iOS、Android、H5、微信小程序等。2.在页面组件中定义一个数据变量。3.点击按钮+1或者-1。
uni-app 仿 ios 计算器功能
qq_45032714的博客
05-06 417
使用 uni-app 仿 ios 计算器功能，附仓库地址 https://github.com/peng-xiao-shuai/calculator
用微信小程序写一个计算器
05-17
好的，下面是一个简单的微信小程序计算器代码示例： 1. 在微信开发者工具中创建一个新的小程序项目。 2. 在项目结构中找到 app.json 文件，在其中添加以下代码： ```json { "pages": [ "pages/index/index" ], "window": { "navigationBarTitleText": "计算器" } } ``` 这里我们只创建了一个页面 index，用于显示计算器界面。 3. 在 pages 目录下创建一个名为 index 的新目录，并在其中创建 index.wxml、index.js 和 index.wxss 三个文件。 4. 在 index.wxml 中添加以下代码： ```html <view class="container"> <view class="result">{{result}}</view> <view class="row"> <text class="button" bindtap="onTap" data-value="7">7</text> <text class="button" bindtap="onTap" data-value="8">8</text> <text class="button" bindtap="onTap" data-value="9">9</text> <text class="button" bindtap="onTap" data-value="/">÷</text> </view> <view class="row"> <text class="button" bindtap="onTap" data-value="4">4</text> <text class="button" bindtap="onTap" data-value="5">5</text> <text class="button" bindtap="onTap" data-value="6">6</text> <text class="button" bindtap="onTap" data-value="*">×</text> </view> <view class="row"> <text class="button" bindtap="onTap" data-value="1">1</text> <text class="button" bindtap="onTap" data-value="2">2</text> <text class="button" bindtap="onTap" data-value="3">3</text> <text class="button" bindtap="onTap" data-value="-">-</text> </view> <view class="row"> <text class="button" bindtap="onTap" data-value="0">0</text> <text class="button" bindtap="onTap" data-value=".">.</text> <text class="button" bindtap="onTap" data-value="=">=</text> <text class="button" bindtap="onTap" data-value="+">+</text> </view> <view class="row"> <text class="button clear" bindtap="onClear">清除</text> </view> </view> ``` 这里我们使用了微信小程序的基础组件 view 和 text 来构建计算器界面，同时使用了 data-value 属性来存储每个按键的值。 5. 在 index.js 中添加以下代码： ```javascript Page({ data: { result: '0', current: '0', operator: '', operand: '' }, onTap: function(event) { let value = event.currentTarget.dataset.value; if (value === '+' || value === '-' || value === '*' || value === '/') { // 操作符按键 this.setData({ current: '0', operator: value, operand: this.data.current }); } else if (value === '=') { // 等号按键 let a = parseFloat(this.data.operand); let b = parseFloat(this.data.current); let result; switch (this.data.operator) { case '+': result = a + b; break; case '-': result = a - b; break; case '*': result = a * b; break; case '/': result = a / b; break; } this.setData({ result: result.toString(), current: result.toString(), operator: '', operand: '' }); } else if (value === '.') { // 小数点按键 if (this.data.current.indexOf('.') === -1) { this.setData({ current: this.data.current + '.' }); } } else if (value === '0' && this.data.current === '0') { // 避免出现多个前导零 return; } else { // 数字按键 if (this.data.current === '0') { this.setData({ current: value }); } else { this.setData({ current: this.data.current + value }); } } }, onClear: function() { // 清除按键 this.setData({ result: '0', current: '0', operator: '', operand: '' }); } }) ``` 这里我们使用了 Page() 函数来创建一个页面对象，其中 data 对象用于存储计算器的状态，onTap() 函数用于处理用户按键事件，onClear() 函数用于清除计算器状态。 6. 在 index.wxss 中添加以下代码： ```css .container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; font-size: 32rpx; background-color: #f2f2f2; } .result { width: 100%; padding: 16rpx; text-align: right; background-color: #fff; } .row { display: flex; flex-direction: row; justify-content: space-between; width: 100%; } .button { flex: 1; display: flex; align-items: center; justify-content: center; height: 96rpx; margin: 8rpx; background-color: #fff; border: 1px solid #ddd; border-radius: 8rpx; color: #333; } .clear { background-color: #ff4d4f; color: #fff; } ``` 这里我们使用了 flex 布局来构建计算器界面，同时使用了 rpx 单位来实现自适应布局。 7. 在微信开发者工具中预览小程序，即可看到一个简单的计算器界面。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值