Vue.js制作立体计算器

Vue.js实现立体计算器
该博客介绍用Vue.js制作立体计算器项目。此项目可实现加减乘除运算,通过相对布局确定按键位置,添加圆角和阴影实现3D效果。采用Vue.js框架,用v-model指令实现双向绑定,在methods属性添加函数,用@click绑定事件,完成字符串拼接与运算。

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清除。

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值