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

程序员文章站 2022-03-07 08:32:35

本文实例讲述了vue.js实现的计算器功能。分享给大家供大家参考，具体如下： 1. html部分代码

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

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

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

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

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

在线数学表达式简单转换/计算工具：

在线一元函数（方程）求解计算工具：

科学计算器在线使用_高级计算器在线计算：

在线计算器_标准计算器：

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

上一篇：详解vue中组件参数

下一篇： vue监听键盘事件的快捷方法【推荐】

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

jQuery.cookie.js实现记录最近浏览过的商品功能示例

Python3.6基于正则实现的计算器示例【无优化简单注释版】

react实现换肤功能的示例代码

jQuery实现的简单拖拽功能示例【测试可用】

Python实现可获取网易页面所有文本信息的网易网络爬虫功能示例

ThinkPHP5&5.1实现验证码的生成、使用及点击刷新功能示例

ThinkPHP5.1+Ajax实现的无刷新分页功能示例

PHP实现的pdo连接数据库并插入数据功能简单示例

ES5 模拟 ES6 的 Symbol 实现私有成员功能示例

微信小程序实现的绘制table表格功能示例