微信小程序——计算器
知识点：
wxml:
hover-class: 实现点击态效果 hover-class样式显示的原理是 点击时把样式加到class的样式中，冲突时，谁在后面就显示谁!
data-val: 用于传数据，e.target.dataset.val调用
js:
Number()会得到数字（整数,小数)或者NaN; parseInt()会得到 整数或者NaN，不会有小数的情况
stringObject.substr(start,length)：substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。
string.indexOf("ABC")：返回大于等于0的整数值则表示包含此字符串，若不包含则返回-1
index.wxml:
<!--index.wxml--> <view class="result"> <view class="result-num">{{num}}</view> <view class="result-op">{{op}}</view> </view> <view class="btns"> <view> <!-- hover-class，实现点击态效果 hover-class样式显示的原理是 点击时把样式加到class的样式中，冲突时，谁在后面就显示谁! data-val:用于传数据，e.target.dataset.val调用 --> <view hover-class="bg" bindtap="resultBtn">C</view> <view hover-class="bg" bindtap="delBtn">DEL</view> <view hover-class="bg" bindtap="opBtn" data-val="%">%</view> <view hover-class="bg" bindtap="opBtn" data-val="/">÷</view> </view> <view> <view hover-class="bg" bindtap="numtBtn" data-val="7">7</view> <view hover-class="bg" bindtap="numtBtn" data-val="8">8</view> <view hover-class="bg" bindtap="numtBtn" data-val="9">9</view> <view hover-class="bg" bindtap="opBtn" data-val="*">×</view> </view> <view> <view hover-class="bg" bindtap="numtBtn" data-val="4">4</view> <view hover-class="bg" bindtap="numtBtn" data-val="5">5</view> <view hover-class="bg" bindtap="numtBtn" data-val="6">6</view> <view hover-class="bg" bindtap="opBtn" data-val="-">-</view> </view> <view> <view hover-class="bg" bindtap="numtBtn" data-val="1">1</view> <view hover-class="bg" bindtap="numtBtn" data-val="2">2</view> <view hover-class="bg" bindtap="numtBtn" data-val="3">3</view> <view hover-class="bg" bindtap="opBtn" data-val="+">+</view> </view> <view> <view hover-class="bg" bindtap="numtBtn" data-val="0">0</view> <view hover-class="bg" bindtap="dotBtn">.</view> <view hover-class="bg" bindtap="opBtn" data-val="=">=</view> </view> </view>
index.wxss
/**index.wxss**/ /* 上下切分 */ page{ display: flex; /* 弹性布局 */ flex-direction: column; /* 设置子元素的排列方向 */ height: 100%; } .result{ flex: 1; background: #f3f6fe; } .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{ /* 这里的view纵向排列*/ flex: 1; display: flex; /* 设置为弹性布局 */ } .btns > view > view{ /* 这里的view横向排列*/ flex-basis: 25%; /*flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。*/ 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; } /* ------------------------------ */ /* 显示器样式 ：数字、运算符显示的位置*/ .result{ flex: 1; background: #f3f6fe; position: relative; } .result-num{ position: absolute; font-size: 27pt; bottom: 5vh; right: 3vw; } .result-op{ font-size: 20pt; position: absolute; bottom: 1vh; /* vh：视窗高度，1vh等于视窗高度的1% ; 视窗高度固定为100vh*/ right: 3vw; /* vw 视窗宽度，1vw等于视窗宽度的1% ; 视窗宽度度固定为100wh*/ }
index.json
{
"navigationBarBackgroundColor":"#fff",
"navigationBarTitleText":"计算器",
"navigationBarTextStyle":"black",
"usingComponents": {}
}
index.js
// index.js // 获取应用实例 const app = getApp() Page({ data: { num:"1", op:"+" }, result:null, isClear:false, /*true:替换当前数字 false:新数字接在当前数字末尾 */ numtBtn: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) //Number()会得到数字（整数,小数)或者NaN; parseInt()会得到 整数或者NaN，不会有小数的情况 this.setData({op:e.target.dataset.val}) // 赋值这一次用户输入的运算符 if(this.isClear){ return } 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 } this.setData({num:this.result + ''}) // 数字转换为字符串 }, dotBtn:function(){ if(this.isClear){ this.setData({num:'0.'}) this.isClear = false return } if(this.data.num.indexOf('.') >= 0){ //string.indexOf("ABC")：返回大于等于0的整数值则表示包含此字符串，若不包含则返回-1 return } this.setData({num:this.data.num + '.'}) }, delBtn: function(){ // stringObject.substr(start,length) :substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。 var num = this.data.num.substr(0, this.data.num.length - 1) this.setData({num:num == '' ? '0' : num}) }, resultBtn: function(){ this.result = null this.isClear = false this.setData({num: '0', op:''}) }, })
效果
