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高级程序设计》阅读笔记(一) ECMAScript基础
Feb 27 Javascript
js函数名与form表单元素同名冲突的问题
Mar 07 Javascript
javascript实现十秒钟后注册按钮可点击的方法
May 13 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
Jan 19 Javascript
使用原生的javascript来实现轮播图
Feb 24 Javascript
Vue中fragment.js使用方法详解
Mar 09 Javascript
使用vue2实现购物车和地址选配功能
Mar 29 Javascript
webpack4 css打包压缩问题的解决
May 18 Javascript
js实现轮播图的完整代码
Oct 26 Javascript
如何在基于vue-cli的项目自定义打包环境
Nov 10 Javascript
小程序云开发如何实现图片上传及发表文字
May 17 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
Jan 06 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翻页跳转功能实现方法
2020/11/30 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
php 二维数组时间排序实现代码
2016/11/19 PHP
漂亮的提示信息(带箭头)
2007/03/21 Javascript
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
2010/03/31 Javascript
js获取网页高度(详细整理)
2012/12/28 Javascript
js中一个函数获取另一个函数返回值问题探讨
2013/11/21 Javascript
JavaScript验证18位身份证号码最后一位正确性的实现代码
2014/08/07 Javascript
javascript数据类型验证方法
2015/12/31 Javascript
AngularJs基本特性解析(一)
2016/07/21 Javascript
Vue实现百度下拉提示搜索功能
2017/06/21 Javascript
JS实现电商放大镜效果
2017/08/24 Javascript
js制作简单的音乐播放器的示例代码
2017/08/28 Javascript
详解微信小程序Page中data数据操作和函数调用
2017/09/27 Javascript
seaJs使用心得之exports与module.exports的区别实例分析
2017/10/13 Javascript
微信小程序实现订单倒计时
2020/11/01 Javascript
小程序瀑布流组件实现翻页与图片懒加载
2020/05/19 Javascript
JavaScript实现网页动态生成表格
2020/11/25 Javascript
[01:06:18]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第二场 1月26日
2021/03/11 DOTA
Python实现曲线点抽稀算法的示例
2017/10/12 Python
Python3.5 Pandas模块之DataFrame用法实例分析
2019/04/23 Python
Django基础三之视图函数的使用方法
2019/07/18 Python
Python获取时间戳代码实例
2019/09/24 Python
python编写计算器功能
2019/10/25 Python
Python Scrapy框架:通用爬虫之CrawlSpider用法简单示例
2020/04/11 Python
详解python的变量缓存机制
2021/01/24 Python
CSS3 渐变(Gradients)之CSS3 线性渐变
2016/07/08 HTML / CSS
css3 中的新特性加强记忆详解
2016/04/16 HTML / CSS
美国优质宠物用品购买网站:Muttropolis
2020/02/17 全球购物
纬创Java面试题笔试题
2014/10/02 面试题
酒店营销策划方案
2014/02/07 职场文书
公证委托书格式
2014/09/13 职场文书
业务员岗位职责范本
2015/04/03 职场文书
2015大学迎新晚会策划书
2015/07/16 职场文书
pytorch实现手写数字图片识别
2021/05/20 Python
排查并解决Oracle sysaux表空间异常增长
2022/04/20 Oracle