首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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,感兴趣的读者可以在这个基础上进行扩展。

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

- Author -

国民王九蛋

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript页面刷新与弹出窗口问题的解决方法
Mar 02 Javascript
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
Apr 29 Javascript
JavaScript 操作键盘的Enter事件（键盘任何事件），兼容多浏览器
Oct 11 Javascript
JS函数验证总结(方便js客户端输入验证)
Oct 29 Javascript
JavaScript的类型、值和变量小结
Jul 09 Javascript
JS实现动态生成表格并提交表格数据向后端
Nov 25 Javascript
vue 插值 v-once,v-text, v-html详解
Jan 19 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
python虚拟环境 virtualenv的简单使用
Jan 21 Javascript
前端使用crypto.js进行加密的函数代码
Aug 16 Javascript
微信小程序实现加入购物车滑动轨迹
Nov 18 Javascript
JavaScript控制台的更多功能
Apr 28 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
电磁辐射(1) 天线(6) 短波(1) LW(1) SONY(15) 电台(1) PL-880(1) 电路图(1) 索尼(5) 发报机(1)
You might like
php获取本地图片文件并生成xml文件输出具体思路
2013/04/27 PHP
解析阿里云ubuntu12.04环境下配置Apache+PHP+PHPmyadmin+MYsql
2013/06/26 PHP
CodeIgniter生成网站sitemap地图的方法
2013/11/13 PHP
PDO预处理语句PDOStatement对象使用总结
2014/11/20 PHP
php读取flash文件高宽帧数背景颜色的方法
2015/01/06 PHP
PHP 下载文件时如何自动添加bom头及解释BOM头和去掉bom头的方法
2016/01/04 PHP
js Array对象的扩展函数代码
2013/04/24 Javascript
用js设置下拉框为只读的小技巧
2014/04/10 Javascript
js 获取浏览器版本以此来调整CSS的样式
2014/06/03 Javascript
Javascript学习笔记之 对象篇（四） : for in 循环
2014/06/24 Javascript
JS实现消息来时让网页标题闪动效果的方法
2016/04/20 Javascript
原生JS获取元素集合的子元素宽度实例
2016/12/14 Javascript
js简单实现网页换肤功能
2017/04/07 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
2019/09/07 Javascript
JavaScript布尔运算符原理使用解析
2020/05/06 Javascript
[01:16:01]VGJ.S vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
django 自定义用户user模型的三种方法
2014/11/18 Python
python打开文件并获取文件相关属性的方法
2015/04/23 Python
在Python中使用成员运算符的示例
2015/05/13 Python
python动态网页批量爬取
2016/02/14 Python
Python常见工厂函数用法示例
2018/03/21 Python
对pandas数据判断是否为NaN值的方法详解
2018/11/06 Python
python获取微信小程序手机号并绑定遇到的坑
2018/11/19 Python
python 实现读取一个excel多个sheet表并合并的方法
2019/02/12 Python
python3对接mysql数据库实例详解
2019/04/30 Python
用python做游戏的细节详解
2019/06/25 Python
python numpy 常用随机数的产生方法的实现
2019/08/21 Python
基于python traceback实现异常的获取与处理
2019/12/13 Python
Python必须了解的35个关键词
2020/07/16 Python
数控加工专业毕业生自荐信
2013/09/27 职场文书
计算机应用毕业生自荐信
2013/10/23 职场文书
中专自我鉴定
2014/02/05 职场文书
2014年教师节演讲稿
2014/09/03 职场文书
六查六看心得体会
2014/10/14 职场文书
教师党的群众路线学习心得体会
2014/11/04 职场文书
python前后端自定义分页器
2022/04/13 Python