Vue.js制作立体计算器

最新推荐文章于 2025-06-24 22:42:30 发布

原创最新推荐文章于 2025-06-24 22:42:30 发布 · 597 阅读

3 ·

CC 4.0 BY-SA版权

web 专栏收录该内容

23 篇文章

订阅专栏

该博客介绍用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清除。