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

目录
  • 1、计算器功能介绍
  • 2、计算器页面设计
    • 1、导航栏部分
    • 2、数据部分
    • 3、index.wxml布局页面
    • 4、index.css样式页面
    • 5、运行结果
  • 3、功能实现部分
    • 1、删除功能
    • 2、清空功能
    • 3、其他功能实现

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、运行结果

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 计算器内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • js实现简单计算器

    参考部分资料,编写一个简单的计算器案例,虽然完成了正常需求,但是也有不满之处,待后续实力提升后再来补充,先把不足之处列出: 1:本来打算只要打开页面,计算器的输入框会显示一个默认为0的状态,但是在输入框加入默认显示为0的时候,选择数据输入时,该0会显示输入数字的前面,例如"0123",由于能力有限,待后续实力提升再来补充完善! 2:目前只能实现鼠标控制选择按钮,待完善键盘录入功能. 3:乘法的那个符号在本来想改成"×"这个符号的,待后续完善. 附图片一张: html

  • js制作简易计算器

    本文实例为大家分享了js制作简易计算器的具体代码,供大家参考,具体内容如下 要制作一个如图所示的简易计算器,首先要建立一个表单,制作出如图所示的样子. <table border="1" cellspacing="0" > <tr><th colspan="2">购物简易计算器</th></tr> <tr> <td>第一个数</td> <td&g

  • javascript写的简单的计算器,内容很多,方法实用,推荐

    最近用javascript写了一个简单的计算器,自己测试感觉还好,先给大家观赏下界面: 界面就是这样了,但是功能如何呢? 现在只是个简单的标准计算器,能进行加减乘除连续运算,以及求余运算.如果发生被除数为零的错误,下面会给出提示,就像这样: 自己不知道写的怎么样,但是对于新手来说,这肯定是一份大餐,里面可以接触到的东西不少,可以拿来学习.如果有高手看出里面的疏漏.错误等望不吝赐教,给予指点. 下面贴上代码,希望里面的注释足够多了. js部分: 复制代码 代码如下: var num=0,resul

  • javascript实现编写网页版计算器

    本篇主要纪录的是利用javscript实现一个网页计算器的效果,供大家参考,具体内容如下 话不多说,代码如下: 首先是html的代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>利用js实现网页版计算器</title> <link rel="stylesheet" href

  • js版实现计算器功能

    本文实例为大家分享了js实现计算器功能的具体代码,供大家参考,具体内容如下 在老师的带领下完成了这个简单的计算器,这是一个神奇的过程,计算器的基本功能都是有的.虽然是个简单的计算器,但对初学者来说,还是需要强大的逻辑判断能力,里面有很多的条件,作为开发者要不断的寻找设计里的bug,不断地完善用户的需求,而这些都需要清晰的逻辑推理和判断,我有点头大了. <!DOCTYPE html> <html> <head lang="en"> <meta c

  • 简易js代码实现计算器操作

    复制代码 代码如下: <html> <head> <title>JS版计算器</title> <link rel="stylesheet" type="text/css" href=""> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <!--

  • 用javascript实现简单计算器

    本文实例为大家分享了javascript实现简单计算器的具体代码,供大家参考,具体内容如下 设计一个简单的计算器 代码 <body> <a>第一个数</a> <input type="test" id="inputId1" value="" /><br/> <a>第二个数</a> <input type="test" id="i

  • html+js实现简单的计算器代码(加减乘除)

    html+js实现简单的计算器代码(加减乘除) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <table> <tr> <td&

  • 原生js实现简易计算器

    本文实例为大家分享了js实现简易计算器的具体代码,供大家参考,具体内容如下 最近,博主闲来无聊,就没事用js写了个简易计算器(博主是搞后端的,不是前端>_<).其实,感觉搞前端的很幸福,自己弄出点东西很有成就感,话不多说,附上源码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>计算器</title> <style>

  • JavaScript实现简单网页版计算器

    背景 由于我又被分进了一个新的项目组,该项目需要用js,因为我没接触过,所以领导准备给我一周时间学习,没错,实现一个简单的支持四则混合运算的计算器就是作业,所以有了这篇文章 故,这篇文章主要重点就不在html和css了,毕竟我也只是略懂皮毛,并未深究过 实现效果 最终展现的页面如下图,当鼠标点击按键时,按键会变色,可以进行四则混合运算 上面一行显示计算式,当按下"="时,显示计算结果 用到的技术 计算器的页面是使用html的table绘制的 按键的大小,颜色,鼠标悬浮变色是用css设置

随机推荐