wordpress 评论post,上海网上推广优化,电子商务发展的前景,珠海网站建设服务本次的项目仍然属于没用的模块#xff0c;仅供娱乐#xff0c;最后附有效果视频#xff0c;如需要源代码可以私信或评论#xff0c;本次还是使用vue来实现的#xff0c;同样也可以修改为JS 一、HTML部分 div classcondiv classcalculator仅供娱乐最后附有效果视频如需要源代码可以私信或评论本次还是使用vue来实现的同样也可以修改为JS 一、HTML部分 div classcondiv classcalculatorinput typetext v-modelfirstContentselect v-modeloptionoption v-foritem in optionList :keyitem{{ item }}/option/selectinput typetext v-modelsecondContent!--由于v-if和v-show的效果都会使元素不占位置因此使用三元表达式来解决此问题--p :classflag?pClass:{{ countThing }}/p/divbutton clickcount开始计算/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}}}
})
四、显示效果 没用的计算器
