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

vue.js实现的经典计算器/科学计算器功能示例

Posted in Javascript onJuly 11, 2018

本文实例讲述了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="changeModeEvent" class="toggle-button">
   <p v-if="changeMode">Show Advanced Mode   ⚈</p>
   <p v-else>Show Basic Mode   ⚆</p>
  </button>
  <div class="results">
   <input class="input" v-model="current" />
  </div>
  <div class="mode" v-if="changeMode">
   <button class="button" @click="press">7</button>
   <button class="button" @click="press">8</button>
   <button class="button" @click="press">9</button>
   <button class="button" @click="press">*</button>
   <button class="button" @click="press"><=</button>
   <button class="button" @click="press">C</button>
   <button class="button" @click="press">4</button>
   <button class="button" @click="press($event)">5</button>
   <button class="button" @click="press">6</button>
   <button class="button" @click="press">/</button>
   <button class="button" @click="press">(</button>
   <button class="button" @click="press">)</button>
   <button class="button" @click="press">1</button>
   <button class="button" @click="press">2</button>
   <button class="button" @click="press">3</button>
   <button class="button" @click="press">-</button>
   <button class="button" @click="press">x 2</button>
   <button class="button" @click="press">±</button>
   <button class="button" @click="press">0</button>
   <button class="button" @click="press">.</button>
   <button class="button" @click="press">%</button>
   <button class="button" @click="press">+</button>
   <button class="button equal-sign" @click="press">=</button> 
  </div>
  <div class="mode" v-else>
   <button class="button" @click="press">sin</button>
   <button class="button" @click="press">cos</button>
   <button class="button" @click="press">tan</button>
   <button class="button" @click="press">x^</button>
   <button class="button" @click="press"><=</button>
   <button class="button" @click="press">C</button>
   <button class="button" @click="press">log</button>
   <button class="button" @click="press">ln</button>
   <button class="button" @click="press">e</button>
   <button class="button" @click="press">°</button>
   <button class="button" @click="press">rad</button>
   <button class="button" @click="press">√</button>
   <button class="button" @click="press">7</button>
   <button class="button" @click="press">8  </button>
   <button class="button" @click="press">9</button>
   <button class="button" @click="press">/</button>
   <button class="button" @click="press">x 2</button>
   <button class="button" @click="press">x !</button>
   <button class="button" @click="press">4</button>
   <button class="button" @click="press">5</button>
   <button class="button" @click="press">6</button>
   <button class="button" @click="press">*</button>
   <button class="button" @click="press">(</button>
   <button class="button" @click="press">)</button>
   <button class="button" @click="press">1</button>
   <button class="button" @click="press">2</button>
   <button class="button" @click="press">3</button>
   <button class="button" @click="press">-</button>
   <button class="button" @click="press">%</button>
   <button class="button" @click="press">±</button>
   <button class="button" @click="press">0</button>
   <button class="button" @click="press">.</button>
   <button class="button" @click="press">π</button>
   <button class="button" @click="press">+</button>          
   <button class="button equal-sign" @click="press">=</button>
  </div>
 </div>
</div>

2. css部分：

body {
 background: linear-gradient(to right, #85D8CE, #085078);
}
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 align-item: center;
}
.calculator {
 width: 440px;
 padding: 20px;
 border-radius: 5px;
 margin: 20px auto;
 font-size: 16px;
 background-color: #333333;
}
.input {
 width: 420px;
 height: 50px;
 border-radius: 0px;
 border: 1px solid black;
 background-color: #333333;
 color: #d9d9d9;
 padding: 0 5px 0 5px;
 margin: 0 0px 10px 0px;
 font-size: 30px;
}
.input:focus,
.input:active {
 border-color: #03a9f4;
 box-shadow: 0 0 4px #03A9F4;
 outline: none 0;
}
.button {
 margin: 3px;
 width: 63px;
 border: 1px solid #0d0d0d;
 height: 30px;
 border-radius: 4px;
 color: #d9d9d9;
 background-color: #1a1a1a;
 cursor: pointer;
 outline: none;
}
.mode {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-evenly;
}
.equal-sign {
 background-color: green;
 width: 133px;
}
.toggle-button {
 border: none;
 background-color: #333333;
 cursor: pointer;
 outline: none;
 font-size: 1rem;
 color: #fff;
 text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.35);
}
p {
 margin-top: 0;
}
button::-moz-focus-inner {
 border-color: transparent;
}

3. js部分：

