没用的计算器

本次的项目仍然属于没用的模块，仅供娱乐，最后附有效果视频，如需要源代码可以私信或评论，本次还是使用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 = true
                this.countThing = this.firstContent + this.option + this.secondContent
            }
        }
    }
})

四、显示效果

没用的计算器