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 相关文章推荐
从父页面读取和操作iframe中内容方法
Jul 25 Javascript
jquery实现div拖拽宽度示例代码
Jul 31 Javascript
原生JavaScript实现连连看游戏(附源码)
Nov 05 Javascript
为jquery的ajaxfileupload增加附加参数的方法
Mar 04 Javascript
jquery实现动态画圆
Dec 04 Javascript
js字符串操作方法实例分析
May 06 Javascript
JS弹出对话框实现方法(三种方式)
Dec 18 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
May 11 Javascript
angularjs封装$http为factory的方法
May 18 Javascript
react native仿微信PopupWindow效果的实例代码
Aug 07 Javascript
工作中常用到的ES6语法
Sep 04 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
Apr 02 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
967 个函式
2006/10/09 PHP
mac下使用brew配置环境的步骤分享
2011/05/23 PHP
如何修改和添加Apache的默认站点目录
2013/07/05 PHP
thinkphp实现多语言功能(语言包)
2014/03/04 PHP
Jquery 自定义动画概述及示例
2013/03/29 Javascript
form.submit()不能提交表单的原因分析
2014/10/23 Javascript
javascript实现方法调用与方法触发小结
2016/03/26 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
2016/06/06 Javascript
Json按某个键的值进行排序
2016/12/22 Javascript
Vue之Watcher源码解析(2)
2017/07/19 Javascript
Node.js readline模块与util模块的使用
2018/03/01 Javascript
vue.js内置组件之keep-alive组件使用
2018/07/10 Javascript
浅谈vue.use()方法从源码到使用
2019/05/12 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
2019/09/10 Javascript
layer弹出层扩展主题的方法
2019/09/11 Javascript
p5.js绘制创意自画像
2019/11/04 Javascript
[51:36]EG vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
Python按行读取文件的简单实现方法
2016/06/22 Python
Python代码缩进和测试模块示例详解
2018/05/07 Python
对python插入数据库和生成插入sql的示例讲解
2018/11/14 Python
python使用xlsxwriter实现有向无环图到Excel的转换
2018/12/12 Python
python使用插值法画出平滑曲线
2018/12/15 Python
对IPython交互模式下的退出方法详解
2019/02/16 Python
python 通过SSHTunnelForwarder隧道连接redis的方法
2019/02/19 Python
Python批量生成幻影坦克图片实例代码
2019/06/04 Python
python将print输出的信息保留到日志文件中
2019/09/27 Python
Python 给下载文件显示进度条和下载时间的实现
2020/04/02 Python
施华洛世奇西班牙官网:SWAROVSKI西班牙
2019/06/06 全球购物
戴尔新西兰官网:Dell New Zealand
2020/01/07 全球购物
快餐公司创业计划书
2014/04/29 职场文书
妇联主席先进事迹
2014/05/18 职场文书
学雷锋感言
2015/08/03 职场文书
校园安全主题班会
2015/08/12 职场文书
golang如何去除多余空白字符(含制表符)
2021/04/25 Golang
Python数据分析入门之教你怎么搭建环境
2021/05/13 Python
Python爬虫入门案例之爬取去哪儿旅游景点攻略以及可视化分析
2021/10/16 Python