Vue.js实现立体计算器


Posted in Javascript onFebruary 22, 2020

本文实例为大家分享了Vue.js 制作立体计算器的具体方法,供大家参考,具体内容如下

项目效果图

Vue.js实现立体计算器

Vue.js实现立体计算器

Vue.js实现立体计算器

这是一个简单的项目实现加减乘除运算

项目结构

Vue.js实现立体计算器

代码展示

计算器1.0.html

<!DOCTYPE html>
<html>
 <head>
 <title>计算器</title>
 <link rel="stylesheet" type="text/css" href="css/style.css" />
 </head>
 <body>
 <div id="big">
 <div id="c" @click="clear">c</div>
 <div id="a1" @click="add(1)">1</div>
 <div id="a2" @click="add(2)">2</div>
 <div id="a3" @click="add(3)">3</div>
 <div id="a4" @click="add(4)">4</div>
 <div id="a5" @click="add(5)">5</div>
 <div id="a6" @click="add(6)">6</div>
 <div id="a7" @click="add(7)">7</div>
 <div id="a8" @click="add(8)">8</div>
 <div id="a9" @click="add(9)">9</div>
 <div id="a0" @click="add(0)">0</div>
 <div id="a16" @click="add('+')">+</div>
 <div id="a15" @click="add('-')">-</div>
 <div id="a14" @click="add('/')">/</div>
 <div id="a13" @click="add('*')">X</div>
 <div id="a12" @click="run">=</div>
 <div id="a11" @click="add('.')">.</div>
 <input type="text" readonly="readonly" v-model="res" id="a17">
 </div>
 <script src="js/vue/vue.js"></script>
 <script src="js/app.js"></script>
 </body>
</html>

style.css

#big {
 position: relative;
 width: 355px;
 height: 240px;
 background-color: #999cff;
 margin: 100px auto;
 border-radius: 10px;
 box-shadow: 15px 15px 15px #000;
 cursor: pointer;
 }
 
 #big div {
 position: absolute;
 box-shadow: 5px 5px 5px #000;
 display: -webkit-flex;
 display: flex;
 -webkit-align-items: center;
 align-items: center;
 -webkit-justify-content: center;
 justify-content: center;
 width: 80px;
 height: 40px;
 border-radius: 5px;
 }
 
 #c {
 background-color: #FFFFFF;
 left: 10px;
 top: 7px;
 }
 
 #a7 {
 background-color: #FFFFFF;
 left: 10px;
 top: 55px;
 }
 
 #a4 {
 background-color: #FFFFFF;
 left: 10px;
 top: 100px;
 }
 
 #a1 {
 background-color: #FFFFFF;
 left: 10px;
 top: 145px;
 }
 
 #a0 {
 background-color: #FFFFFF;
 left: 10px;
 top: 190px;
 }
 
 #a8 {
 background-color: #FFFFFF;
 left: 95px;
 top: 55px;
 }
 
 #a5 {
 background-color: #FFFFFF;
 left: 95px;
 top: 100px;
 }
 
 #a2 {
 background-color: #FFFFFF;
 left: 95px;
 top: 145px;
 }
 
 #a11 {
 background-color: #FFFFFF;
 left: 95px;
 top: 190px;
 }
 
 #a9 {
 background-color: #FFFFFF;
 left: 180px;
 top: 55px;
 }
 
 #a6 {
 background-color: #FFFFFF;
 left: 180px;
 top: 100px;
 }
 
 #a3 {
 background-color: #FFFFFF;
 left: 180px;
 top: 145px;
 }
 
 #a12 {
 background-color: #FFFFFF;
 left: 180px;
 top: 190px;
 }
 
 #a16 {
 background-color: #f44336;
 left: 265px;
 top: 55px;
 }
 
 #a15 {
 background-color: #f44336;
 left: 265px;
 top: 100px;
 }
 
 #a14 {
 background-color: #f44336;
 left: 265px;
 top: 145px;
 }
 
 #a13 {
 background-color: #f44336;
 left: 265px;
 top: 190px;
 }
 
 #a17 {
 position: absolute;
 box-shadow: inset 5px 5px 5px #000;
 text-align: center;
 font-size: 20px;
 width: 250px;
 height: 40px;
 background-color: #99ffa6;
 border-radius: 5px;
 left: 95px;
 top: 5px;
 }

app.js

var app = new Vue({
 el: '#big',
 data: {
 res: ''
 },
 methods: {
 add: function(index) {
 this.res += index;
 },
 run: function() {
 try {
 this.res = eval(this.res);
 } catch(exception) {
 this.res = '';
 alert("表达式输入错误");
 }
 },
 clear: function() {
 this.res = '';
 }
 }
 })

