微信小程序实现计算器(含历史记录)_javascript技巧_

   |历史记录            {{item}}      清空记录|   {{history}}   {{num}}   {{op}}        C     DEL     %     ÷           7     8     9     ×           4     5     6     -           1     2     3     +           0     .     =   

/* pages/index/index.wxss  author:LHXZ 灵魂学者*/ page {   display: flex;   flex-direction: column;   height: 100%;   color: #555; }   .result {   flex: 1;   background: #f3f6fe;   position: relative; }   .result-num {   position: absolute;   font-size: 27pt;   bottom: 5vh;   right: 3vw; }   .result-op {   font-size: 15pt;   position: absolute;   bottom: 1vh;   right: 3vw; }   .btns {   flex: 1; }   /* 按钮样式 */   .bg {   background: #eee; }   .btns {   flex: 1;   display: flex;   flex-direction: column;   font-size: 17pt;   border-top: 1rpx solid #ccc;   border-left: 1rpx solid #ccc; }   .btns > view {   flex: 1;   display: flex; }   .btns > view > view {   flex-basis: 25%;   border-right: 1rpx solid #ccc;   border-bottom: 1rpx solid #ccc;   box-sizing: border-box;   display: flex;   align-items: center;   justify-content: center; }   .btns > view:last-child > view:first-child {   flex-basis: 50%; }   .btns > view:first-child > view:first-child {   color: #f00; }   .btns > view > view:last-child {   color: #fc8e00; } .history{   position: absolute;   top:20rpx;   right:40rpx;   font-size: 2rem;   color: rgb(199, 199, 199); } .h_text{   color: rgb(136, 136, 136);   margin-left: 20rpx; } .historying{   position: absolute;   top:200rpx; } scroll-view{   height: 200rpx;   background-color: rgba(255, 255, 255, 0.5); } .historyed{   position: absolute;   top:150rpx;   left: 10rpx;   font-size: 30rpx;   color: gray; } .clear{   position: absolute;   top:150rpx;   right: 10rpx;   font-size: 30rpx;   color: blue; }

{   "navigationBarBackgroundColor": "#fff",   "navigationBarTitleText": "计算器",   "navigationBarTextStyle": "black",   "usingComponents": {   } }

/*author:LHXZ 灵魂学者*/ Page({   /**    * 页面的初始数据    */   data: {     num: '0',     op: '',     history:'',     logs:[]   },   result: null,   isClear: false,     // 数字按钮事件处理函数   numBtn: function(e) {     var num = e.target.dataset.val      if (this.data.num === '0' || this.isClear) {       this.setData({         num:num       })      this.isClear = false     } else{       this.setData({         num: this.data.num + num       })     }            },     // 运算符事件处理函数   opBtn: function(e) {     var op = this.data.op;     var num = Number(this.data.num);     var newOp = e.target.dataset.val     this.setData({       op:newOp     })       if (this.isClear) {       this.setData({         history:this.data.history.substr(0,this.data.history.length-1)+newOp       })       return     }     this.setData({history:this.data.history+''+num+newOp})     this.isClear = true     if (this.result === null) {       this.result = num       return     }     if (op === '+') {       this.result = this.result + num     } else if (op === '-') {       this.result = this.result - num     } else if (op === '*') {       this.result = this.result * num      } else if (op === '/') {       this.result = this.result / num     } else if (op === '%') {       this.result = this.result % num     }else if  (op === '=') {       this.result =num       this.setData({         history:num + newOp       })     }       this.setData({       num: this.result + '',     })      // 历史记录     this.data.logs.unshift(this.data.history);     this.setData({       logs:this.data.logs     })   },        // 清空记录   clear:function(){     this.setData({       logs:[]     })   },      // 小数点事件处理函数   dotBtn: function() {     if (this.isClear) {       this.setData({         num: '0.'       })       this.isClear = false       return     }     if (this.data.num.indexOf('.') >= 0) {       return     }     this.setData({       num: this.data.num + '.'     })   },   // DEL按钮处理函数   delBtn: function() {     var num = this.data.num.substr(0, this.data.num.length - 1)     this.setData({       num: num === '' ? '0' : num     })   },     // C按钮事件处理函数   resetBtn: function() {     this.result = null     this.isClear = false     this.setData({       num: '0',       op: '',       history:''     })   } })