位置: IT常识 - 正文

【微信小程序】计算器案例(微信小程序怎么制作自己的小程序)

编辑:rootadmin
【微信小程序】计算器案例

推荐整理分享【微信小程序】计算器案例(微信小程序怎么制作自己的小程序),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:微信小程序店铺怎么开,微信小程序开发一个多少钱,微信小程序开发,微信小程序开发平台,微信小程序开发平台,微信小程序怎么制作自己的小程序,微信小程序怎么制作自己的小程序,微信小程序店铺怎么开,内容如对您有帮助,希望把文章链接给更多的朋友!

🏆今日学习目标:第二十一期——计算器案例 ✨个人主页:颜颜yan_的个人主页 ⏰预计时间:30分钟 🎉专栏系列:我的第一个微信小程序

计算器前言实现效果实现步骤wxmlwxssjs数字按钮事件处理函数计算按钮处理事件清空数字、删除数字、添加“.”事件处理函数总结前言

嗨嗨嗨,好久没更新小程序专栏了,本期浅浅用小程序写一个计算器。 最终代码会上传至资源噢~

实现效果

实现步骤【微信小程序】计算器案例(微信小程序怎么制作自己的小程序)

新建一个项目,在app.json中配置文件导航栏的标题和颜色。

先在index.wxml中编写计算器页面的外层结构,也就是两个view,第一个view显示数字和运算符,第二个view显示各种按钮。 然后在index.wxss中添加样式。在page(整体页面)中使用flex布局,将result和btns的flex设置为1,实现两个view平分页面的效果。

