您当前的位置:首页 > 网站建设 > javascript
| php | asp | css | H5 | javascript | Mysql | Dreamweaver | Delphi | 网站维护 | 帝国cms | React | 考试系统 | ajax |

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

51自学网 2022-05-02 21:36:04
  javascript

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

wxml

<view class='content'>  <input value='{{calculation}}'></input>  <view class='box'>    <button class='yellow-color'>退格</button>    <button class='yellow-color' bindtap='empty'>清屏</button>    <button class='yellow-color'>❤</button>    <button bindtap='add' data-text='+' class='yellow-color'>+</button>  </view>  <view class='box'>    <button bindtap='add' data-text='9'>9</button>    <button bindtap='add' data-text='8'>8</button>    <button bindtap='add' data-text='7'>7</button>    <button bindtap='add' class='yellow-color' data-text='-'>-</button>  </view>  <view class='box'>    <button bindtap='add' data-text='6'>6</button>    <button bindtap='add' data-text='5'>5</button>    <button bindtap='add' data-text='4'>4</button>    <button bindtap='add' class='yellow-color' data-text='*'>*</button>  </view>  <view class='box'>    <button bindtap='add' data-text='3'>3</button>    <button bindtap='add' data-text='2'>2</button>    <button bindtap='add' data-text='1'>1</button>    <button bindtap='add' data-text='/' class='yellow-color'>÷</button>  </view>  <view class='box'>    <button bindtap='add' data-text='0'>0</button>    <button bindtap='add' data-text='.'>.</button>    <button>历史</button>    <button class='yellow-color' bindtap='res'>=</button>  </view></view>

wxss

input {  width: 95%;  height: 250rpx;  margin: 0 auto;  margin-bottom: 20rpx;  border-bottom: 1rpx solid #ccc;}.box {  display: flex;}button {  width: 20%;  height: 150rpx;  margin-bottom: 20rpx;  line-height: 150rpx;  background-color:rgb(0, 150, 250);  color: white;}.yellow-color {  background-color: rgb(247, 142, 24)}

JS

//index.js//获取应用实例const app = getApp()Page({  data: {    calculation:"",    result:0,    character:[],  // 运算符号    operand: [],    // 数字    temp:false  },  // 输入框输入数据  add:function(e) {    let input = e.currentTarget.dataset.text;    var that = this;    if (input == '+' || input == '-' || input == '*' || input == '/') {      this.data.temp = false; // 用于记录上一次是否是操作符      var item = 'character[' + this.data.character.length+ ']';      this.setData({        [item] :input      })     } else {      var item = 'operand['+this.data.operand.length+']';           if(that.data.temp) {        // 拿到前一个的值        var res = 'operand[' + (this.data.operand.length-1) + ']'                var ress= that.data.operand.length-1;        var xyz = that.data.operand[ress] * 10 + parseInt(input);        that.setData({          [res]:xyz        })      } else {        input = parseInt(input);        that.data.temp = true;        that.setData({          [item]: input        })      }    }    // 将所有的内容放到显示框中    this.setData({      calculation:this.data.calculation+input    })  },  // 计算答案  res:function() {    console.log(this.data.character.length);    console.log(this.data.operand.length)    var character_len =  this.data.character.length ;    var operand_len = this.data.operand.length;    console.log(operand_len - character_len)    if(operand_len - character_len == 1) {      this.data.result = this.data.operand[0];      console.log("初始值"+this.data.result);      for(var i=0;i<character_len;i++) {        if(this.data.character[i] == '+') {          this.data.result = this.data.result + this.data.operand[i + 1];        }        if (this.data.character[i] == '-') {          this.data.result = this.data.result - this.data.operand[i + 1];        }        if (this.data.character[i] == '*') {          this.data.result = this.data.result * this.data.operand[i + 1];        }        if (this.data.character[i] == '/') {          this.data.result = this.data.result / this.data.operand[i + 1];        }              }    } else {      this.setData({        result:'输入有误,清空数据,重新输入'      })    }    this.setData({     calculation:this.data.result    })  },  // 清空屏幕  empty:function() {    this.setData({      calculation: "",      result: 0,      character: [],  // 运算符号      operand: [],    // 数字      temp: false    }  }})

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


小程序实现简单的计算器
微信小程序实现计算器功能
51自学网,即我要自学网,自学EXCEL、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。
京ICP备13026421号-1