Vue.js实现的计算器功能完整示例


Posted in Javascript onJuly 11, 2018

本文实例讲述了Vue.js实现的计算器功能。分享给大家供大家参考,具体如下:

1. HTML部分代码

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" type="text/css" href="css/css.css" rel="external nofollow" >
  <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
  <meta charset="UTF-8">
  <title>my-calculator</title>
</head>
<body>
<div id="calculator">
  <!--显示框-->
  <input-box v-bind:input-show="inputShow">
  </input-box>
  <btn-list>
    <div @click="clearValue()" class=" btn-30 btn-radius color-red clear-marginleft">C</div>
    <div class=" btn-30 btn-radius color-blue">+/-</div>
    <div @click="inputValue('%')" class=" btn-30 btn-radius color-blue">%</div>
    <div @click="backValue()" class=" btn-70 btn-radius color-red font-14">←</div>
    <div @click="inputValue('7')" class=" btn-30 btn-radius clear-marginleft">7</div>
    <div @click="inputValue('8')" class=" btn-30 btn-radius">8</div>
    <div @click="inputValue('9')" class=" btn-30 btn-radius">9</div>
    <div @click="squareValue()" class=" btn-30 btn-radius color-blue font-14">ײ</div>
    <div @click="radicalValue()" class=" btn-30 btn-radius color-blue font-12">√</div>
    <div @click="inputValue('4')" class=" btn-30 btn-radius clear-marginleft">4</div>
    <div @click="inputValue('5')" class=" btn-30 btn-radius">5</div>
    <div @click="inputValue('6')" class=" btn-30 btn-radius">6</div>
    <div @click="inputValue('×')" class=" btn-30 btn-radius color-blue font-14">×</div>
    <div @click="inputValue('÷')" class=" btn-30 btn-radius color-blue font-12">÷</div>
    <div @click="inputValue('1')" class=" btn-30 btn-radius clear-marginleft">1</div>
    <div @click="inputValue('2')" class=" btn-30 btn-radius">2</div>
    <div @click="inputValue('3')" class=" btn-30 btn-radius">3</div>
    <div @click="inputValue('+')" class=" btn-30 btn-radius color-blue font-14">+</div>
    <div @click="inputValue('-')" class=" btn-30 btn-radius color-blue font-14">-</div>
    <div @click="inputValue('0')" class=" btn-70 btn-radius clear-marginleft">0</div>
    <div @click="inputValue('.')" class=" btn-30 btn-radius">.</div>
    <div @click="calValue()" class=" btn-70 btn-radius color-red font-14">=</div>
  </btn-list>