let app = new Vue({
 el: '#app',
 data () {
  return{ 
   current: '',
   changeMode: true
  }
 },
 methods: {
  press: function (event) {
   let me = this
   let key = event.target.textContent
   if (
    key != '=' && 
    key != 'C' &&
    key != '*' &&
    key != '/' &&
    key != '√' &&
    key != "x 2" &&
    key != "%" &&
    key != "<=" && 
    key != "±" && 
    key != "sin" && 
    key != "cos" && 
    key != "tan" && 
    key != "log" && 
    key != "ln" && 
    key != "x^" && 
    key != "x !" && 
    key != "π" && 
    key != "e" && 
    key != "rad" && 
    key != "°"
   ) {
    me.current += key
   } else if (key === '=') {
    if ((me.current).indexOf('^') > -1) {
     let base = (me.current).slice(0, (me.current).indexOf('^'))
     let exponent = (me.current).slice((me.current).indexOf('^') + 1)
     me.current = eval('Math.pow(' + base + ',' + exponent + ')')
    } else {
     me.current = eval(me.current)
    }
   } else if (key === 'C') {
    me.current = ''
   } else if (key === '*') {
    me.current += '*'
   } else if (key === '/') {
    me.current += '/'
   } else if (key === '+') {
    me.current += '+'
   } else if (key === '-') {
    me.current += '-'
   } else if (key === '±') {
    if ((me.current).charAt(0) === '-') {
     me.current = (me.current).slice(1)
    } else {
     me.current = '-' + me.current
    }
   } else if (key === '<=') {
    me.current = me.current.substring(0, me.current.length - 1)
   } else if (key === '%') {
    me.current = me.current / 100
   } else if (key === 'π') {
    me.current = me.current * Math.PI
   } else if (key === 'x 2') {
    me.current = eval(me.current * me.current)
   } else if (key === '√') {
    me.current = Math.sqrt(me.current)
   } else if (key === 'sin') {
    me.current = Math.sin(me.current)
   } else if (key === 'cos') {
    me.current = Math.cos(me.current)
   } else if (key === 'tan') {
    me.current = Math.tan(me.current)
   } else if (key === 'log') {
    me.current = Math.log10(me.current)
   } else if (key === 'ln') {
    me.current = Math.log(me.current)
   } else if (key === 'x^') {
    me.current += '^'
   } else if (key === 'x !') {
    let number = 1
    if (me.current === 0) {
     me.current = '1'
    } else if (me.current < 0) {
     me.current = NaN
    } else {
     let number = 1
     for (let i = me.current; i > 0; i--) {
      number *= i
     }
     me.current = number
    }
   } else if (key === 'e') {
    me.current = Math.exp(me.current)
   } else if (key === 'rad') {
    me.current = me.current * (Math.PI / 180)
   } else if (key === '°') {
    me.current = me.current * (180 / Math.PI)
   }
  },
  changeModeEvent: function() {
   let me = this
   me.changeMode = !me.changeMode
  }
 }
})

