首页
所有分类
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 动态创建VML的方法
Oct 14 Javascript
javascript二维数组转置实例
Jan 22 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
Dec 08 Javascript
javascript数组去重小结
Mar 07 Javascript
Canvas + JavaScript 制作图片粒子效果
Feb 08 Javascript
详解数组Array.sort()排序的方法
May 09 Javascript
JS库 Highlightjs 添加代码行号的实现代码
Sep 13 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
Feb 08 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
Sep 02 Javascript
JavaScript实现单点登录的示例
Sep 23 Javascript
javascript实现时钟动画
Dec 03 Javascript
vue中activated的用法
Jan 03 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
继承(1) 封装(1) 百度地图(1) gRPC(3) variables(1) transaction(1) PyAutoGUI(1) 主从复制(1) promise(2) 构造函数(1)
You might like
PHP迭代器的内部执行过程详解
2013/11/12 PHP
php文件缓存类汇总
2014/11/21 PHP
解读PHP的Yii框架中请求与响应的处理流程
2016/03/17 PHP
学习PHP session的传递方式
2016/06/15 PHP
php生成网页桌面快捷方式
2017/05/05 PHP
php利用array_search与array_column实现二维数组查找
2019/07/08 PHP
thinkphp5框架路由原理与用法详解
2020/02/11 PHP
jquery form 加载数据示例
2014/04/21 Javascript
node+express+ejs制作简单页面上手指南
2014/11/26 Javascript
JavaScript日期时间与时间戳的转换函数分享
2015/01/31 Javascript
js window对象属性和方法相关资料整理
2015/11/11 Javascript
基于Angularjs实现分页功能
2016/05/30 Javascript
谈谈JavaScript中的几种借用方法
2016/08/09 Javascript
JS实现的自动打字效果示例
2017/03/10 Javascript
JavaScript实现自动跳转文本功能
2017/05/25 Javascript
Angularjs Promise实例详解
2018/03/15 Javascript
简单了解TypeScript中如何继承 Error 类
2019/06/21 Javascript
[48:00]EG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/29 DOTA
Python聚类算法之凝聚层次聚类实例分析
2015/11/20 Python
浅析python实现scrapy定时执行爬虫
2018/03/04 Python
python使用多进程的实例详解
2018/09/19 Python
Python+opencv+pyaudio实现带声音屏幕录制
2019/12/23 Python
pytorch实现用CNN和LSTM对文本进行分类方式
2020/01/08 Python
python实现tail -f 功能
2020/01/17 Python
python如何爬取动态网站
2020/09/09 Python
一款基于css3的列表toggle特效实例教程
2015/01/04 HTML / CSS
HTML5的标签的代码的简单介绍 HTML5标签的简介
2012/05/28 HTML / CSS
来自世界各地的饮料：Flavourly
2019/05/06 全球购物
香港彩色隐形眼镜在线商店：Stunninglens（全球免费送货）
2019/05/10 全球购物
大学生的自我鉴定范文
2014/01/21 职场文书
幼儿园教研活动总结
2014/04/30 职场文书
工作检讨书怎么写
2015/01/23 职场文书
MBA推荐信怎么写
2015/03/25 职场文书
2015年社区环境卫生工作总结
2015/04/21 职场文书
2016高考冲刺决心书
2015/09/23 职场文书
一篇文章带你掌握SQLite3基本用法
2022/06/14 数据库