</div>
<script>
var calculator = new Vue({
  el:'#calculator',
  data:{
    inputShow:{
      value:'0'
    }
  },
  components:{
    'input-box':{
      props:['inputShow'],
      computed: {
        value:function () {
          return this.inputShow.value
        }
      },
      template:'<input id="input-box" type="text" size="21" maxlength="21" v-model="value" readonly="readonly">'
    },
    'btn-list':{
      template:'<div id="btn-list"><slot></slot></div>'
    }
  },
  methods:{
    inputValue(param){
      if(Object.prototype.toString.call(this.inputShow.value) == "[object Number]"){   //判断输入框内容是否为数字类型
        this.inputShow.value = "0";   //数字类型说明是上个计算结果,清空内容
      }
      var str ='' + this.inputShow.value; //输入内容时,将输入框内容转为字符串类型
      var len = str.length;
      var arr = ["+","-","×","÷"];
      var num = (''+parseFloat(str.split('').reverse().join(''))).split('').reverse().join('');   //parseInt(str.split('').reverse().join('')))是获取输入框内最后一串数字,再反转回来 ,num为输入框内最后一串数字
      var nlen = num.length;
      if((num!= '0' && param != '.')|| (param == '.'&& num.indexOf(".")==-1)){   //输入框内最后一串数字不为0时拼接字符串
        if(arr.indexOf(str.charAt(len-1)) != -1 && arr.indexOf(param) != -1){    //若一开始输入内容为运算符,输入无效
          return;
        }
        this.inputShow.value += param;   //拼接输入内容
      }else{
        arr.push("%");
        if(param == '.'){      //若num中已有小数点,输入内容为小数点,视为无效
          return;
        }else if(!(arr.indexOf(param) != -1)){    //判断输入框内最后一个字符不为运算符
          this.inputShow.value =str.substring(0,str.length-nlen) + param;  //输入框内最后一串数字为0时,删除0拼接
        }
      }
    },
    clearValue(){      //清空输入框内容
      this.inputShow.value = '0';
    },
    calValue(){       //计算结果
      var str = this.inputShow.value;
      str = str.replace('×','*').replace('÷','/').replace('%','*0.01');    //替换运算符
      try{
        this.inputShow.value = eval(str);      //若用户输入内容不符合运算规则,不计算
      }catch(error){
        return;
      }
    },
    squareValue(){             //平方计算
      var str = this.inputShow.value;
      this.inputShow.value = Math.pow(eval(str),2)
    },
    radicalValue(){             //开根号计算
      var str = this.inputShow.value;
      this.inputShow.value = Math.sqrt(eval(str));
    },
    backValue(){              //删除键,删除单个字符
      var str = this.inputShow.value;
      if(str.length == 1){
        this.inputShow.value = "0";
      }else{
         this.inputShow.value = str.slice(0,str.length-1);
      }
    },
    /*oppositeValue(){            //正负号取值
      var str = this.inputShow.value;
      var num = (''+parseInt(str.split('').reverse().join(''))).split('').reverse().join('');   //获取输入框内最后遗传数字
      var nlen = num.length;
      debugger;
      if(!isNaN( parseInt(str.charAt(str.length-1))) && num != 0){  //当输入框末位字符为数字且最后一串数字不为0时,取正负
        this.inputShow.value = str.substring(0,str.length-nlen)+`(-${num})`;
      }
    }*/
  }
})
</script>
</body>
</html>

2. CSS部分代码

