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 浮点数运算 精度问题
Oct 06 Javascript
javascript 实现字符串反转的三种方法
Nov 23 Javascript
javascript面向对象特性代码实例
Jun 12 Javascript
express的中间件basicAuth详解
Dec 04 Javascript
javascript实现禁止右键和F12查看源代码
Dec 26 Javascript
jQuery中bind()方法用法实例
Jan 19 Javascript
原生js实现类似fullpage的单页/全屏滚动
Jan 22 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
Apr 25 Javascript
angular select 默认值设置方法
Jun 23 Javascript
JavaScript学习教程之cookie与webstorage
Jun 23 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
Sep 16 Javascript
使用React代码动态生成栅格布局的方法
May 24 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
超强分页类2.0发布,支持自定义风格,默认4种显示模式
2007/01/02 PHP
PHP中使用gettext来支持多语言的方法
2011/05/02 PHP
用来解析.htpasswd文件的PHP类
2012/09/05 PHP
PHP sleep()函数, usleep()函数
2016/08/25 PHP
执行iframe中的javascript方法
2008/10/07 Javascript
JavaScript 学习笔记(十六) js事件
2010/02/01 Javascript
ExtJS 2.0 GridPanel基本表格简明教程
2010/05/25 Javascript
js中同步与异步处理的方法和区别总结
2013/12/25 Javascript
JavaScript实现找出数组中最长的连续数字序列
2014/09/03 Javascript
js 左右悬浮对联广告代码示例
2014/12/12 Javascript
Javascript实现颜色rgb与16进制转换的方法
2015/04/18 Javascript
PHP结合jQuery实现红蓝投票功能特效
2015/07/22 Javascript
JS代码实现table数据分页效果
2016/05/26 Javascript
jquery实现点击页面回到顶部
2016/11/23 Javascript
jquery dataview数据视图插件使用方法
2016/12/23 Javascript
jQuery基本选择器和层次选择器学习使用
2017/02/27 Javascript
微信小程序云开发(数据库)详解
2019/05/17 Javascript
package.json各个属性说明详解
2020/03/11 Javascript
浅谈JS for循环中使用break和continue的区别
2020/07/21 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
2020/10/24 Javascript
vue 在服务器端直接修改请求的接口地址
2020/12/19 Vue.js
Vue 事件的$event参数=事件的值案例
2021/01/29 Vue.js
[14:00]DOTA2国际邀请赛史上最长大战 赛后专访B神
2013/08/10 DOTA
Python有序字典简单实现方法示例
2017/09/28 Python
python 实现将txt文件多行合并为一行并将中间的空格去掉方法
2018/12/20 Python
解决python中用matplotlib画多幅图时出现图形部分重叠的问题
2019/07/07 Python
Python+Selenium+phantomjs实现网页模拟登录和截图功能(windows环境)
2019/12/11 Python
python输出数学符号实例
2020/05/11 Python
Pytorch通过保存为ONNX模型转TensorRT5的实现
2020/05/25 Python
在keras 中获取张量 tensor 的维度大小实例
2020/06/10 Python
Python socket服务常用操作代码实例
2020/06/22 Python
英国现代市场:ARKET
2019/04/10 全球购物
初中生学习的自我评价
2013/11/14 职场文书
材料化学专业求职信
2014/07/15 职场文书
预备党员介绍人意见
2015/06/01 职场文书
golang实现一个简单的websocket聊天室功能
2021/10/05 Golang