用相对布局把计算器的每一个按键定好位置,加上一些圆角,颜色可以根据自己喜欢的颜色来给,实现3D效果最关键的是要加上阴影效果。注意input标签的阴影要在内侧。采用Vue.js框架使用v-model指令实现input标签的双向绑定。在methods属性中添加函数 使用v-on指令绑定事件,这里使用缩写@click ,add函数的功能是完成字符串的拼接,run函数调用eval函数将拼接好的字符解析并运算出结果赋给res,如果字符串格式有误抛出异常并通过alert函数反馈给用户然后把res清除。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
表格 隔行换色升级版
Nov 07 Javascript
js+div实现图片滚动效果代码
Feb 10 Javascript
jQuery中val()方法用法实例
Dec 25 Javascript
js+CSS实现弹出居中背景半透明div层的方法
Feb 26 Javascript
js代码实现下拉菜单【推荐】
Dec 15 Javascript
angular-ui-sortable实现可拖拽排序列表
Dec 28 Javascript
大白话讲解JavaScript的Promise
Apr 06 Javascript
vue路由跳转时判断用户是否登录功能的实现
Oct 26 Javascript
vue权限路由实现的方法示例总结
Jul 29 Javascript
JavaScript高级函数应用之分时函数实例分析
Aug 03 Javascript
在vue中多次调用同一个定义全局变量的实例
Sep 25 Javascript
AJAX检测用户名是否存在的方法
Mar 24 Javascript
vue实现计算器功能
Feb 22 #Javascript
js实现网页版贪吃蛇游戏
Feb 22 #Javascript
微信小程序 bindtap 传参的实例代码
Feb 21 #Javascript
leaflet加载geojson叠加显示功能代码
Feb 21 #Javascript
JavaScript中this函数使用实例解析
Feb 21 #Javascript
如何通过JS实现转码与解码
Feb 21 #Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
Feb 21 #Javascript
You might like
php通过array_shift()函数移除数组第一个元素的方法
2015/03/18 PHP
PHP编程实现脚本异步执行的方法
2017/08/09 PHP
实现图片预加载的三大方法及优缺点分析
2014/11/19 Javascript
jQuery判断对象是否存在的方法
2015/02/05 Javascript
Javascript获取随机数的实现方法
2016/06/22 Javascript
jQuery实现底部浮动窗口效果
2016/09/07 Javascript
微信小程序 Image API实例详解
2016/09/30 Javascript
JavaScript基础之AJAX简单的小demo
2017/01/29 Javascript
微信小程序 图片加载(本地,网路)实例详解
2017/03/10 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
2017/05/08 jQuery
React.js中常用的ES6写法总结(推荐)
2017/05/09 Javascript
解决vue组件中使用v-for出现告警问题及v for指令介绍
2017/11/11 Javascript
JavaScript惰性载入函数实例分析
2019/03/27 Javascript
解决vue-cli 打包后自定义动画未执行的问题
2019/11/12 Javascript
vue+node 实现视频在线播放的实例代码
2020/10/19 Javascript
vue打开新窗口并实现传参的图文实例
2021/03/04 Vue.js
[59:42]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
[48:51]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第一场 11.28
2020/12/02 DOTA
总结Python编程中三条常用的技巧
2015/05/11 Python
python logging日志模块的详解
2017/10/29 Python
Python实现的NN神经网络算法完整示例
2018/06/19 Python
python使用for循环计算0-100的整数的和方法
2019/02/01 Python
python 定时器,实现每天凌晨3点执行的方法
2019/02/20 Python
Python enumerate函数功能与用法示例
2019/03/01 Python
Python使用POP3和SMTP协议收发邮件的示例代码
2019/04/16 Python
Python字符串格式化输出代码实例
2019/11/22 Python
pytorch梯度剪裁方式
2020/02/04 Python
python3 使用traceback定位异常实例
2020/03/09 Python
Python3安装模块报错Microsoft Visual C++ 14.0 is required的解决方法
2020/07/28 Python
写好自荐信的要点
2013/11/06 职场文书
大专生简历的自我评价
2013/11/26 职场文书
总经理工作职责范文
2014/03/14 职场文书
硕士生找工作求职信
2014/07/05 职场文书
先进员工获奖感言
2014/08/14 职场文书
校长师德表现自我评价
2015/03/05 职场文书
创业计划书之淘宝网店
2019/10/08 职场文书