<view class="result"></view><view class="btns"></view>page{ display: flex; flex-direction: column; height: 100%;}.result{ flex: 1; background-color: #e0e0e0;}.btns{ flex: 1;}

wxml

接下来我们来编写页面内容。我们可以先观察计算器的布局,计算器的布局是5行4列,所以我们先写5个view组件表示5行,每个view中分别添加4个view表示4列。每个view表示计算器的不同按键。给每个按键定义数据data-val。 上半部分只有两个view组件,分别是用户输入的数字和需要的操作,这里需要绑定数据num和op 知识点: view组件的hover-class属性表示该组件按下时的class样式。

<view class="result"> <view class="result-num">{{num}}</view> <view class="result-op">{{op}}</view></view><view class="btns"> <view> <view hover-class="bg" bindtap="resetBtn">C</view> <view hover-class="bg" bindtap="delBtn">DEL</view> <view hover-class="bg" bindtap="opBtn" data-val="%">%</view> <view hover-class="bg" bindtap="opBtn" data-val="/">/</view> </view> <view> <view hover-class="bg" bindtap="numBtn" data-val="7">7</view> <view hover-class="bg" bindtap="numBtn" data-val="8">8</view> <view hover-class="bg" bindtap="numBtn" data-val="9">9</view> <view hover-class="bg" bindtap="opBtn" data-val="*">x</view> </view> <view> <view hover-class="bg" bindtap="numBtn" data-val="4">4</view> <view hover-class="bg" bindtap="numBtn" data-val="5">5</view> <view hover-class="bg" bindtap="numBtn" data-val="6">6</view> <view hover-class="bg" bindtap="opBtn" data-val="-">-</view> </view> <view> <view hover-class="bg" bindtap="numBtn" data-val="1">1</view> <view hover-class="bg" bindtap="numBtn" data-val="2">2</view> <view hover-class="bg" bindtap="numBtn" data-val="3">3</view> <view hover-class="bg" bindtap="opBtn" data-val="+">+</view> </view> <view> <view hover-class="bg" bindtap="numBtn" data-val="0">0</view> <view hover-class="bg" bindtap="dotBtn">.</view> <view hover-class="bg" bindtap="opBtn" data-val="=">=</view> </view></view>wxss

接下来编写样式啦,利用flex布局实现按钮根据容器的大小自动平分宽度和高度,设置flex-basis:“50%”;用于使按钮“0”占用两个按钮的宽度。

page{ display: flex; flex-direction: column; height: 100%;}.result{ flex: 1; background-color: #e0e0e0; position: relative;}.result-num{ position: absolute; font-size: 27pt; bottom: 5vh; right: 3vw;}.result-op{ font-size: 15pt; position: absolute; bottom: 1vh; right: 3vw;}.btns{ flex: 1; display: flex; flex-direction: column; font-size: 17pt; 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;}.btns > view:last-child > view:first-child{ flex-basis: 50%;}.btns > view:first-child > view:first-child{ color: red;}.btns > view >view:last-child{ color: #fc8e00;}.bg{ background: #ccc;}

页面效果如下:

js数字按钮事件处理函数添加数字按钮事件实现数字的输入,先设置值,即num和op。设置result和isClear,其中result用来保存上次运算结果。isClear表示输入的数字是否替代当前的数字,如果isClear的值为false,则表示下次输入的数字放在当前显示数字的末尾;如果isClear的值为true,则表示下次输入的数字替代当前的数字。判断当前输入的数字是否为0。如果为0,则设置num的值为0;否则设置num的值为当前输入的值。Page({ data: { num: '', op: '', }, // 数字按钮处理事件 // 保存上次运算结果 result: null, isClear: false, numBtn:function(e){ var num = e.target.dataset.val; if(this.data.num === '0' || this.isClear){ this.setData({num:num}); this.isClear = false; }else{ this.setData({num:this.data.num+num}); } }})计算按钮处理事件获取当前输入的数字和符号;判断是否重复计算;判断符号是什么,当符号为+时,返回的结果就是当前数字加上添加的数字;当符号为-时,返回的结果就是当前数字减去添加的数字…// 计算按钮事件 opBtn:function(e){ var op = this.data.op; var num = Number(this.data.num); this.setData({op:e.target.dataset.val}); //判断是否重复计算 if(this.isClear){ return } this.isClear = true; if(this.result === null){ this.result = num; return } if(op === '+'){ this.result = this.result + num; }else if(op === '-'){ this.result = this.result - num; }else if(op === '*'){ this.result = this.result * num; }else if(op === '/') { this.result = this.result / num; }else if(op === '%'){ this.result = this.result % num; } this.setData({num:this.result + ''}) },清空数字、删除数字、添加“.”事件处理函数 // 清空数字、删除数字、添加“.”事件处理函数 dotBtn:function(){ if(this.isClear){ this.setData({num:'0.'}); this.isClear = false; return } if(this.data.num.indexOf('.' >=0)){ return } }, delBtn:function(){ var num = this.data.num.substr(0,this.data.num.length - 1); this.result = num; this.setData({num:num === ''?'0':num}) }, resBtn:function(){ this.result = null; this.isClear = false; this.setData({num:'0',op:''}) }})总结

以上就是今天的学习内容啦~ 如果有兴趣的话可以订阅专栏,持续更新呢~ 咱们下期再见~

本文链接地址:https://www.jiuchutong.com/zhishi/300099.html 转载请保留说明!

上一篇:torch.nn.Conv3d

下一篇:react生命周期详细介绍(react生命周期详解)

  • 苹果13如何批量删除通讯录联系人(苹果13如何批量删除照片)

    苹果13如何批量删除通讯录联系人(苹果13如何批量删除照片)

  • 标题文字添加蓝色阴影边框怎么设置(标题文字添加蓝色边框怎么设置)

    标题文字添加蓝色阴影边框怎么设置(标题文字添加蓝色边框怎么设置)

  • 魅族18充电功率多少(魅族18充电功率实测)

    魅族18充电功率多少(魅族18充电功率实测)

  • 电脑在欢迎界面一直转(电脑在欢迎界面一直转圈然后黑屏)

    电脑在欢迎界面一直转(电脑在欢迎界面一直转圈然后黑屏)

  • vivo手机本地视频在哪里找(vivo手机本地视频设置动态壁纸)

    vivo手机本地视频在哪里找(vivo手机本地视频设置动态壁纸)

  • vivo手机支持红外遥控功能吗(vivo手机支持红外线控制空调吗?)

    vivo手机支持红外遥控功能吗(vivo手机支持红外线控制空调吗?)

  • 哔哩哔哩升级经验规则(哔哩哔哩的升级)

    哔哩哔哩升级经验规则(哔哩哔哩的升级)

  • ppt背景图怎么设置透明度(PPT背景图怎么设置自己的图片)

    ppt背景图怎么设置透明度(PPT背景图怎么设置自己的图片)

  • iphone7进水了怎么办(苹果7进水了按钮不灵了怎么办)

    iphone7进水了怎么办(苹果7进水了按钮不灵了怎么办)

  • 拼多多访客下降原因(拼多多没有访客量怎么办)

    拼多多访客下降原因(拼多多没有访客量怎么办)

  • 微博举报投诉在哪看(微博投诉举报别人会成功吗)

    微博举报投诉在哪看(微博投诉举报别人会成功吗)

  • 打印机载体多久换一次(打印机载体需要更换吗)

    打印机载体多久换一次(打印机载体需要更换吗)

  • 苹果手机卡机动不了怎么办(苹果手机卡机动不了关不了机还发出声音)

    苹果手机卡机动不了怎么办(苹果手机卡机动不了关不了机还发出声音)

  • 手机模型和手机的区别(手机模型和手机一样吗)

    手机模型和手机的区别(手机模型和手机一样吗)

  • mkv格式用什么播放器(mkv格式用什么播放器可以播放苹果手机)

    mkv格式用什么播放器(mkv格式用什么播放器可以播放苹果手机)

  • opporeno2发布时间(opporeno2z发布时间)

    opporeno2发布时间(opporeno2z发布时间)

  • 苹果x视频怎么设置美颜(苹果x视频怎么开美颜和滤镜)

    苹果x视频怎么设置美颜(苹果x视频怎么开美颜和滤镜)

  • 苹果手机怎么连接小爱同学(苹果手机怎么连接wifi)

    苹果手机怎么连接小爱同学(苹果手机怎么连接wifi)

  • airpods切歌触摸哪里(airpodspro按切歌没反应)

    airpods切歌触摸哪里(airpodspro按切歌没反应)

  • 物联卡实名后怎么注销(物联卡实名怎么实名)

    物联卡实名后怎么注销(物联卡实名怎么实名)

  • 屏幕原彩功能有什么用(原彩显示屏幕)

    屏幕原彩功能有什么用(原彩显示屏幕)

  • 如何将软件放到桌面(如何将软件放到开始菜单)

    如何将软件放到桌面(如何将软件放到开始菜单)

  • 飞行模式微信计步数吗(飞行模式微信会记录步数吗)

    飞行模式微信计步数吗(飞行模式微信会记录步数吗)

  • iphonex怎么取消edge(iphonex怎么取消锁屏密码)

    iphonex怎么取消edge(iphonex怎么取消锁屏密码)

  • Linux下用gzip和unzip命令来压缩和解压文件的用法(linux中gzip的用法)

    Linux下用gzip和unzip命令来压缩和解压文件的用法(linux中gzip的用法)

  • 如何在Excel中截取文本(excel中怎么截取)

    如何在Excel中截取文本(excel中怎么截取)

  • sbdrvdet.exe - sbdrvdet是什么进程 有什么用

    sbdrvdet.exe - sbdrvdet是什么进程 有什么用

  • 全国增值税专用发票计算机稽核网络系统工程
  • 怎样在网上申报营业执照年检
  • 无合同销售收入怎么算
  • 代垫水电费增值税
  • 银行电子承兑到期多久时间之内可以兑现
  • 坏账核销的会计规定
  • 申报作废了还能修改吗
  • 国家电子产品投诉电话
  • 哪些行业不能开具增值税专用发票
  • 行政事业性收据上面的角分无是右下划线吗
  • 自产农产品免征增值税
  • 金融机构利息收入缴纳增值税
  • 跨年度发现的差错
  • 地税发票联丢失要补救报帐有何办法?
  • 应付票据与应付账款
  • 工程款为什么要扣税
  • 非独立核算分公司个税怎么申报
  • 简易计税方法是什么意思
  • 营改增后受托代销手续费税率是多少?
  • 加速折旧税收优惠
  • 期末留抵税额转出怎么报税
  • 企业如何做好税务管理工作
  • 主营业务收入怎么结转
  • 采购原材料未收到发票的会计分录
  • 供应商把价格算错了怎么办
  • 雇主全额负担的法律责任
  • 非居民纳税人享受协定待遇办理方式
  • 付货款时从货款中扣除的返利怎样做账?
  • 建筑行业会计成本会计工作流程
  • windows10如何关闭病毒和威胁防护设置
  • 华硕主板进入bios设置
  • ajax不刷新页面
  • win10 dev版本
  • macOS Big Sur 11.3新功能 为M1 Mac带来了iOS应用的手柄模拟功能
  • 操作系统的文件系统管理主要负责
  • php pdo和mysqli
  • php查询sqlserver数据库
  • php背景图片代码
  • css实现背景图片变透明
  • 代收水电费交税吗
  • 转账支票购买办公用品一批,共计600元
  • 长期股权投资会计准则
  • 监控设备属于固定资产还是在建工程
  • 股东分红缴税期限
  • 认证后失控发票管理办法
  • react context优化四重奏教程示例
  • 资产减值损失是什么意思
  • 补计提个税分录
  • 报销加油费怎么做账
  • 利润表是当月
  • 银行承兑汇票和银行汇票的区别
  • 开具发票后什么情况下可以零申报?
  • 累计摊销的会计分录有哪些
  • 到银行提取备用金
  • 往来款是什么意思
  • 当月无销售要计提工资吗
  • 以下各项不属于肝郁气滞证表现的是
  • 工人的工资占企业的比例
  • 超市会计怎么做会计分录
  • 变更经营范围需要股东会决议吗
  • sysbench测试mysql,自带的测试套
  • win7端口怎么查看
  • 苹果电脑使用u盾怎么用
  • graphics.dll
  • fsmb32.exe是什么进程 作用是什么 fsmb32进程查询
  • sed 处理多行
  • win8如何更改默认存储位置
  • win8.1无线网
  • win8iis安装配置
  • cocos2d-x教程
  • 屏蔽触摸按键什么意思
  • Android开发如何找到TextView指定文本
  • JAVAscript字符串类型单引号和双引号意一样吗
  • unity性能和内存优化
  • js中的三种弹出消息提醒的命令
  • python中的zip()函数详解
  • js常用方法总结
  • 烟草什么品牌好
  • 电子缴款凭证可以用于报销吗
  • 一次性收入多少要交个人所得税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设