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

2024-10-11 10:46:20

本文实例讲述了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.jb51.net/code/HtmlJsRun，可得到如下测试运行效果：

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

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

PS：这里再为大家推荐几款计算工具供大家参考：

在线数学表达式简单转换/计算工具：
http://tools.jb51.net/jisuanqi/exp_jisuanqi

在线一元函数（方程）求解计算工具：
http://tools.jb51.net/jisuanqi/equ_jisuanqi

科学计算器在线使用_高级计算器在线计算：
http://tools.jb51.net/jisuanqi/jsqkexue

在线计算器_标准计算器：
http://tools.jb51.net/jisuanqi/jsq

希望本文所述对大家vue.js程序设计有所帮助。

Vue.js计算属性computed与watch（5）

在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需要多于一个表达式的逻辑,应当使用**计算属性**. Vue实例的computed的属性 <div class="test"> <p>原始的信息{{message}}</p> <p>计算后的信息{{ComputedMessage}}</p
Vue入门之数量加减运算操作示例

本文实例讲述了Vue入门之数量加减运算操作.分享给大家供大家参考,具体如下: 效果图: HTML: <div class="count3"> <ul> <li v-for="(key,idx) in liList" :key="key.id"> {{key.id}},{{idx}} <template> <button class="cut" @click="cu
vue2.0 computed 计算list循环后累加值的实例

实例如下所示: <template> <div class="hello"> <h1>{{ msg }}</h1> <h2>Foo</h2> <div v-for ="(item, index) in list">  <h1 v-show="false">{{a[inde
vue2.0中vue-cli实现全选、单选计算总价格的实例代码

由于工作的需要并鉴于网上的vue2.0中vue-cli实现全选.单选方案不合适,自己写了一个简单实用的.就短短的126行代码. <template> <div> <table> <tr> <td><input type="checkbox" v-model="checkAll">全选({{checkedCount}})</td> <td>产品名称</td> &
vue实现商品加减计算总价的实例代码

需求是商品只能选一次,有原价和现价. 大概的效果图是这样: 完整代码在这里,直接复制就能用: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> html{ background: rgb(214
Vue.js实现价格计算器功能

本文实例为大家分享了Vue.js实现价格计算器功能的具体代码,供大家参考,具体内容如下实现效果: 实现代码及注释: <!DOCTYPE html> <html> <head> <title>价格计算器</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial
vue实现简单实时汇率计算功能

最近在自己摸索vue的使用,因为相对于只是去看教程和实例,感觉不如自己动手写一个demo入门来的快.刚好看到小程序中有一个简单但是很精致的应用极简汇率,而且它的表现形式和vue的表现形式很像,于是想着自己搞一个简单的应用来试试. 1.第一步是搭好简单的Html结构 <div id="demo"> <h1>汇率转换</h1> <div class="moneyBox"><span>cny</span&g
vue.js实现的经典计算器/科学计算器功能示例

本文实例讲述了vue.js实现的经典计算器/科学计算器功能.分享给大家供大家参考,具体如下: 1. HTML部分: <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> <div id="app"> <div class="calculator"> <button @click="changeMod
vue中子组件向父组件传递数据的实例代码(实现加减功能)

这里讲解一下子组件向父组件传递值的常用方式. 这里通过一个加减法的实例向大家说明一下,这个的原理. 如下图所示: 当没有任何操作的时候父组件的值是 0 当点击加号以后父组件的值是 1 当点击减号以后父组件的值是减一变成 0 具体代码我直接贴出来,刚出炉的代码. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=&qu
Vue.js实现的计算器功能完整示例

本文实例讲述了Vue.js实现的计算器功能.分享给大家供大家参考,具体如下: 1. HTML部分代码 <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="css/css.css" rel="external nofollow" > <sc
vue.js实现的幻灯片功能示例

本文实例讲述了vue.js实现的幻灯片功能.分享给大家供大家参考,具体如下: 1.在父组件中 <slide-show :slides="slides"></slide-show> import SlideShow from '@/components/SlideShow' export default { components: { SlideShow, }, 2.在slideshow.vue中 <template> <div class=&q
ajax请求+vue.js渲染+页面加载的示例

1.导入js <script type="text/javascript" src="<c:url value="/resources/lib/jquery/jquery-1.11.0.min.js" />"></script>  <link href="<c:url value=" rel="external nofollo
vue+element实现批量删除功能的示例

今年开始学习vue+element实现后台开发,在实现批量删除功能时有2个小知识点记录在下: 1.如何实现单击行交替选中当前行的复选框,element官网的table实例中没有找到.--通过row-click和toggleRowSelection实现 2.如何获取选中行的值来实现批量删除.--通过selection-change实现代码如下 html: <div class="row mt30 pl15"> <el-button type="warning
Vue.js实现开发购物车功能的方法详解

本文实例讲述了Vue.js实现开发购物车功能的方法.分享给大家供大家参考,具体如下: 购物车一般包含商品名称.单价.数量等信息,数量可以任意新增或减少,商品项也可删除,还可以支持全选或多选: 我们把这个小项目分为三个文件: index.html (页面) index.js (Vue 脚本) style.css (样式) 1 index.js 首先在 js 中初始化 Vue 实例,整体模板如下: var app = new Vue({ el: '#app', data: { ... }, moun
Vue.js实现立体计算器

本文实例为大家分享了Vue.js 制作立体计算器的具体方法,供大家参考,具体内容如下项目效果图这是一个简单的项目实现加减乘除运算项目结构代码展示计算器1.0.html <!DOCTYPE html> <html> <head> <title>计算器</title> <link rel="stylesheet" type="text/css" href="css/style.css&
vue.js实现图书管理功能

本文实例为大家分享了vue.js实现图书管理功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta
Vue.js实现的购物车功能详解

本文实例讲述了Vue.js实现的购物车功能.分享给大家供大家参考,具体如下: 使用计算属性,内置指令,方法等基础知识开发购物车. 需求分析:展示一个已经加入购物车的商品列表,包含商品名称.商品单价.购买数量和操作,以及最后确定是否选中商品的功能,总价格为选中商品的价格,够买数量可以增加减少,商品可以从购物车中移除.效果如图所示: --实例来自<Vue.js实战>第五章逻辑整理:vue实例定义一个数组list存放商品信息,定义方法与减少按钮,增加按钮等联系,动态改变商品数量,通过handleR
js实现浏览器打印功能的示例代码

最近接触到一个新需求,实现打印机打印小票的功能.打的一桌子小票(惭愧),不过也基本满足了业务上的需求,现在分享一下如何实现(好记性不如烂笔头) 先上代码 // 布局代码 <div id="print"> <div id="print_content"></div> </div> //js 部分代码var f = document.getElementById('printf'); if (f) { docume

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

相关推荐

随机推荐