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

前端之家收集整理的这篇文章主要介绍了vue.js实现的经典计算器/科学计算器功能示例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例讲述了vue.js实现的经典计算器/科学计算器功能分享给大家供大家参考,具体如下:

1. HTML部分:

Show Basic Mode ⚆

2. css部分:

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.35); } p { margin-top: 0; } button::-moz-focus-inner { border-color: transparent; }

3. js部分:

-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 } } })

完整实例代码如下:

www.jb51.cc vue.js计算器

使用本站HTML/CSS/JS在线运行测试工具:,可得到如下测试运行效果:

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

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

在线一元函数(方程)求解计算工具:

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

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

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

原文链接:https://www.f2er.com/vue/31553.html

猜你在找的Vue相关文章