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中添加代码：

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

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

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

 console.log(e.target.id);

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

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

在if中添加代码：

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

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

split分割：

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

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

 console.log(e.target.id);

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

this.setData({
    result:data
  })

编译：

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

---

课后作业


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



答案：

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

---

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

                               
登录/注册后可看大图

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

                               
登录/注册后可看大图