完整实例代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3water.com vue.js计算器</title>
<style>
body {
 background: linear-gradient(to right, #85D8CE, #085078);
}
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 align-item: center;
}
.calculator {
 width: 440px;
 padding: 20px;
 border-radius: 5px;
 margin: 20px auto;
 font-size: 16px;
 background-color: #333333;
}
.input {
 width: 420px;
 height: 50px;
 border-radius: 0px;
 border: 1px solid black;
 background-color: #333333;
 color: #d9d9d9;
 padding: 0 5px 0 5px;
 margin: 0 0px 10px 0px;
 font-size: 30px;
}
.input:focus,
.input:active {
 border-color: #03a9f4;
 box-shadow: 0 0 4px #03A9F4;
 outline: none 0;
}
.button {
 margin: 3px;
 width: 63px;
 border: 1px solid #0d0d0d;
 height: 30px;
 border-radius: 4px;
 color: #d9d9d9;
 background-color: #1a1a1a;
 cursor: pointer;
 outline: none;
}
.mode {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-evenly;
}
.equal-sign {
 background-color: green;
 width: 133px;
}
.toggle-button {
 border: none;
 background-color: #333333;
 cursor: pointer;
 outline: none;
 font-size: 1rem;
 color: #fff;
 text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.35);
}
p {
 margin-top: 0;
}
button::-moz-focus-inner {
 border-color: transparent;
}
</style>
</head>
<body>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<div id="app">
 <div class="calculator">
  <button @click="changeModeEvent" class="toggle-button">
   <p v-if="changeMode">Show Advanced Mode   ⚈</p>
   <p v-else>Show Basic Mode   ⚆</p>
  </button>
  <div class="results">
   <input class="input" v-model="current" />
  </div>
  <div class="mode" v-if="changeMode">
   <button class="button" @click="press">7</button>
   <button class="button" @click="press">8</button>
   <button class="button" @click="press">9</button>
   <button class="button" @click="press">*</button>
   <button class="button" @click="press"><=</button>
   <button class="button" @click="press">C</button>
   <button class="button" @click="press">4</button>
   <button class="button" @click="press($event)">5</button>
   <button class="button" @click="press">6</button>
   <button class="button" @click="press">/</button>
   <button class="button" @click="press">(</button>
   <button class="button" @click="press">)</button>
   <button class="button" @click="press">1</button>
   <button class="button" @click="press">2</button>
   <button class="button" @click="press">3</button>
   <button class="button" @click="press">-</button>
   <button class="button" @click="press">x 2</button>
   <button class="button" @click="press">±</button>
   <button class="button" @click="press">0</button>
   <button class="button" @click="press">.</button>
   <button class="button" @click="press">%</button>
   <button class="button" @click="press">+</button>
   <button class="button equal-sign" @click="press">=</button> 
  </div>
  <div class="mode" v-else>
   <button class="button" @click="press">sin</button>
   <button class="button" @click="press">cos</button>
   <button class="button" @click="press">tan</button>
   <button class="button" @click="press">x^</button>
   <button class="button" @click="press"><=</button>
   <button class="button" @click="press">C</button>
   <button class="button" @click="press">log</button>
   <button class="button" @click="press">ln</button>
   <button class="button" @click="press">e</button>
   <button class="button" @click="press">°</button>
   <button class="button" @click="press">rad</button>
   <button class="button" @click="press">√</button>
   <button class="button" @click="press">7</button>
   <button class="button" @click="press">8  </button>
   <button class="button" @click="press">9</button>
   <button class="button" @click="press">/</button>
   <button class="button" @click="press">x 2</button>
   <button class="button" @click="press">x !</button>
   <button class="button" @click="press">4</button>
   <button class="button" @click="press">5</button>
   <button class="button" @click="press">6</button>
   <button class="button" @click="press">*</button>
   <button class="button" @click="press">(</button>
   <button class="button" @click="press">)</button>
   <button class="button" @click="press">1</button>
   <button class="button" @click="press">2</button>
   <button class="button" @click="press">3</button>
   <button class="button" @click="press">-</button>
   <button class="button" @click="press">%</button>
   <button class="button" @click="press">±</button>
   <button class="button" @click="press">0</button>
   <button class="button" @click="press">.</button>
   <button class="button" @click="press">π</button>
   <button class="button" @click="press">+</button>          
   <button class="button equal-sign" @click="press">=</button>
  </div>
 </div>
</div>
<script>
let app = new Vue({
 el: '#app',
 data () {
  return{ 
   current: '',
   changeMode: true
  }
 },
 methods: {
  press: function (event) {
   let me = this
   let key = event.target.textContent
   if (
    key != '=' && 
    key != 'C' &&
    key != '*' &&
    key != '/' &&
    key != '√' &&
    key != "x 2" &&
    key != "%" &&
    key != "<=" && 
    key != "±" && 
    key != "sin" && 
    key != "cos" && 
    key != "tan" && 
    key != "log" && 
    key != "ln" && 
    key != "x^" && 
    key != "x !" && 
    key != "π" && 
    key != "e" && 
    key != "rad" && 
    key != "°"
   ) {
    me.current += key
   } else if (key === '=') {
    if ((me.current).indexOf('^') > -1) {
     let base = (me.current).slice(0, (me.current).indexOf('^'))
     let exponent = (me.current).slice((me.current).indexOf('^') + 1)
     me.current = eval('Math.pow(' + base + ',' + exponent + ')')
    } else {
     me.current = eval(me.current)
    }
   } else if (key === 'C') {
    me.current = ''
   } else if (key === '*') {
    me.current += '*'
   } else if (key === '/') {
    me.current += '/'
   } else if (key === '+') {
    me.current += '+'
   } else if (key === '-') {
    me.current += '-'
   } else if (key === '±') {
    if ((me.current).charAt(0) === '-') {
     me.current = (me.current).slice(1)
    } else {
     me.current = '-' + me.current
    }
   } else if (key === '<=') {
    me.current = me.current.substring(0, me.current.length - 1)
   } else if (key === '%') {
    me.current = me.current / 100
   } else if (key === 'π') {
    me.current = me.current * Math.PI
   } else if (key === 'x 2') {
    me.current = eval(me.current * me.current)
   } else if (key === '√') {
    me.current = Math.sqrt(me.current)
   } else if (key === 'sin') {
    me.current = Math.sin(me.current)
   } else if (key === 'cos') {
    me.current = Math.cos(me.current)
   } else if (key === 'tan') {
    me.current = Math.tan(me.current)
   } else if (key === 'log') {
    me.current = Math.log10(me.current)
   } else if (key === 'ln') {
    me.current = Math.log(me.current)
   } else if (key === 'x^') {
    me.current += '^'
   } else if (key === 'x !') {
    let number = 1
    if (me.current === 0) {
     me.current = '1'
    } else if (me.current < 0) {
     me.current = NaN
    } else {
     let number = 1
     for (let i = me.current; i > 0; i--) {
      number *= i
     }
     me.current = number
    }
   } else if (key === 'e') {
    me.current = Math.exp(me.current)
   } else if (key === 'rad') {
    me.current = me.current * (Math.PI / 180)
   } else if (key === '°') {
    me.current = me.current * (180 / Math.PI)
   }
  },
  changeModeEvent: function() {
   let me = this
   me.changeMode = !me.changeMode
  }
 }
})
</script>
</body>
</html>

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

