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 相关文章推荐
JavaScript中去掉数组中的重复值的实现方法
Aug 03 Javascript
取得窗口大小 兼容所有浏览器的js代码
Aug 09 Javascript
jQuery实现HTML5 placeholder效果实例
Dec 09 Javascript
javascript清空table表格的方法
May 14 Javascript
Bootstrap开发实战之响应式轮播图
Jun 02 Javascript
两种简单的跨域方法(jsonp、php)
Jan 02 Javascript
AngularJs+Bootstrap实现漂亮的计算器
Aug 10 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
Oct 31 Javascript
element-ui 关于获取select 的label值方法
Aug 24 Javascript
Vue.js 实现数据展示全部和收起功能
Sep 05 Javascript
React 父子组件通信的实现方法
Dec 05 Javascript
如何区分vue中的v-show 与 v-if
Sep 08 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遍历文件夹和文件列表示例分享
2014/03/11 PHP
PHP使用pear实现mail发送功能 windows环境下配置pear
2016/04/15 PHP
Js之软键盘实现(js源码)
2007/01/30 Javascript
JavaScript中判断函数是new还是()调用的区别说明
2011/04/07 Javascript
关于递归运算的顺序测试代码
2011/11/30 Javascript
JavaScript中变量提升 Hoisting
2012/07/03 Javascript
JavaScript检测实例属性, 原型属性
2015/02/04 Javascript
jQuery简单几行代码实现tab切换
2015/03/10 Javascript
JavaScript实现简单的数字倒计时
2015/05/15 Javascript
浅谈JS运算符&amp;&amp;和|| 及其优先级
2016/08/10 Javascript
jquery应用实例分享_实现手风琴特效
2018/02/01 jQuery
JS动画定时器知识总结
2018/03/23 Javascript
详解jQuery中的getAll()和cleanData()
2019/04/15 jQuery
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
2019/05/12 Javascript
微信小程序实现时间进度条功能
2020/11/17 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
2020/02/25 Javascript
[01:23]2014DOTA2国际邀请赛 球迷无处不在Ti现场世界杯受关注
2014/07/10 DOTA
python代码检查工具pylint 让你的python更规范
2012/09/05 Python
python任务调度实例分析
2015/05/19 Python
python解决字符串倒序输出的问题
2018/06/25 Python
python redis连接 有序集合去重的代码
2019/08/04 Python
对YOLOv3模型调用时候的python接口详解
2019/08/26 Python
django执行数据库查询之后实现返回的结果集转json
2020/03/31 Python
Python生成器generator原理及用法解析
2020/07/20 Python
广州某公司软件工程师面试题
2014/12/22 面试题
给定一个时间点,希望得到其他时间点
2013/11/07 面试题
大学毕业生的自我鉴定
2013/11/30 职场文书
大学生自助营养快餐店创业计划书
2014/01/13 职场文书
婚假请假条怎么写
2014/04/10 职场文书
关于读书的活动方案
2014/08/14 职场文书
机关作风建设整改方案
2014/10/27 职场文书
学校党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
高中生综合素质自我评价
2015/03/06 职场文书
小学校长开学致辞
2015/07/29 职场文书
超级实用!五步法则,教你写好年终工作总结
2019/12/05 职场文书
Zabbix对Kafka topic积压数据监控的问题(bug优化)
2022/07/07 Servers