微信小程序实现计算器功能

 更新时间:2021年07月19日 09:12:36   作者:dyfc3sfd3s  
这篇文章主要为大家详细介绍了微信小程序实现计算器功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了微信小程序实现计算器功能的具体代码,供大家参考,具体内容如下

一、微信小程序开发工具界面

二、目录结构

第一次进到页面它的目录结构如下:

三、需要注意的问题

(1)添加的新页面文件,都需要在app.json中进行配置,否则页面报错。

(2)工作原理  通过在<view></view>中添加事件 bindtap="btnClick" id="{{n9}}"   相当于click事件。

在js代码中,可以通过this.data.n9获取数据,这些数据的定义都是在js中

通过在<view id="{{btn_a}}"><view>填写id,在具体的函数中,event.target.id去判断id是多少,进行区分。就可以实现,不同标签的点击,然后进行业务逻辑。如果需要访问数据,则是通过this.data.xx。

计算器的wxml页面

<view class="content">
  <view class="xianshi">{{screenNum}}</view>
  <view class="anniu">
    <view class="item blue" bindtap="btnClick" id="{{n9}}">9</view>
    <view class="item blue" bindtap="btnClick" id="{{n8}}">8</view>
    <view class="item blue" bindtap="btnClick" id="{{n7}}">7</view>
    <view class="item blue" bindtap="btnClick" id="{{na}}">+</view>
  </view>
   <view class="anniu">
    <view class="item blue" bindtap="btnClick" id="{{n6}}">6</view>
    <view class="item blue" bindtap="btnClick" id="{{n5}}">5</view>
    <view class="item blue" bindtap="btnClick" id="{{n4}}">4</view>
    <view class="item blue" bindtap="btnClick" id="{{nb}}">-</view>
  </view>
   <view class="anniu">
    <view class="item blue" bindtap="btnClick" id="{{n3}}">3</view>
    <view class="item blue" bindtap="btnClick" id="{{n2}}">2</view>
    <view class="item blue" bindtap="btnClick" id="{{n1}}">1</view>
    <view class="item blue" bindtap="btnClick" id="{{nc}}">*</view>
  </view>
   <view class="anniu">
    <view class="item blue" bindtap="btnClick" id="{{n0}}">0</view>
    <view class="item blue" bindtap="btnClear">AC</view>
    <view class="item blue" bindtap="btnJs">=</view>
    <view class="item blue" bindtap="btnClick" id="{{nd}}">/</view>
  </view>
</view>
// pages/cal/cal.js
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
   n0: 0,
   n1: 1,
   n2: 2,
   n3: 3,
   n4: 4,
   n5: 5,
   n6: 6,
   n7: 7,
   n8: 8,
   n9: 9,
   na: '+',
   nb: '-',
   nc: '*',
   nd: '/',
   screenNum: 0,
   screenStr: 0,
   is_num:1
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  
  },
 
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  
  },
 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  
  },
 
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  
  },
 
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },
 
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  
  },
 
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  
  },
 
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  
  },
  btnClick:function(event){
    //console.log('你按得键是'+event.target.id);
    //console.log('上一次' + this.data.is_num);
    var op='';
    var data=0;
    var last_is_num = this.data.is_num;
    //这次输入的是什么
    if (event.target.id == '9' || event.target.id == '8' || event.target.id == '7' || event.target.id == '6' || event.target.id == '5' || event.target.id == '4' || event.target.id == '3' || event.target.id == '2' || event.target.id == '1' || event.target.id == '0') {
      data = event.target.id;
      this.setData({ is_num: 1 });
    }
    if (event.target.id == '+' || event.target.id == '-' || event.target.id == '*' || event.target.id == '/') {
      op = event.target.id;
      this.setData({ is_num: 0 });
    }
    if (last_is_num==1){
      //如果上一次是数字
      if (op == ''){
        //这一次是数字
        if (this.data.screenNum!=0){
          this.setData({ screenNum: this.data.screenNum + data });
          this.setData({ screenStr: this.data.screenStr + data });
        }else{
          this.setData({ screenNum: data});
          this.setData({ screenStr: data });
        }
      }else{
        this.setData({ screenNum: this.data.screenNum + op });
        this.setData({ screenStr: this.data.screenStr +',' +op+',' });
      }
    }else{
      //上次不是数字
      if (data != 0) {
        //这一次是数字
        this.setData({ screenNum: this.data.screenNum + data });
        this.setData({ screenStr: this.data.screenStr + data });
      } else {
        return;
      }
    }
    //console.log(op+'aaaaa'+data);
    //console.log('现在是'+this.data.is_num);
    //console.log('screenNum' + this.data.screenNum);
    //console.log(this.data.screenStr);
  },
  btnJs:function(){
    console.log(this.data.screenNum);
    console.log(this.data.screenStr);
    var result=0;
    var strs = new Array(); //定义一数组 
    strs = this.data.screenStr.split(","); //字符分割
    for (var i = 0; i < strs.length; i++) {
      //console.log(strs[i] + i); //分割后的字符输出
      if (strs[i]=='+'){
        result = parseInt(strs[i - 1]) + parseInt(strs[i+1]);
      }
      if (strs[i] == '-') {
        result = strs[i - 1] - strs[i + 1];
      }
      if (strs[i] == '*') {
        result = strs[i - 1] * strs[i + 1];
      }
      if (strs[i] == '/') {
        result = strs[i - 1] / strs[i + 1];
      }    
    }
    console.log('result:'+result);
    this.setData({ screenNum: result});
    this.setData({ screenStr: result });    
  },
  btnClear:function(){
    //把标记恢复成默认状态
    this.setData({ screenNum: 0 });
    this.setData({ screenStr: 0 });
    this.setData({ is_num: 1 });      
  }
})

