Web前端制作仿iOS计算器案例

羊毛衫子

已于 2024-07-01 00:36:12 修改

阅读量332

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Web 文章标签：前端 ui设计 javascript css3 html html5 css

于 2024-06-30 21:31:39 首次发布

本文链接：https://blog.youkuaiyun.com/NebulaTech/article/details/140086783

时隔2年，再次发文章，哈哈，现在已经从初三一跃成中职二年级的学生了，之前python学习的过程可谓是一波三折，从这个学期开始接触到前端，上手很快，因下半年我要参加一个移动应用开发的省技能大赛项目，所以打算在这个暑假再深入一下前端，今天做了个仿iOS计算器的例子，目前它可以实现加、减、乘、除运算，清除，退位，单击复制等功能，话不多说，直接看成果和代码咯～

非常简单的一个例子，里面肯定有一些不足，小伙伴们可以在评论区里提提意见～

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
			*{
				font-family: system-ui;
			}
			
			.calculator{
				width: 400px;
				border: 1px solid black;
				border-radius: 50px;
				background-color: #000000;
			}
			.calculator-result{
				font-size: 24px;
				color: white;
				text-align: right;
				padding-right: 30px;
				bo