微信用计算机,微信小程序简易计算器

界面布局

布局代码(wxml)!--pages/cal/cal.wxml--view class='container'  view class='screen'{{first}}/view  view class='screen'{{op}}/view  view class='screen'{{second}}/view  view class='screen'{{last}}/view  view class='screen'{{sum}}/view    view class='basic ac' id='AC' bindtap='click'{{AC}}/view    block wx:for="{{ids}}"      view class='basic color' id='{{item}}' bindtap='click'{{item}}/view    /block    view class='equ color' id='=' bindtap='click'{{equ}}/view/view

渲染代码(wxss)/* pages/cal/cal.wxss */.container {  display: flex;  flex-direction: row;  flex-wrap: wrap;  justify-content: flex-start;}.basic {  width: 76px;  height: 45px;  margin: 1px;  text-align: center;  line-height: 45px;  font-size: 26px;  border: 1px solid #cbd3d3;  border-radius: 5px;}.color {  background-color: #f0ffff;}.screen {  width: 100%;  height: 40px;  text-align: right;  line-height: 40px;  background-color: #aaa;  font-size: 30px;}.ac {  color: #f00;  background-color: #f0ffff;}.equ {  width: 154px;  height: 45px;  margin: 1px;  text-align: center;  line-height: 45px;  font-size: 26px;  border: 1px solid #cbd3d3;  border-radius: 5px;}

功能代码(JS)// pages/cal/cal.jsPage({  /**   * 页面的初始数据   */  data: {    ids: ['DEL', '÷', 'x', '7', '8', '9', '-', '4', '5', '6', '+', '1', '2', '3','%','0','.'],    AC: 'AC',    equ: '=',    first: '',    second: '',    op: '',    last: '',    sum: 0,    a: 0,    b: 0,    operator: 0,    flag: false,    //操作符是否被按下    dot: false      //小数点是否被按下  },  /**   * 生命周期函数--监听页面加载   */  onLoad: function (options) {  },  /**   * 生命周期函数--监听页面初次渲染完成   */  onReady: function () {  },  /**   * 生命周期函数--监听页面显示   */  onShow: function () {  },  /**   * 生命周期函数--监听页面隐藏   */  onHide: function () {  },  /**   * 生命周期函数--监听页面卸载   */  onUnload: function () {  },  /**   * 页面相关事件处理函数--监听用户下拉动作   */  onPullDownRefresh: function () {  },  /**   * 页面上拉触底事件的处理函数   */  onReachBottom: function () {  },  /**   * 用户点击右上角分享   */  onShareAppMessage: function () {  },  click: function (e) {    switch(e.target.id) {      case "1":       case "2":      case "3":      case "4":      case "5":      case "6":      case "7":      case "8":      case "9":      case "0":        var n = parseInt(e.target.id);        if (this.data.flag == true) {          this.setData({ sum: n });         } else {          var temp = this.data.sum;          if(this.data.dot == true)            this.setData({ sum: temp + n });          else            this.setData({ sum: temp * 10 + n });        }        this.data.flag = false;        break;      case ".":        var temp = this.data.sum;        this.setData({ sum: temp + '.'});        this.data.dot = true;        break;      case "+":       case "-":      case "x":      case "÷":      case "%":        this.data.flag = true;        if(this.data.dot == true)           this.data.sum = parseFloat(this.data.sum);        this.data.a = this.data.sum;        this.data.dot = false;        var temp = e.target.id;        this.setData({ first: this.data.sum});        this.setData({ op: temp });        this.setData({ sum: 0 });        if(temp == "+")          this.data.operator = 1;        else if(temp == "-")           this.data.operator = 2;        else if (temp == "x")          this.data.operator = 3;        else if (temp == "÷")          this.data.operator = 4;        else          this.data.operator = 5;        break;      case "AC":        this.data.sum = 0;        this.data.a = 0;        this.data.b = 0;        this.data.operator = 0;        this.data.flag = false;        this.setData({ sum: 0 });        this.setData({ first: ''});        this.setData({ second: '' });        this.setData({ op: '' });        this.setData({ last: '' });        break;      case "DEL":        const temp = new String(this.data.sum);        this.data.sum = temp.substring(0, temp.length-1);        this.setData({ sum: this.data.sum});        break;      case "=":        if(this.data.dot == true)           this.data.sum = parseFloat(this.data.sum);        this.data.b = this.data.sum;        this.setData({ second: this.data.b});        this.setData({ last: '='});        var c;        if (this.data.operator == 1) {          c = this.data.a + this.data.b;        }        if (this.data.operator == 2) {          c = this.data.a - this.data.b;        }        if (this.data.operator == 3) {          c = this.data.a * this.data.b;        }         if (this.data.operator == 4) {          c = this.data.a / this.data.b;        }         if (this.data.operator == 5) {          c = this.data.a % this.data.b;        }        this.setData({ sum: c});        this.data.sum = 0;        this.data.a = 0;        this.data.b = 0;        this.data.dot = false;        this.data.flag = false;        break;    }  }})

附两张效果图