vue制作在线计算器代码



88 349 117



特效描述:vue制作 在线计算器代码,vue.js制作黑色简易的计算器样式、支持基本模式和高级模式、支持计算公式运算等计算器代码

代码结构

1. 引入JS

<script src="js/vue.min.js"></script>

2. HTML代码

<div id="app">
  <div class="calculator">
    <button @click="changeModeEvent" class="toggle-button">
      <p v-if="changeMode">显示高级模式     ⚈</p>
      <p v-else>显示基本模式    ⚆</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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 滑动星星打分 切换按钮 表单 表单美化 表单插件 表单美化插件 其他 图片切换 图片选项卡 图标选项卡 计算器 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到