064 ∞ 实现数字键功能 | 【实战篇】

不二如是

                               
登录/注册后可看大图

上一讲我们为每一个按钮绑定了一个id数据，本次实现按钮的具体功能。

现在单击按钮时，计算器界面没有任何比那话，我们需要为clickButton事件编写相应的代码。

clickButton需要处理20多个按钮的触发事件，因此需要通过识别不同的id，进行不同的处理操作。

先来简单定义一下业务。

1、在用户数按下数字按钮时，将在计算结果区（保存在result中），显示输入的数字，需要考虑一下几点：

1、初始化数据时，为数字按钮定义的id为num0-num9，因此，通过id判断，来定义用户按了哪个数字按钮，在将id分割取最后一位就能得到数字部分。

2、默认为0，新输入3，则用3替换掉0。

3、默认为其他数字，例如6，新输入4，则显示64，新输入数字添加到现有data后面。

4、每次按下一次数字，就要更新一下result，这样才能在计算结果区域显示最新的结果。

现在来编写代码，在calc.js的clickButton中添加代码：

1. // 获取结果
   
2.     var data = this.data.result;

复制代码

获取当前的显示结果，这样才能进行2，3，4。

然后判断是否按了数字键，通过e.target.id，测试一下：

1. console.log(e.target.id);

复制代码

没问题，可以正确输出对应的id值，现在通过这个值判断是否为数字键：

1. // 判断是否按了数字键
   
2.     if (e.target.id >= 'num0' && e.target.id <= 'num9'){
   
3.     // 是数字键，执行相应功能
   
4.     }
   
5.     else{
   
6.       // 不是数组键，执行相应的功能
   
7.     }

复制代码

在if中添加代码：

1. // 正常情况直接拼接
   
2.       data += e.target.id.split("m")[1];
   
3.       // 如果默认为0，则用输入值替换
   
4.     if(this.data.result == '0'){
   
5.       data = e.target.id.split("m")[1];
   
6.     }

复制代码

默认正常情况下直接拼接，如果为0，则用输入值替换。

split分割：

其他切割字符串的方法也可以，鱼油可以自行试一试～

如果不是数字键，我们就先输出当前id，在else中添加：

1. console.log(e.target.id);

复制代码

现在更新结果值，利用setData方法：

1. this.setData({
   
2.     result:data
   
3.   })

复制代码

编译：

输入数字键正确显示，输入其他则在控制台暂时输出id值。

---

课后作业


1、展示你的clickButton最终代码？



答案：

游客，如果您要查看本帖隐藏内容请回复

---

如果有收获，别忘了评分 ：

                               
登录/注册后可看大图

这位鱼油，如果喜欢小程序，请订阅 专辑（传送门）（不喜欢更要订阅 ）

                               
登录/注册后可看大图