微信小程序之简易计算器的制作

简介: 微信小程序之简易计算器的制作

笔记资料:

image.png

绪论

  小程序的计算器简易制作我们将分为两个部分来讲解

  1. 前端展示界面
  2. 后台逻辑设计

一.计算器前端界面设计

我们准备利用input组件,view组件完成我们的界面设计

<input placeholder="请输入数字A" bindinput="dataA"></input>
<view>+</view>
<input placeholder="请输入数字B" bindinput="dataB"></input>
<view>=</view>

我们的求和结果进行数据绑定

<view>{{sumALL}}</view>

以上我们完成了计算器的前端界面设计,非常简陋,同时写了两个事件,dataAdataB,接下来完善我们的逻辑部分:

二.计算器逻辑部分设计

page({
  //设置全局变量
  let a=0;
  let b=0;
  dataA(e){
    console.log("获取A的值",e.detail.value)
    a=e.detail.value
  },
  dataB(e){
    console.log("获取B的值",e.detail.value)
    b=e.detail.value
  },
  sum(){
  let x=parseInt(a);//把字符串的a值转化成整数
  let y=parseInt(b);
  
  }
  
})

对于求和部分怎么办呢?我们需要用到一个动态的固定绑定值,用求和事件将它包起来:

this.setData({
  sumALL:x+y
})

完整版代码JS部分:

page({
  //设置全局变量
  let a=0;
  let b=0;
  dataA(e){
    console.log("获取A的值",e.detail.value)
    a=e.detail.value
  },
  dataB(e){
    console.log("获取B的值",e.detail.value)
    b=e.detail.value
  },
  sum(){
  let x=parseInt(a);//把字符串的a值转化成整数
  let y=parseInt(b);
  
  this.setData({
  sumALL:x+y
})
  }
  
})


目录
相关文章
|
4月前
|
机器学习/深度学习 算法 测试技术
NSA稀疏注意力深度解析:DeepSeek如何将Transformer复杂度从O(N²)降至线性,实现9倍训练加速
本文将深入分析NSA的架构设计,通过详细的示例、可视化展示和数学推导,构建对其工作机制的全面理解,从高层策略到底层硬件实现均有涉及。
384 0
NSA稀疏注意力深度解析:DeepSeek如何将Transformer复杂度从O(N²)降至线性,实现9倍训练加速
|
3月前
|
安全 网络协议 算法
Nmap网络扫描工具详细使用教程
Nmap 是一款强大的网络发现与安全审计工具,具备主机发现、端口扫描、服务识别、操作系统检测及脚本扩展等功能。它支持多种扫描技术,如 SYN 扫描、ARP 扫描和全端口扫描,并可通过内置脚本(NSE)进行漏洞检测与服务深度枚举。Nmap 还提供防火墙规避与流量伪装能力,适用于网络管理、渗透测试和安全研究。
506 1
|
SQL Java 数据库连接
日志输出-查看 SQL:深入分析 MyBatis 执行过程
日志输出-查看 SQL:深入分析 MyBatis 执行过程
401 0
GIGE 协议摘录 —— 引导寄存器(四)(中)
GIGE 协议摘录 —— 引导寄存器(四)
279 1
|
SQL 缓存 关系型数据库
SqlAlchemy 2.0 中文文档(三十五)(4)
SqlAlchemy 2.0 中文文档(三十五)
212 1
|
人工智能 Python Shell
CodeFormer——AI驱动的面部图像修复与增强
CodeFormer是由南洋理工大学和商汤科技联合研发的AI人脸复原模型,结合VQGAN和Transformer技术,能从模糊或马赛克图像中生成清晰图像。它具备老照片修复、黑白照片彩色化、马赛克修复和低码率视频增强等功能。安装过程涉及miniconda3、Python环境配置、相关库的安装及模型训练数据下载。在测试视频增强时,虽然初期遇到ffmpeg导入问题,但通过安装ffmpeg-python得以解决,不过CPU占用率高。此外,还展示了对图片进行增强的命令行操作及结果示例。
|
存储 传感器 算法
基于ACO蚁群优化算法的WSN网络路由优化matlab仿真
摘要(Markdown格式): - 📈 ACO算法应用于WSN路由优化,MATLAB2022a中实现,动态显示迭代过程,输出最短路径。 - 🐜 算法模拟蚂蚁寻找食物,信息素更新与蚂蚁选择策略确定路径。信息素增量Δτ += α*τ*η,节点吸引力P ∝ τ / d^α。 - 🔁 算法流程:初始化→蚂蚁路径选择→信息素更新→判断结束条件→输出最优路由。优化WSN能量消耗,降低传输成本。
|
开发框架 Python
Web 框架 Flask 快速入门(一)flask基础与模板
🌴 Flask基础和模板 1、web框架的作用 避免重复造轮子,app程序不必关心于服务器的沟通方式,而专注于核心的业务逻辑实现。 稳定,可扩展性强
379 0
|
监控 网络安全 网络架构
DMZ 和防火墙之间的区别
【4月更文挑战第10天】
1089 2
|
SQL 负载均衡 安全
阿里云DTS踩坑经验分享系列|全量迁移加速方法指南
阿里云数据传输服务DTS是一个便捷、高效的数据迁移和数据同步服务。一般而言,一个完整的DTS数据迁移任务主要包括预检查、结构迁移,全量迁移,增量迁移等阶段,其中全量迁移会将源数据库的存量数据全部迁移到目标数据库。面对各种各样的用户场景, 本文将重点介绍如何使用阿里云DTS实现全量数据迁移加速,以缩短迁移时间,确保数据迁移的效率和稳定性。
1199 0