总结,在小程序的布局方面引入了相对单位rpx,需要在学习一下弹性盒子flex布局。对于js部分,和vue.js有些类似,都是对数据进行绑定,简化js的dom操作。这两点还是需要再看看。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • layui实现下拉复选功能的例子(包括数据的回显与上传)

    layui实现下拉复选功能的例子(包括数据的回显与上传)

    今天小编大家分享一篇layui实现下拉复选功能的例子(包括数据的回显与上传),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • js 动态选中下拉框

    js 动态选中下拉框

    js 动态选中下拉框
    2009-11-11
  • javascript 页面划词搜索JS

    javascript 页面划词搜索JS

    这个脚本是网上的代码修改的,兼容各主流浏览器,优化页面异步加载的文字的检索提示框定位,根据选择文字位置与屏幕尺寸计算检索提示框定位。
    2009-09-09
  • echarts饼图各个板块之间的空隙如何实现

    echarts饼图各个板块之间的空隙如何实现

    这篇文章主要给大家介绍了关于echarts饼图各个板块之间的空隙如何实现的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • 从盛大通行证上摘下来的身份证验证js代码

    从盛大通行证上摘下来的身份证验证js代码

    偶然发现盛大通行证上的身份证验证代码,特扒下来,方便大家的使用。
    2011-01-01
  • js 函数的执行环境和作用域链的深入解析

    js 函数的执行环境和作用域链的深入解析

    在js中对象的外在表现形式为函数。
    2009-11-11
  • Next.js路由组使用之组织路由结构示例详解

    Next.js路由组使用之组织路由结构示例详解

    这篇文章主要为大家介绍了Next.js路由组使用之组织路由结构示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-10-10
  • 深入了解Hybrid App技术的相关知识

    深入了解Hybrid App技术的相关知识

    这篇文章主要介绍了深入了解Hybrid App技术的相关知识,Hybrid App(混合模式移动应用)是指介于web-app、native-app这两者之间的app,兼具" Native App良好用户交互体验的优势 "和" Web App跨平台开发的优势 ",需要的朋友可以参考下
    2019-07-07
  • 基于JQuery+HTML+JavaScript实现地图位置选取和地址模糊查询

    基于JQuery+HTML+JavaScript实现地图位置选取和地址模糊查询

    本文详细讲解了如何使用 JQuery+HTML+JavaScript 实现移动端页面中的地图位置选取功能,本文逐步展示了如何构建基本的地图页面,如何通过点击地图获取经纬度和地理信息,以及如何实现模糊查询地址并在地图上标注,感兴趣的小伙伴跟着小编一起来看看吧
    2024-07-07
  • JavaScript中split()方法举例详解

    JavaScript中split()方法举例详解

    这篇文章主要给大家介绍了关于JavaScript中split()方法的相关资料,split()方法在js处理字符串是很常见,也是很重要的一种方法必须熟练掌握,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-11-11

最新评论