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 相关文章推荐
JavaScript中获取元素索引的函数
Sep 10 Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
Jan 15 Javascript
深入分析js中的constructor和prototype
Apr 07 Javascript
javascript 上下banner替换具体实现
Nov 14 Javascript
jQuery的animate函数学习记录
Aug 08 Javascript
移动设备web开发首选框架:zeptojs介绍
Jan 29 Javascript
JS常用加密编码与算法实例总结
Dec 22 Javascript
Angular2搜索和重置按钮过场动画
May 24 Javascript
vue-cli webpack 引入jquery的方法
Jan 10 jQuery
浅谈ajax请求不同页面的微信JSSDK问题
Feb 26 Javascript
vue.js中ref和$refs的使用及示例讲解
Aug 14 Javascript
在layui中select更改后生效的方法
Sep 05 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
JS实现php的伪分页
2008/05/25 PHP
php页面缓存ob系列函数介绍
2012/10/18 PHP
php无限分类使用concat如何实现
2015/11/05 PHP
ToolTips JQEURY插件之简洁小提示框效果
2011/11/19 Javascript
JQuery+DIV自定义滚动条样式的具体实现
2013/06/25 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
2013/07/05 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
2014/05/29 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
2016/01/19 Javascript
深入理解JQuery中的事件与动画
2016/05/18 Javascript
Node.js+Express配置入门教程详解
2016/05/19 Javascript
基于JS实现checkbox全选功能实例代码
2016/10/31 Javascript
使用JS代码实现点击按钮下载文件
2016/11/12 Javascript
JS实现“隐藏与显示”功能(多种方法)
2016/11/24 Javascript
关于javascript作用域的常见面试题分享
2017/06/18 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
2018/01/11 Javascript
微信小程序 动态修改页面数据及参数传递过程详解
2019/09/27 Javascript
vue项目中js-cookie的使用存储token操作
2020/11/13 Javascript
[01:08:56]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第一场 2月7日
2021/03/11 DOTA
在Django中创建URLconf相关的通用视图的方法
2015/07/20 Python
在Django的session中使用User对象的方法
2015/07/23 Python
Python3中类、模块、错误与异常、文件的简易教程
2017/11/20 Python
Python实现简单的语音识别系统
2017/12/13 Python
完美解决安装完tensorflow后pip无法使用的问题
2018/06/11 Python
PyQt QListWidget修改列表项item的行高方法
2019/06/20 Python
使用 prometheus python 库编写自定义指标的方法(完整代码)
2020/06/29 Python
澳大利亚冒险体验:Adrenaline(跳伞、V8赛车、热气球等)
2017/09/18 全球购物
销售代表求职自荐信
2013/10/01 职场文书
教育系毕业生中文求职信范文
2013/10/06 职场文书
银行求职信个人范文
2013/12/16 职场文书
十月份红领巾广播稿
2014/01/22 职场文书
五年级科学教学反思
2014/02/05 职场文书
电子商务专业应届毕业生求职信
2014/06/21 职场文书
金融系毕业生自荐书
2014/07/08 职场文书
我们的节日元宵节活动总结
2015/02/06 职场文书
Redis Stream类型的使用详解
2021/11/11 Redis
Python的property属性详细讲解
2022/04/11 Python