h5+css3+js 算数运算计算器小程序

最新推荐文章于 2023-08-20 17:32:12 发布

日向向阳1992

最新推荐文章于 2023-08-20 17:32:12 发布

阅读量2.7k

点赞数 2

分类专栏： web前端综合文章标签： css3 html5 javascript

本文链接：https://blog.csdn.net/m0_37269630/article/details/55272212

版权

在开题的间隙，整合两天的碎片时间，写了一个简单计算器的小程序（比较粗糙，还有很多需要改进的地方）

下面呢，就记录一下自己的设计过程：

1. 设计思路

①按键需要显示，结果需要显示，故需要一个显示器，在这里，我采用的是input ，对于计算结果，我利用的是强大的eval()函数，它能计算原始字符串的值

②若在计算输入时，按错一个键，可采用delete删除掉；而当需要一次性全部删除显示器中的数值时，采用clear键

③ 每个按键都有语音同步提示

2.设计且已经实现的计算器界面如下图：

3.源码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>compute</title>
		<style type="text/css">
		     form{
		     	position: fixed;
		     	width: 260px;
		     	height: 270px;
		     	background-color:lightgoldenrodyellow;
		     	margin-left: 20px;
		     	border:2px solid black;
		     }
			.result{
				position: fixed;
				height: 40px;
				font-size: 20px;
				margin-left: 7px;
				margin-top: 10px;
				border: 2px solid rosybrown;
			}
			.content{
				margin-left: 15px;
				margin-top: 16px;
			}
			input{
				height: 28px;
			}
			.delete ,.equal ,.clear{
				width: 65px;
				margin-top: 30px;
				
			}
			.delete{
				margin-right: 10px;
				position: relative;
			}
			.clear{
				margin-left: 2px;
				margin-right: 8px;
				position: relative;
			}
			.number , .sign , .point , .percent{
				margin-top: 10px;
				margin-right: 12px;
				width: 42px;
			}
			.equal{
				background-color: red;
			}
			
		</style>
	</head>
	<body>
		<form name="compute">
			<input type="text"  class="result" id="output"  maxlength="20" value=""/

最低0.47元/天解锁文章

日向向阳1992

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
h5+css3+js 算数运算计算器小程序

在开题的间隙，整合两天的碎片时间，写了一个简单计算器的小程序（比较粗糙，还有很多需要改进的地方）下面呢，就记录一下自己的设计过程： 1. 设计思路 ①按键需要显示，结果需要显示，故需要一个显示器，在这里，我采用的是input ，对于计算结果，我利用的是强大的eval()函数，它能计算原始字符串的值②若在计算输入时，按错一个键，可采用delet
复制链接

扫一扫