初学者用JavaScript实现简单的计算器

最新推荐文章于 2025-04-28 09:37:33 发布

系哇卡几呆٩( ＇ω＇ )و

最新推荐文章于 2025-04-28 09:37:33 发布

阅读量399

点赞数 2

文章标签： javascript 前端 html

本文链接：https://blog.youkuaiyun.com/qq_53577699/article/details/126240008

版权

这篇博客介绍了如何使用JavaScript为初学者创建一个简单的计算器。通过HTML、CSS构建基础布局，重点在于JavaScript部分，利用switch case和if else语句处理按钮事件。博主通过循环为每个按钮添加点击事件，数字按钮将内容显示在屏幕上，运算符按钮用于存储数字并进行计算。目前的计算器仅支持两个数字和一个运算符的运算，防止连续多次按下运算符，并在按下等号时执行实际的计算操作，避免除以零的错误。这是一个适合初学者理解的简单项目，但功能有限。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主要运用switch case和if else语句对与各按钮各种事件的分类，还有点击事件的运用。

这里先不多说先放代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			#box {
				width: 500px;
				height: 350px;
				margin: 0 auto;
				background-color: #00aa00;
				padding: 30px;
			}

			#screen {
				background-color: white;
				background-size: 149.5%;
				width: 490px;
				height: 70px;
				margin: 0px auto;
				text-align: right;
				line-height: 60px;
				color: #000000;
				font-size: 28px;
				padding-right: 10px;
			}

			#line {
				flex-direction: row;
				display: flex;
				flex: 1;
			}

			.item {
				text-align: center;
				line-height: 60px;
				background-color: #008000;
				background-size: 600%;
				height: 70px;
				color: #fff;
				font-size: 28px;
				flex: 1;
			}

			.item:active {
				background-color: pink;
				background-size: 600%;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="screen">0</div>
			<div id="line">
				<div class&#

最低0.47元/天解锁文章