鲁达 其实我一直都想做一个计算器；用自己的东西来耍：是不是慢慢的成就感啊？
对于大佬们来说我写的可能就比较垃圾了；但是我想对于初级的你；应该可以起到借鉴的作用；如果做的不是很好；希望大家多多提出建议哦；
先给大家看看效果吧！
废话不多说；上代码
html页面代码
<div class="calculator"> <div class="title"> <span></span> </div> <input type="text" disabled v-model="value" name="" id=""> <div class="textValue"> <div @click="onCount('C')" class="btn">C</div> <div @click="onAdd('+/-')" class="btn">+/-</div> <div @click="onCount('%')" class="btn">%</div> <div @click="onDelete('←')" class="btn btn_con btn_con_style">←</div> <div @click="onCount('7')" class="btn">7</div> <div @click="onCount('8')" class="btn">8</div> <div @click="onCount('9')" class="btn">9</div> <div @click="onCount('x2')" class="btn btn_con_style">X<i>2</i></div> <div @click="onPair('√')" class="btn btn_con_style">√</div> <div @click="onCount('4')" class="btn">4</div> <div @click="onCount('5')" class="btn">5</div> <div @click="onCount('6')" class="btn">6</div> <div @click="onCount('*')" class="btn btn_con_style">*</div> <div @click="onCount('/')" class="btn btn_con_style">/</div> <div @click="onCount('1')" class="btn">1</div> <div @click="onCount('2')" class="btn">2</div> <div @click="onCount('3')" class="btn">3</div> <div @click="onCount('+')" class="btn btn_con_style">+</div> <div @click="onCount('-')" class="btn btn_con_style">-</div> <div @click="onCount('0')" class="btn btn_con">0</div> <div @click="onCount('.')" class="btn">.</div> <div @click="onEqual('=')" class="btn btn_con btn_con_style">=</div> </div> </div>js逻辑代码
onCount (item) { let add if (item === 'C') { // 清空数据 = [] = 1 Value = false = false // eslint-disable-next-line no-return-assign return = 0 } let str = ['+', '-', '*', '/', '%'] // eslint-disable-next-line camelcase let strTrue = (item_1 => item_1 === item) // eslint-disable-next-line camelcase let strTrue_1 = (item_2 => item_2 === [1]) // 判断在删除的时候 输入框中是否是0;如果是 就不在执行了 // eslint-disable-next-line no-return-assign if (item === '←' && === 0) return = [] // 判断输入的数据 是否是加减乘除 if ( === 1) { // 1.此处添加第一个数据 if (strTrue) return // 如果第一个输入的数据是 +-*/ 那么就 不执行 if ([0] === undefined) { [0] = item } else { [0] = item } add = .join(' ') ++ } else { // 这儿添加的是 第二个/三个数据 if (.length === 2) { // 这儿是 进行数据判断 Value = (item => item === [1]) } if (!strTrue && !Value) { // 判定在第一个数据上对否添加数据 // 在结算了一次以后;对数据判定;如果结算的数据不等于零;就不能输入数据 if () return this.$('请输入+-*/%') [0] = add = [0] + item } else if (strTrue) { // 如果已经有两个数据了;也就是说有+-*/了;并且下一个是相同的请况下就不进行添加了 // eslint-disable-next-line camelcase if ((.length === 2 && strTrue_1) || [1] === undefined) { [1] = item // eslint-disable-next-line camelcase } else if (.length === 3 && strTrue_1) { // 这儿是判定数组长度是否为3;如果没三就不得添加+-*/符号 this.$('请先删除') } else { [1] += item } add = .join(' ') } else { if ([2] === undefined) { [2] = item } else { [2] += item } add = .join(' ') } } = add = false }, // 等于 onEqual (item) { // 判断输入的数据 是否是加减乘除 // let arr = ['+', '-', '*', '/'] // let arrTrue = arr.some(item => item === [1]) // let arrTrue_1 = arr.some(item => item == [2]) con(.length) // 判定数组数据是否有三位数 if (.length !== 3) return this.$('输入错误') let res // 声明变量 // 计算 if ([1] === '*') { res = [0] * 1 * [2] * 1 } else if ([1] === '/') { res = [0] * 1 / [2] * 1 } else if ([1] === '-') { res = [0] * 1 - [2] * 1 } else if ([1] === '+') { res = [0] * 1 + [2] * 1 } else if ([1] === '%') { res = [0] * 1 % [2] * 1 } = res = [] // 把值保存下来 [0] = res = 2 Value = false = true con(res) }, // +/- 按钮 onAdd (e) { }, // √ onPair () { }, // 删除 onDelete () { // eslint-disable-next-line no-unused-vars let addRes if (!) { // 将数组转换为字符串 let onRes = .join(',') con) // 删除字符串的最后一个 let onList = onRes.substr(0, onRes.length - 1) // 将字符串转换数组 = onLi(',') // 将数据解析后渲染 addRes = .join(' ') = addRes con(.length) // 如果这个数据小于等于2的时候 ;说明* 被删除或者 if (.length <= 2) { Value = false } // 如果数组被删完了;那么需要对数据初始化 if <= 1) { = 0 = false = 1 Value = false } } else { // 这儿是指 计算运行以后 得到的数据对其进行 删除 if (.length === 1) { = 0 } = [] = 0 = false = 1 Value = false } }css样式代码
.calculator { width: 750px; height: 100vh; margin: 0 auto; background-color: #000; .title { padding-top: 40px; span { display: block; width: 750px; height: 80px; line-height: 80px; text-align: center; color: #fff; } } input { margin-top: 160px; padding-left: 10px; width: 750px; height: 280px; background-color: #000; font-size: 66px; color: #fff; text-align: right; border: unset; padding-right: 30px; } .textValue { position: fixed; bottom: 0; left: 10px; width: 100%; display: flex; justify-content: center; flex-wrap: wrap; .btn { display: flex; position: relative; justify-content: center; align-items: center; color: #333; width: 130px; color: #fff; height: 90px; font-size: 32px; border-radius: 10px; margin-right: 20px; margin-bottom: 30px; box-shadow: 0 0 8px rgb(212, 212, 212); background-color: #333; i { position: absolute; right: 26px; top: 8px; font-size: 26px; } &:active { color: #fff; box-shadow: unset; background-color: #fe9900; } } .btn_con { width: 280px; } .btn_con_style { color: #fff; background-color: #fe9900; &:active { color: #fff; box-shadow: unset; background-color: #333; } } } }