@charset "utf-8";
body, ul, dl, dd, dt, ol, li, p, h1, h2, h3, h4, h5, h6, textarea, form, select, fieldset, table, td, div, input{margin:0;padding:0;-webkit-text-size-adjust:none}
h1, h2, h3, h4, h5, h6{font-size:12px;font-weight:normal}
body>div{margin:0 auto}
div{text-align:left}
a img{border:0}
body{color:#333;text-align:center;font:12px "微软雅黑";}
ul, ol, li{list-style-type:none;vertical-align:0}
a{outline-style:none;color:#535353;text-decoration:none}
a:hover{color:#D40000;text-decoration:none}
.clear{height:0;overflow:hidden;clear:both}
/* calculator */
#calculator{width:200px;height:245px;padding:10px;border:1px solid #e5e5e5;background:#f8f8f8;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;box-shadow:0px 0px 10px #f2f2f2;-moz-box-shadow:0px 0px 10px #f2f2f2;-webkit-box-shadow:0px 0px 10px #f2f2f2;margin:40px auto 0 auto;}
#calculator #input-box{margin:0;width:187px;padding:9px 5px;height:14px;border:1px solid #e5e5e5;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;background:#FFF;text-align:right;line-height:14px;font-size:12px;font-family:Verdana, Geneva, sans-serif;color:#666;outline:none; text-transform:uppercase;}
#calculator #btn-list{width:200px;overflow:hidden;}
#calculator #btn-list .btn-radius{border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;border:1px solid #e5e5e5;background:-webkit-gradient(linear, 0 0, 0 100%, from(#f7f7f7), to(#ebebeb));background:-moz-linear-gradient(top, #f7f7f7,#ebebeb);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#f7f7f7,endColorstr=#ebebeb,grandientType=1);line-height:29px;text-align:center;text-shadow:0px 1px 1px #FFF;font-weight:bold;font-family:Verdana, Geneva, sans-serif;color:#666;float:left;margin-left:11px;margin-top:11px;font-size:12px;cursor:pointer;}
#calculator #btn-list .btn-radius:active{background:#ffffff;}
#calculator #btn-list .clear-marginleft{margin-left:0;}
#calculator #btn-list .font-14{font-size:14px;}
#calculator #btn-list .color-red{color:#ff5050}
#calculator #btn-list .color-blue{color:#00b4ff}
#calculator #btn-list .btn-30{width:29px;height:29px;}
#calculator #btn-list .btn-70{width:70px;height:29px;}

3. 使用本站HTML/CSS/JS在线运行测试工具:http://tools.3water.com/code/HtmlJsRun,可得到如下测试运行效果:

Vue.js实现的计算器功能完整示例

4. 使用时记得改下css路径,在html中引入vue

5. 博主技术有限,正负号部分功能还有问题待完善.计算器还有一些未知的小Bug,感兴趣的读者可以在这个基础上进行扩展。

Javascript 相关文章推荐
JavaScript 给汉字排序实例代码
Jun 28 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
Jan 23 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
Mar 09 Javascript
jQuery实现购物车表单自动结算效果实例
Aug 10 Javascript
html5 canvas 详细使用教程
Jan 20 Javascript
jQuery实现的简单悬浮层功能完整实例
Jan 23 Javascript
原生JS实现垂直手风琴效果
Feb 19 Javascript
深入理解React高阶组件
Sep 28 Javascript
Vue核心概念Getter的使用方法
Jan 18 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
Apr 07 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
Oct 02 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
Apr 24 Javascript
JavaScript类的继承方法小结【组合继承分析】
Jul 11 #Javascript
React中嵌套组件与被嵌套组件的通信过程
Jul 11 #Javascript
JSON数据中存在单个转义字符“\”的处理方法
Jul 11 #Javascript
JS实现动态生成html table表格的方法分析
Jul 11 #Javascript
vue监听键盘事件的快捷方法【推荐】
Jul 11 #Javascript
vue移动端实现红包雨效果
Jun 23 #Javascript
vue实现学生录入系统之添加删除功能
Jul 11 #Javascript
You might like
PDO::exec讲解
2019/01/28 PHP
jquery下checked取值问题的解决方法
2012/08/09 Javascript
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
js简单实现点击左右运动的方法
2015/04/10 Javascript
JavaScript的Date()方法使用详解
2015/06/09 Javascript
学做Bootstrap的第一个页面
2016/05/15 HTML / CSS
vue自定义指令实现v-tap插件
2016/11/03 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
2017/01/08 Javascript
原生js实现类似fullpage的单页/全屏滚动
2017/01/22 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
2017/10/17 Javascript
webpack打包多页面的方法
2018/11/30 Javascript
在vue项目中优雅的使用SVG的方法实例详解
2018/12/03 Javascript
Layui选项卡制作历史浏览记录的方法
2019/09/28 Javascript
微信小程序获取当前位置和城市名
2019/11/13 Javascript
解决vue-router路由拦截造成死循环问题
2020/08/05 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
2020/10/27 Javascript
python中for语句简单遍历数据的方法
2015/05/07 Python
python爬虫入门教程--正则表达式完全指南(五)
2017/05/25 Python
Python计算斗牛游戏概率算法实例分析
2017/09/26 Python
Python3 模块、包调用&amp;路径详解
2017/10/25 Python
对python当中不在本路径的py文件的引用详解
2018/12/15 Python
python进程和线程用法知识点总结
2019/05/28 Python
浅谈PyQt5中异步刷新UI和Python多线程总结
2019/12/13 Python
Django的CVB实例详解
2020/02/10 Python
Python爬虫实现模拟点击动态页面
2020/03/05 Python
解决python 虚拟环境删除包无法加载的问题
2020/07/13 Python
利用Python实现Json序列化库的方法步骤
2020/09/09 Python
python 多线程共享全局变量的优劣
2020/09/24 Python
澳大利亚礼品卡商店:Gift Card Store
2019/06/24 全球购物
大专生自荐信
2013/10/04 职场文书
日语专业推荐信
2013/11/12 职场文书
《学棋》教后反思
2014/04/14 职场文书
水电工岗位职责
2015/02/14 职场文书
广播体操比赛主持词
2015/06/29 职场文书
大学入学感言
2015/08/01 职场文书
nginx设置资源请求目录的方式详解
2022/05/30 Servers