vue手写一个计算器
2024-05-18 18:54:03
计算器大家都不陌生 有计算器机器 有手机计算器 网页计算器!
那么好 今天我来给大家手写一个计算器
啥都不说上操作 请听题：vue手写计算器
一个个小方块拼成一个计算器 绿色比较好 可以缓解视力哦
index页面布局
<div class="calculator"><div class="screen">{{ display }}</div><div class="buttons"><div class="button" @click="clear">C</div><div class="button" @click="negate">+/-</div><div class="button" @click="operation('%')">%</div><div class="button operation" @click="operation('/')">÷</div><div class="button" @click="append('7')">7</div><div class="button" @click="append('8')">8</div><div class="button" @click="append('9')">9</div><div class="button operation" @click="operation('*')">x</div><div class="button" @click="append('4')">4</div><div class="button" @click="append('5')">5</div><div class="button" @click="append('6')">6</div><div class="button operation" @click="operation('-')">-</div><div class="button" @click="append('1')">1</div><div class="button" @click="append('2')">2</div><div class="button" @click="append('3')">3</div><div class="button operation" @click="operation('+')">+</div><div class="button" @click="append('0')">0</div><div class="button" @click="append('.')">.</div><div class="button equals" @click="equals">=</div></div></div>
css样式
<style>
.calculator {margin-left: 900px;display: flex;flex-direction: column;align-items: center;justify-content: center;width: 380px;height: 700px;padding: 50px;/* background-color: #fff; */border-radius: 10px;/* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); */border: 1px solid red;font-family: Arial, sans-serif;
}
.screen {display: flex;align-items: center;justify-content: flex-end;width: 100%;height: 100px;font-size: 40px;font-weight: bold;padding: 0 20px;background-color: #f5f5f5;border-top-left-radius: 10px;border-top-right-radius: 10px;box-shadow: inset 0 -2px rgba(0, 0, 0, 0.1);
}
.buttons {display: grid;grid-template-columns: repeat(4, 1fr);grid-gap: 10px;width: 100%;height: 320px;padding: 10px;
}
.button {display: flex;align-items: center;justify-content: center;width: 100%;height: 80px;font-size: 30px;font-weight: bold;color: #fff;background-color: #4caf50;border-radius: 5px;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);cursor: pointer;user-select: none;transition: background-color 0.2s, box-shadow 0.2s;
}
.button:hover {background-color: #4a8f4e;box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.button:active {background-color: #3f7c42;box-shadow: none;
}
.operation {background-color: #2196f3;
}
.equals {background-color: #ff9800;
}
.equals:hover {background-color: #ef8800;
}
</style>
JS逻辑
<script>
export default {data() {return {display: '0',operator: null,operand1: null,operand2: null,result: null,decimal: false,};},methods: {append(char) {if (this.display === '0') {this.display = char;} else {this.display += char;}},clear() {this.display = '0';this.operator = null;this.operand1 = null;this.operand2 = null;this.result = null;this.decimal = false;},negate() {if (this.display !== '0' && this.display !== '-') {this.display = (parseFloat(this.display) * -1).toString();}},operation(operator) {if (this.operand1 === null) {this.operand1 = parseFloat(this.display);this.operator = operator;this.display = '0';this.decimal = false;} else {this.operand2 = parseFloat(this.display);this.calculate();this.operator = operator;this.operand1 = this.result;this.operand2 = null;this.display = '0';this.decimal = false;}},calculate() {switch (this.operator) {case '+':this.result = this.operand1 + this.operand2;break;case '-':this.result = this.operand1 - this.operand2;break;case '*':this.result = this.operand1 * this.operand2;break;case '/':this.result = this.operand1 / this.operand2;break;case '%':this.result = this.operand1 % this.operand2;break;}},equals() {if (this.operand1 !== null && this.operand2 === null) {this.operand2 = parseFloat(this.display);this.calculate();this.display = this.result.toString();this.operand1 = null;this.operand2 = null;this.operator = null;this.decimal = false;}},},watch: {display(val) {if (val.indexOf('.') !== -1) {this.decimal = true;} else {this.decimal = false;}},},
};
</script>
考虑到很多小同学是新手 我直接给你展示源码 复制粘贴就能使用 仅需一步操作就好！一次就好~
<template><div class="calculator"><div class="screen">{{ display }}</div><div class="buttons"><div class="button" @click="clear">C</div><div class="button" @click="negate">+/-</div><div class="button" @click="operation('%')">%</div><div class="button operation" @click="operation('/')">÷</div><div class="button" @click="append('7')">7</div><div class="button" @click="append('8')">8</div><div class="button" @click="append('9')">9</div><div class="button operation" @click="operation('*')">x</div><div class="button" @click="append('4')">4</div><div class="button" @click="append('5')">5</div><div class="button" @click="append('6')">6</div><div class="button operation" @click="operation('-')">-</div><div class="button" @click="append('1')">1</div><div class="button" @click="append('2')">2</div><div class="button" @click="append('3')">3</div><div class="button operation" @click="operation('+')">+</div><div class="button" @click="append('0')">0</div><div class="button" @click="append('.')">.</div><div class="button equals" @click="equals">=</div></div></div>
</template><script>
export default {data() {return {display: '0',operator: null,operand1: null,operand2: null,result: null,decimal: false,};},methods: {append(char) {if (this.display === '0') {this.display = char;} else {this.display += char;}},clear() {this.display = '0';this.operator = null;this.operand1 = null;this.operand2 = null;this.result = null;this.decimal = false;},negate() {if (this.display !== '0' && this.display !== '-') {this.display = (parseFloat(this.display) * -1).toString();}},operation(operator) {if (this.operand1 === null) {this.operand1 = parseFloat(this.display);this.operator = operator;this.display = '0';this.decimal = false;} else {this.operand2 = parseFloat(this.display);this.calculate();this.operator = operator;this.operand1 = this.result;this.operand2 = null;this.display = '0';this.decimal = false;}},calculate() {switch (this.operator) {case '+':this.result = this.operand1 + this.operand2;break;case '-':this.result = this.operand1 - this.operand2;break;case '*':this.result = this.operand1 * this.operand2;break;case '/':this.result = this.operand1 / this.operand2;break;case '%':this.result = this.operand1 % this.operand2;break;}},equals() {if (this.operand1 !== null && this.operand2 === null) {this.operand2 = parseFloat(this.display);this.calculate();this.display = this.result.toString();this.operand1 = null;this.operand2 = null;this.operator = null;this.decimal = false;}},},watch: {display(val) {if (val.indexOf('.') !== -1) {this.decimal = true;} else {this.decimal = false;}},},
};
</script><style>
.calculator {margin-left: 900px;display: flex;flex-direction: column;align-items: center;justify-content: center;width: 380px;height: 700px;padding: 50px;/* background-color: #fff; */border-radius: 10px;/* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); */border: 1px solid red;font-family: Arial, sans-serif;
}
.screen {display: flex;align-items: center;justify-content: flex-end;width: 100%;height: 100px;font-size: 40px;font-weight: bold;padding: 0 20px;background-color: #f5f5f5;border-top-left-radius: 10px;border-top-right-radius: 10px;box-shadow: inset 0 -2px rgba(0, 0, 0, 0.1);
}
.buttons {display: grid;grid-template-columns: repeat(4, 1fr);grid-gap: 10px;width: 100%;height: 320px;padding: 10px;
}
.button {display: flex;align-items: center;justify-content: center;width: 100%;height: 80px;font-size: 30px;font-weight: bold;color: #fff;background-color: #4caf50;border-radius: 5px;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);cursor: pointer;user-select: none;transition: background-color 0.2s, box-shadow 0.2s;
}
.button:hover {background-color: #4a8f4e;box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.button:active {background-color: #3f7c42;box-shadow: none;
}
.operation {background-color: #2196f3;
}
.equals {background-color: #ff9800;
}
.equals:hover {background-color: #ef8800;
}
</style>
大功告成
有需要的小伙伴直接可以拿去用了 不谢不谢下次再见!
vue手写一个计算器相关推荐
- 基于vue手写一个分屏器，通过鼠标控制屏幕宽度。
基于vue手写一个分屏器,通过鼠标控制屏幕宽度. 先来看看实现效果: QQ录屏20220403095856 下面是实现代码: <template><section class=&qu ...
- Vue手写一个日历组件
工作中遇到一个需求是根据日历查看某一天/某一周/某一月的睡眠报告,但是找了好多日历组件都不是很符合需求,只好自己手写一个日历组件,顺便记录一下. 先来看看设计图是什么样式, 跟其他日历有点不一样,这个 ...
- android 层叠轮播,vue手写一个卡片化层叠轮播（支持滑动，移动端连续滚动，点击）...
项目需求,需要写一个卡片化层叠的轮播,找了下插件都没有合适的,于是写了一个展示5个卡片的轮播 先看效果图: 卡片化层叠轮播 5个卡片要计算各自的高度,宽度,利用相对定位计算出各自的位置 然后trans ...
- vue手写一个卡片化层叠轮播 五张 三张
项目需求,需要写一个卡片化层叠的轮播,找了下插件都没有合适的,于是写了一个展示5个卡片的轮播 先看效果图: 5个卡片要计算各自的高度,宽度,利用相对定位计算出各自的位置 然后transition过渡来 ...
- vue 手写一个时间选择器
最近研究了 DatePicker 的实现原理后做了一个 vue 的 DatePicker 组件,今天带大家一步一步实现 DatePicker 的 vue 组件. 原理 DatePicker 的原理是- ...
- 模拟 Vue 手写一个 MVVM
原文出自:https://www.pandashen.com MVVM 的前世今生 MVVM 设计模式,是由 MVC(最早来源于后端).MVP 等设计模式进化而来,M - 数据模型(Model),VM ...
- vue手写一个简单日历demo
实现效果: 左右拖拽实现切换月份,PC端自行改为左右点击实现切换 v-touch:swipe.left 左右切换,用的插件:vue2-touch-events transition-group 切换动 ...
- 使用Vue手写一个简易的键盘
<!DOCTYPE html> <html><head><meta charset="UTF-8" /><!-- 引入Vue ...
- vue @click 赋值_vue 手写一个时间选择器
vue 手写一个时间选择器 最近研究了 DatePicker 的实现原理后做了一个 vue 的 DatePicker 组件,今天带大家一步一步实现 DatePicker 的 vue 组件. 原理 Da ...
最新文章
- 从零使用qemu模拟器搭建arm执行环境
- 百度搜索结果URL参数含义解析
- esp8266 防掉线方法_esp8266 smartconfig-智能配网分析和使用及注意事项
- librtmp协议分析---RTMP_SendPacket函数
- left join on、where后面的条件的区别
- comsol固体传热_参与介质中辐射传热的 4 种计算方法
- 基于SSM的驾校网站
- 北京协和医院付海鸿：医学精准要影像先行，影像精准就要技术先行
- java实现凯撒密码_Java实现进阶版凯撒密码
- 什么是TOC约束理论以及TOC系统业务流程
- GPU深度报告，三大巨头，十四个国内玩家一文看懂【物联网智商精选】
- TRL街道审核软件包简介
- Android+上百实例源码分析以及开源分析+集合打包
- ubuntu18.04 搭建ffmpeg踩坑
- Linux·工作队列
- 电容笔做的比较好的品牌有哪些？便宜好用的电容笔推荐
- linux系统无法网上看视频文件,重橙网络：Flash Player 发布重要更新，Win7 以下/Linux/Mac 不再支持视频格式内容播放...
- 云南2018年GDP增长8.9% 较2017年增长速度有所下降
- nbsp; quot; amp;lt; gt; 等html字符转义
- linux 当前登录用户及历史登录用户信息查询