接下来我们来编写页面内容。我们可以先观察计算器的布局,计算器的布局是5行4列,所以我们先写5个view组件表示5行,每个view中分别添加4个view表示4列。每个view表示计算器的不同按键。给每个按键定义数据data-val。上半部分只有两个view组件,分别是用户输入的数字和需要的操作,这里需要绑定数据num和op知识点:view组件...
const app = getApp() Page({ data: { num:'123', 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}) ...
“清除”: 计算器中当点击“清除”按钮时,会把显示区显示出的数字(包括小数点)清除,显示为“0”。 写关于“清除”按钮的代码。“cal.js”中写入如下代码(图31-1),则可实现上述功能。 图31-1 “回退”: 写“回退”按钮。当显示区有值(大于1)的时候,每点击一次“回退”按钮,显示区的数字位数少一位,当只...
1. 把计算器的输入键盘界面固定到最下面,“cal.wxml”增加以下代码(图28-1)。 “cal.wxss”中增加以下代码(图28-2)。 图28-2 此时效果如下(图28-3)。 图28-3 2. 设置计算器显示屏幕的样式(图28-4,图28-5)。 图28-4 图28-5 效果如下(图28-6)。 图28-6 3. 设置计算器输入按钮的颜色(图28-...
微信小程序开发-计算器-案例实现微信小程序开发 第5章 【案例3】计算器 5.3 案例实现 编写计算器页面 1、index.json文件 "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "计算器", "navigationBarTextStyle": "black" 编写计算器页面 2、编写页面外层结构 1.<view class="result"> 2....
在“cal.js”中写入代码(图32-1)。 图32-1 在“cal.wxml”中绑定一下(图32-2)。 图32-2 运算部分: 在“cal.js”中写入代码(图32-3)。 图32-3 此时当运算除法,除数为0时,显示“不能除以0”,这时如果继续按其他数字按钮,则会继续在“不能除以0”后面接着显示,效果如下(图32-4)。 图32-4 优化...
微信小程序开发 第5章【案例3】计算器 5.1案例分析 案例分析 本节将通过开发一个“计算器”的案例，对本章所讲的知识点进行综合练习。本书在配套源代码中提供了本案例的完整代码，运行效果如图所示。从图可以看出，在计算器中可以进行加（+)、减(-)、乘(×)、除(÷)和取余(%)运算，Delete按钮表示删除前面...
微信小程序:托尔斯泰的计算器我要开发同款proginn07384202082025年02月02日361阅读 所属分类微信小程序 作品详情 小程序可以实现2,8,10,16进制的转换与简单加减乘除。你可以用这个计算器来进行进制之间的转换。然后进行加减乘除这个简单的运算。 声明:本文仅代表作者观点,不代表本站立场。如果侵犯到您的合法权益,请...
写一个点击事件,“cal.js”中写入代码(图30-1)。为它绑定事件,“cal.wxml”中写入代码(图30-2)。判断它是不是点击数字按钮,如果是点击数字部分,则把形如“num-8”分割成前面部分和后面部分(即显示区显示为“8”)。 图30-1 图30-2 计算器初始显示为“0”,当点击数字键盘时,所点击的数字将替换初始显示...
第一步 打开我们的微信开发工具(之前的教程有,这里就不再重新交) 第二步 我们直接选择打开miniprogram-4小程序 第三步 我们直接点击我们看到的app.json,如下图所示,我们不用右击一个一个创建目录、.js、.json、.wxml、.wxss。直接输入我们要创建的页面路径,具体操作如下代码块所示 ...