vue.js实现的经典计算器/科学计算器功能示例

vue.js实现的经典计算器/科学计算器功能示例

- Author -

jq22

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

Javascript 相关文章推荐
Javascript 检测键盘按键信息及键码值对应介绍
Jan 03 Javascript
用jquery模仿的a的title属性(兼容ie6/7)
Jan 21 Javascript
jquery动态改变onclick属性导致失效的问题解决方法
Dec 04 Javascript
用js传递value默认值的示例代码
Sep 11 Javascript
Javascript设计模式之观察者模式(推荐)
Mar 29 Javascript
表单中单选框添加选项和移除选项
Jul 04 Javascript
原生JS实现首页进度加载动画
Sep 14 Javascript
jQuery时间日期三级联动(推荐)
Nov 27 Javascript
vuex 使用文档小结篇
Jan 11 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
Oct 12 Javascript
koa+jwt实现token验证与刷新功能
May 30 Javascript
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 Vue.js
Vue.js实现的计算器功能完整示例
Jul 11 #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
ICF-F10(1) 德生G88(1) 纸巾盒(1) SRF-40W(1) PR-D3L(1) 德生1994(1) 天梯图(1) AE3805(1) ICF-SW100(1) CPU(2)
You might like
在JavaScript中调用php程序
2009/03/09 PHP
php !function_exists(&quot;T7FC56270E7A70FA81A5935B72EACBE29&quot;))代码解密
2011/01/07 PHP
PHP转换文件夹下所有文件编码的实现代码
2013/06/06 PHP
php生成EAN_13标准条形码实例
2013/11/13 PHP
php读取富文本的时p标签会出现红线是怎么回事
2014/05/13 PHP
PHP sleep()函数, usleep()函数
2016/08/25 PHP
jQuery validate 中文API 附validate.js中文api手册
2010/07/31 Javascript
Javascript下判断是否为闰年的Datetime包
2010/10/26 Javascript
浅析Prototype的模板类 Template
2011/12/07 Javascript
jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
2013/02/04 Javascript
使用jQuery实现的掷色子游戏动画效果
2014/03/14 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
2015/05/25 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
2016/01/23 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
2016/07/28 Javascript
用js实现简单算法的实例代码
2016/09/24 Javascript
关于JS中二维数组的声明方法
2016/09/24 Javascript
用file标签实现多图文件上传预览
2017/02/14 Javascript
Express系列之multer上传的使用
2017/10/27 Javascript
JavaScript实现新年倒计时效果
2018/11/17 Javascript
vue安装遇到的5个报错及解决方法
2019/06/12 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
2019/09/19 Javascript
Vertx基于EventBus发送接受自定义对象
2020/11/16 Javascript
vue绑定class的三种方法
2020/12/24 Vue.js
浅析Python pandas模块输出每行中间省略号问题
2018/07/03 Python
TensorFlow实现指数衰减学习率的方法
2020/02/05 Python
Pytorch对Himmelblau函数的优化详解
2020/02/29 Python
python脚本定时发送邮件
2020/12/22 Python
CSS3截取字符串实例代码【推荐】
2018/06/07 HTML / CSS
澳大利亚最好的厨具店：Kitchen Warehouse
2018/03/13 全球购物
公司授权委托书格式范文
2014/10/02 职场文书
2014财产信托协议书范本
2014/11/18 职场文书
施工员岗位职责
2015/02/10 职场文书
退伍军人感言
2015/08/01 职场文书
采购部年度工作总结
2015/08/13 职场文书
2016大学生求职自荐信范文
2016/01/28 职场文书
Python OpenCV之常用滤波器使用详解
2022/04/07 Python