微信小程序随堂笔记3


简易版计算器

能实现基本的加、减、乘、除、求余—-2020.9.15

index.wxml代码

<!--pages/index/index.wxml-->
<view class="result">
<view class="result-num">{{num}}</view>
<view class="result-op">{{op}}</view>
</view>
<viwe 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" bindtap="numBtn" data-val="7">7</view>
<view hover-class="bg" bindtap="numBtn" data-val="8">8</view>
<view hover-class="bg" bindtap="numBtn" data-val="9">9</view>
<view hover-class="bg" bindtap="opBtn" data-val="*">×</view>
</view>
<!-- 第三行 -->
<view>
<view hover-class="bg" bindtap="numBtn" data-val="4">4</view>
<view hover-class="bg" bindtap="numBtn" data-val="5">5</view>
<view hover-class="bg" bindtap="numBtn" data-val="6">6</view>
<view hover-class="bg" bindtap="opBtn" data-val="-">-</view>
</view>
<!-- 第四行 -->
<view>
<view hover-class="bg" bindtap="numBtn" data-val="1">1</view>
<view hover-class="bg" bindtap="numBtn" data-val="2">2</view>
<view hover-class="bg" bindtap="numBtn" data-val="3">3</view>
<view hover-class="bg" bindtap="opBtn" data-val="+">+</view>
</view>
<!-- 第五行 -->
<view>
<view hover-class="bg" bindtap="numBtn" data-val="0">0</view>
<view hover-class="bg" bindtap="doBtn">.</view>
<view hover-class="bg" bindtap="opBtn" data-val="=">=</view>
</view>
</viwe>

index.wxss代码

/* pages/index/index.wxss */
page{
display: flex;
height: 100%;
flex-direction: column;
color: #555;
}
.result{
flex: 1;
background: #f3f6fe;
position: relative;
}
.bg{
background: #eee;
}
.btns{
flex:1;
display: flex;
flex-direction: column;
font-size: 17pt;
border-top: 1rpx solid #ccc;
border-left: solid #ccc;
}
/* btns里的第一级view */
/* 弹性布局 */
.btns>view{
flex: 1;
display: flex;
}
/* btns里的第二级view */
.btns>view>view{
flex-basis: 25%;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1rpx solid #ccc;
border-left: 1rpx solid #ccc;
box-sizing: border-box;
}
.btns>view:last-child>view:first-child{
flex-basis: 50%;
}
.btns>view:first-child>view:first-child{
color:red;
}
.btns>view>view:last-child{
color: orange;
}

在utils文件夹下的calcilb.js

// 精确计算
module.exports = {
add: function(arg1, arg2) {
var r1, r2, m
try {
r1 = arg1.toString().split(".")[1].length
} catch (e) {
r1 = 0
}
try {
r2 = arg2.toString().split(".")[1].length
} catch (e) {
r2 = 0
}
m = Math.pow(10, Math.max(r1, r2))
return (arg1 * m + arg2 * m) / m
},
sub: function(arg1, arg2) {
var r1, r2, m, n
try {
r1 = arg1.toString().split(".")[1].length
} catch (e) {
r1 = 0
}
try {
r2 = arg2.toString().split(".")[1].length
} catch (e) {
r2 = 0
}
m = Math.pow(10, Math.max(r1, r2))
//动态控制精度长度
n = (r1 >= r2) ? r1 : r2
return ((arg1 * m - arg2 * m) / m).toFixed(n)
},
mul: function(arg1, arg2) {
var m = 0,
s1 = arg1.toString(),
s2 = arg2.toString()
try {
m += s1.split(".")[1].length
} catch (e) {}
try {
m += s2.split(".")[1].length
} catch (e) {}
return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m)
},
div: function(arg1, arg2) {
var t1 = 0,
t2 = 0,
r1, r2
try {
t1 = arg1.toString().split(".")[1].length
} catch (e) {}
try {
t2 = arg2.toString().split(".")[1].length
} catch (e) {}

r1 = Number(arg1.toString().replace(".", ""))
r2 = Number(arg2.toString().replace(".", ""))
return (r1 / r2) * Math.pow(10, t2 - t1)
}
}

index.js代码

// pages/index/index.js

//调用calcilb.js
const calclib = require("../utils/calclib.js")

Page({
data: {
num:'0',
op:''
},

result:null,
isClear:false,

// 数字按钮的处理方法
numBtn:function(e){
var d = e.target.dataset.val
// 如果num为0时,直接把按钮的值赋值给num;否则加行追加到num的后边
if(this.data.num==='0' || this.isClear){
this.setData({
num:d
})
this.isClear = false
}else{
this.setData({
num:this.data.num+d
})
}
},

// 把最近输入的数删除
delBtn:function(){
var d= this.data.num.substr(0,this.data.num.length-1)
// 重新赋值给自己
this.setData({
num: d===''?'0':d
})
},

resetBtn:function(){
this.result=null
this.isClear = false
this.setData({
num:'0',
op:''
})
},

// 小数点的操作
doBtn: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+'.'
})
},

//运算符
opBtn:function(e){
// 暂存运算符
var op = this.data.op
// 暂存第一个操作数
var num1= Number(this.data.num)

// 取当前用户点击的运算符
this.setData({
op:e.target.dataset.val
})
console.log("第一个运算数:"+this.data.num)
console.log("运算符:"+this.data.op)

// 第二个运算数的处理
this.isClear = true
if(this.result===null){
this.result=num1
return
}
console.log("第一个运算数:"+this.result)
console.log("第二个运算数:"+num1)
//运算
if(op==='+'){
this.result = calclib.add(this.result,num1)
}
else if(op==='-'){
this.result = calclib.sub(this.result,num1)
}
else if(op==='*'){
this.result = calclib.mul(this.result,num1)
}
else if(op==='/'){
this.result = calclib.div(this.result,num1)
}
else if(op==='%'){
this.result = this.result%num1
}

this.setData({
num:this.result+''
})
}
})

界面效果:
微信小程序随堂笔记3

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

微信小程序随堂笔记3

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » 微信小程序随堂笔记3
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