javascript实现计算器功能详解流程


Posted in Javascript onNovember 01, 2021

1、计算器功能介绍

可以实现数据的加(+),减(-),乘(*),除(/),取余运算(%),以及实现数据的删除(Del)和清空功能(C)。

2、计算器页面设计

1、导航栏部分

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

2、数据部分

data:{
  //  data中只放置初始数据
  num:"1",
  op:" "//记录运算符号
 }

3、index.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" 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" data-val=".">.</view>
    <view hover-class="bg" bindtap="opBtn" data-val="=">=</view>
  
  </view>
</view>

4、index.css样式页面

page{
  display: flex;
  flex-direction: column;/*项目主轴的排列方向 */
  height: 100%;
}
.result{
  flex: 1;/*均匀分配元素*/
  background: #f3f6fe;
  position: relative;
}
.result-num{
  position: absolute;/*父相子绝*/
  font-size: 20pt;
  bottom: 5vh;
  right: 3vw;
}
 
.result-op{
  position: absolute;
  font-size: 15pt;
  bottom: 1vh;
  right: 3vw;
}
.btns{
  flex: 1;
  display: flex;
  flex-direction: column;/*里面的大view排列为垂直*/
  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-bottom: 1rpx solid #ccc;
  border-right: 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: #fcBe00;
}
.bg{
  background: #eee;
}

5、运行结果

javascript实现计算器功能详解流程

3、功能实现部分

1、删除功能

其中substr()函数中两个参数,第一个表示截取开始的位置,第二个表示截取的长度

delBtn:function(e){
    var num=this.data.num.substr(0,this.data.num.length-1);
    this.setData({num:num===""? "0":num})
  }

2、清空功能

reSetBtn:function(e){
    //全部变成初始状态
    this.result=null;
    this.isClear=false;
    this.setData({num:"0",op:""})
  }

3、其他功能实现

data:{
  //  data中只放置初始数据
  num:"1",
  op:" "//记录运算符号
 },
  result:null,
  isClear:false,//用来记录状态
  numBtn:function(e){
    var num =e.target.dataset.val//获取data-val中的值
    //如果多次按0或者isClear为true,则将原来的数据清除,显示按的数字
    if(this.data.num==='0'||this.isClear){
      this.setData({num:num})//将获取的值给result
      this.isClear=false
    }else{
        this.setData({num:this.data.num+num})
    }
  },
 
  opBtn:function(e){
    var op=this.data.op;//先记录当前的op
    var num=Number(this.data.num);//获取当前的num数据
    this.setData({op:e.target.dataset.val});//把按下的按钮给变量op
    if(this.isClear){//因为上面操作中有如果按了运算符,则isclear为true,在这里为了避免多次按加都会起作用,再return
      return
    }
    this.isClear=true;//当用户按了运算按钮,再按数字,则把原来的数字清空
    if(this.result===null){
      this.result=num;
      return
    }
    if(op==="+"){
      this.result=this.result+num
      this.setData({num: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+""})//转为字符串类型
 
  },
  doBtn:function(e){
    if(this.isClear){//表示上一个运算结束了,一开始就按.的话
      this.setData({num:"0."});
      this.isClear=false;
      return
    }
    //如果多按了.
    if(this.data.num.indexOf(".")>=0){
      return
    }
    //正常数字后面按点
    this.setData({num:this.data.num+"."})
  },

到此这篇关于javascript实现计算器功能详解流程的文章就介绍到这了,更多相关javascript 计算器内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
Nov 06 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
Mar 01 Javascript
JavaScript中三种异步上传文件方式
Mar 06 Javascript
Bootstrap每天必学之滚动监听
Mar 16 Javascript
Javascript Event(事件)的传播与冒泡
Jan 23 Javascript
Angular 开发学习之Angular CLI的安装使用
Dec 31 Javascript
AngularJS 监听变量变化的实现方法
Oct 09 Javascript
vue-router的使用方法及含参数的配置方法
Nov 13 Javascript
Vue 实现手动刷新组件的方法
Feb 19 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
Feb 22 Javascript
JQuery事件委托原理与用法实例分析
May 13 jQuery
详细谈谈JavaScript中循环之间的差异
Aug 23 Javascript
JS创建或填充任意长度数组的小技巧汇总
Oct 24 #Javascript
一文彻底理解js原生语法prototype,__proto__和constructor
Oct 24 #Javascript
javascript遍历对象的五种方式实例代码
Oct 24 #Javascript
低门槛开发iOS、Android、小程序应用的前端框架详解
Oct 16 #Javascript
基于angular实现树形二级表格
ajax请求前端跨域问题原因及解决方案
浅谈TypeScript 索引签名的理解
You might like
php intval的测试代码发现问题
2008/07/27 PHP
比file_get_contents稳定的curl_get_contents分享
2012/01/11 PHP
setTimeout和setInterval的深入理解
2013/11/08 Javascript
JavaScript Math.ceil() 函数使用介绍
2013/12/11 Javascript
js限制checkbox选中个数以限制六个为例
2014/07/15 Javascript
js实现同一页面多个不同运动效果的方法
2015/04/10 Javascript
javascript图片预加载完整实例
2015/12/10 Javascript
Javascript如何判断数据类型和数组类型
2016/06/22 Javascript
全面了解构造函数继承关键apply call
2016/07/26 Javascript
jquery实现多次上传同一张图片
2017/01/09 Javascript
nodeJS微信分享
2017/12/20 NodeJs
vue: WebStorm设置快速编译运行的方法
2018/10/18 Javascript
node上的redis调用优化示例详解
2018/10/30 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
2019/09/17 Javascript
详解利用nodejs对本地json文件进行增删改查
2019/09/20 NodeJs
jquery validate 实现动态增加/删除验证规则操作示例
2019/10/28 jQuery
vue路由切换时取消之前的所有请求操作
2020/09/01 Javascript
JS+CSS实现炫酷光感效果
2020/09/05 Javascript
jenkins自动构建发布vue项目的方法步骤
2021/01/04 Vue.js
vue3.0 自适应不同分辨率电脑的操作
2021/02/06 Vue.js
[01:25:09]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第二场
2014/05/24 DOTA
[50:17]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python命令行参数sys.argv使用示例
2014/01/28 Python
举例讲解Python中的迭代器、生成器与列表解析用法
2016/03/20 Python
python运用sklearn实现KNN分类算法
2019/10/16 Python
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
2016/08/15 HTML / CSS
美国床垫和床上用品公司:Nest Bedding
2017/06/12 全球购物
VICHY薇姿美国官方网站:欧洲药房第一的抗衰老品牌
2017/11/22 全球购物
Parfume Klik丹麦:香水网上商店
2018/07/10 全球购物
巴西电子、家电、智能手机购物网站:Girafa
2019/06/04 全球购物
迪拜领先运动补剂零售品牌中文站:Sporter商城
2019/08/20 全球购物
2014年关于两会精神的心得体会
2014/03/17 职场文书
违反纪律检讨书范文
2015/05/07 职场文书
2015年度女工工作总结
2015/10/22 职场文书
Python echarts实现数据可视化实例详解
2022/03/03 Python
Win11怎么解除儿童账号限制?Win11解除微软儿童账号限制方法
2022/07/07 数码科技