没用的计算器

本次的项目仍然属于没用的模块，仅供娱乐，最后附有效果视频，如需要源代码可以私信或评论，本次还是使用vue来实现的，同样也可以修改为JS

一、HTML部分

        <div class="con"><div class="calculator"><input type="text" v-model="firstContent"><select v-model="option"><option v-for="item in optionList" :key="item">{{ item }}</option></select><input type="text" v-model="secondContent">=<!--由于v-if和v-show的效果都会使元素不占位置因此使用三元表达式来解决此问题--><p :class="flag?'pClass':''">{{ countThing }}</p></div><button @click="count">开始计算</button></div>

二、CSS/LESS部分

// 按钮动画
@keyframes moving {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}
}.calculatorView {.con {width: 300px;height: 100px;margin: 100px auto;box-sizing: border-box;border: 2px solid black;border-radius: 10px;text-align: center;padding-top: 20px;}// 按钮部分button {margin-top: 10px;position: relative;cursor: pointer;background: transparent;height: 40px;width: 100px;border-radius: 10px;font-size: 18px;color: #f4c24c;border: 0;overflow: hidden;&::after,&::before {content: '';position: absolute;}&::after {border-radius: 10px;width: calc(100% - 2 * 2px);height: calc(100% - 2 * 2px);left: 2px;top: 2px;background-color: white;z-index: -1;}&::before {z-index: -2;animation: moving 1s linear infinite;transform-origin: left top;left: 50%;top: 50%;width: 200%;height: 200%;background-color: #68fd72;}}// 计算的东西.calculator {display: flex;justify-content: space-between;input, select {width: 40px;height: 20px;margin: 0 10px;}.pClass {opacity: 1;}p {opacity: 0;width: 80px;}}
}

三、JS部分

export default defineComponent({name: "calculatorView",data() {return {// p是否显示flag: false,// 下拉菜单数组optionList: ['+', '-', '*', '/', '%'],// 第一个输入框的内容firstContent: '',// 第二个输入框的内容secondContent: '',// 输入框内容option: '+',// 显示出来的东西countThing: ''}},methods: {count() {if (this.firstContent !== '' && this.secondContent !== '') {this.flag = truethis.countThing = this.firstContent + this.option + this.secondContent}}}
})

四、显示效果