微信小程序实现简易计算器功能
作者：沐小侠
这篇文章主要为大家详细介绍了微信小程序实现简易计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现简易计算器的具体代码，供大家参考，具体内容如下
实现代码：
<!--pages/computer.wxml-->
<view class="result">
<view class="result_num">{{num}}</view>
<view class="result_op">{{op}}</view>
</view>
<view class="btns">
<view>
<view hover-class="bg" bindtap="resetBtn">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" data-val="7" bindtap="numBtn">7</view>
<view hover-class="bg" data-val="8" bindtap="numBtn">8</view>
<view hover-class="bg" data-val="9" bindtap="numBtn">9</view>
<view hover-class="bg" bindtap="opBtn" data-val="*">×</view>
</view>
<view>
<view hover-class="bg" data-val="4" bindtap="numBtn">4</view>
<view hover-class="bg" data-val="5" bindtap="numBtn">5</view>
<view hover-class="bg" data-val="6" bindtap="numBtn">6</view>
<view hover-class="bg" bindtap="opBtn" data-val="-">-</view>
</view>
<view>
<view hover-class="bg" data-val="1" bindtap="numBtn">1</view>
<view hover-class="bg" data-val="2" bindtap="numBtn">2</view>
<view hover-class="bg" data-val="3" bindtap="numBtn">3</view>
<view hover-class="bg" bindtap="opBtn" data-val="+">+</view>
</view>
<view>
<view hover-class="bg" data-val="0" bindtap="numBtn">0</view>
<view hover-class="bg" bindtap="dotBtn">.</view>
<view hover-class="bg" bindtap="opBtn" data-val="=">=</view>
</view>
</view>/* pages/computer.wxss */
page{
display: flex;
flex-direction: column;
height: 100%
}
.result{
flex: 1;
background-color: #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;
display: flex;
flex-direction: column;
font-size: 17pt;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
}
.btns>view{
flex: 1;
display: flex;
}
.btns>view>view{
flex:1;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
.btns>view:last-child>view:first-child{
flex: 2;
}
.btns>view:first-child>view:first-child{
color: #f00;
}
.btns>view>view:last-child{
color: #fc8e00;
}
.bg{
background-color: #eee;
}// pages/computer.js
Page({
/**
* 页面的初始数据
*/
data: {
num:'0',
op:''
},
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 val = e.target.dataset.val
if(val==='/'){
this.setData({op:'÷'})
}else if(val==='*'){
this.setData({op:'×'})
}else{
this.setData({op:val})
}
//用于多次按计算按钮时，避免重复计算的问题
if(this.isClear){
return
}
this.isClear=true
if(this.result===null||this.result===undefined){
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).toFixed(2)
}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){
return
}
this.setData({num:this.data.num+'.'})
},
delBtn:function(){
var temp = this.data.num.toString()
var num = temp.substr(0,this.data.num.length-1);
this.setData({num:num===''?'0':num})
},
resetBtn:function(){
this.result=null
this.isClear=false
this.setData({num:'0',op:''})
}
})computer.json
{
"navigationBarTitleText":"计算器",
"navigationBarBackgroundColor":"#fff",
"navigationBarTextStyle":"black",
"usingComponents": {}
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。