首页
所有分类
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 相关文章推荐
使用onbeforeunload属性后的副作用
Mar 08 Javascript
jquery验证表单中的单选与多选实例
Aug 18 Javascript
jquery滚动条插件jScrollPane的使用介绍
Nov 08 Javascript
最全面的百度地图JavaScript离线版开发
Sep 10 Javascript
bootstrap日历插件datetimepicker使用方法
Dec 14 Javascript
layui前段框架日期控件使用方法详解
May 19 Javascript
vue小图标favicon不显示的解决方案
Sep 19 Javascript
vue-router的HTML5 History 模式设置
Sep 08 Javascript
VScode格式化ESlint方法(最全最好用方法)
Sep 10 Javascript
js实现移动端吸顶效果
Jan 08 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
May 09 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
Jul 29 Javascript
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
进销存(1) greenlet(1) gevent(1) list(1) find(1) Excel(4) pytest(3) enumerate(1) Coroutine(1) csv(4)
You might like
PHP中上传多个文件的表单设计例子
2014/11/19 PHP
php判断当前用户已在别处登录的方法
2015/01/06 PHP
php-redis中的sort排序函数总结
2015/07/08 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
用js实现计算代码行数的简单方法附代码
2007/08/13 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
2012/07/03 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
2013/12/19 Javascript
js中document.write的那点事
2014/12/12 Javascript
js实现仿Windows风格选项卡和按钮效果实例
2015/05/13 Javascript
javascript实现判断鼠标的状态
2015/07/10 Javascript
学习JavaScript设计模式之状态模式
2016/01/08 Javascript
Webwork 实现文件上传下载代码详解
2016/02/02 Javascript
js遍历map javaScript遍历map的简单实现
2016/08/26 Javascript
js监听input输入框值的实时变化实例
2017/01/26 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
2017/04/17 jQuery
vue小图标favicon不显示的解决方案
2017/09/19 Javascript
Puppeteer环境搭建的详细步骤
2018/09/21 Javascript
Vue项目查看当前使用的elementUI版本的方法
2018/09/27 Javascript
详解如何使用node.js的开发框架express创建一个web应用
2018/12/20 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
2020/06/24 Javascript
[05:09]DOTA2-DPC中国联赛2月22日Recap集锦
2021/03/11 DOTA
在Python的Flask框架中实现单元测试的教程
2015/04/20 Python
用Python编写一个基于终端的实现翻译的脚本
2015/04/24 Python
Python递归遍历列表及输出的实现方法
2015/05/19 Python
python中argparse模块用法实例详解
2015/06/03 Python
python的内存管理和垃圾回收机制详解
2019/05/18 Python
维多利亚的秘密官方网站：Victoria’s Secret
2018/10/24 全球购物
如何估计一张表的大小（假设该表中有1万条数据）
2016/03/27 面试题
几个MySql的面试题
2013/04/22 面试题
2013年员工自我评价范文
2013/12/27 职场文书
红领巾广播站广播稿
2014/10/19 职场文书
邀请函怎么写
2015/01/30 职场文书
房屋所有权证明
2015/06/19 职场文书
创业计划书之便利店
2019/09/05 职场文书
Python 批量下载阴阳师网站壁纸
2021/05/19 Python
详解Python内置模块Collections
2022/03/22 Python