前端练习--计算器

前端练习–计算器

练习要求：

1.实现页面样式：数字和运算控件，页面居中
2.实现计算功能：能够进行加减乘除运算，也能进行退格和清空功能。

验证计算器，用例：11+22 是否得到 33 的结果

代码实现

css样式

			/* 清除页面默认样式 */
			*{
   
				margin: 0;
				padding: 0;
			}
			/* 对整个计算器设置定位，居中 */
			.con{
   
				position: relative;
				left: 700px;
				top: 200px;
			}
			/* 设置输出框大小和字体样式 */
			input{
   
				width: 250px;
				height: 50px;
				font-size: 50px;
				font-weight: bolder;
			}
			/* 设置每个按钮宽高 */
			button{
   
				width: 60px;
				height: 60px;
				margin-top: 10px;
				font-weight: bolder;
			}

html代码

<div class="con">
			<div>
				<!-- 添加 disabled 属性，不允许用户自己输入数字 -->
				<input type=