JS实现计算器功能

最新推荐文章于 2023-12-01 19:30:20 发布

是阿超

最新推荐文章于 2023-12-01 19:30:20 发布

阅读量1.4k

点赞数 4

分类专栏： JS 作业文章标签： javascript java

本文链接：https://blog.csdn.net/Mr_Gaojinchao/article/details/109234453

版权

作业同时被 2 个专栏收录

13 篇文章 1 订阅

订阅专栏

8 篇文章 3 订阅

订阅专栏

点击即可进入计算器页面

代码

代码：

<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title></title>
		<!-- 样式 -->
		<style>
			tr,td{
				text-align: center;
			}
			a{
				/* 去除下划线 */
				text-decoration: none;
				color: black;
			}
			a:hover{
				background-color:darkgray;
			}
		</style>
	</head>
	<body>
		<!-- 表格 -->
		<table border="1px" cellpadding="1" cellspacing="1" align="center">
			<tr>
				<td colspan="4" style="font-weight: 600;">计算器</td>
			</tr>
			<tr>
				<td colspan="4">
					<input type="text" id="numInput" style="text-align: right;"/>
				</td>
			</tr>
			<tr>
				<td onclick="onClick(this)"><a href="#">C</a></td>
				<td onclick="onClick(this)"><a href="#">/</a></td>
				<td onclick="onClick(this)"><a href="#">*</a></td>
				<td onclick="onClick(this)"><a href="#">-</a></td>
			</tr>
			<tr>
				<td onclick="onClick(this)"><a href="#">7</a></td>
				<td onclick="onClick(this)"><a href="#">8</a></td>
				<td onclick="onClick(this)"><a href="#">9</a></td>
				<td onclick="onClick(this)" rowspan="2"><a href="#">+</a></td>
			</tr>
			<tr>
				<td onclick="onClick(this)"><a href="#">4</a></td>
				<td onclick="onClick(this)"><a href="#">5</a></td>
				<td onclick="onClick(this)"><a href="#">6</a></td>
			</tr>
			<tr>
				<td onclick="onClick(this)"><a href="#">1</a></td>
				<td onclick="onClick(this)"><a href="#">2</a></td>
				<td onclick="onClick(this)"><a href="#">3</a></td>
				<td onclick="onClick(this)" rowspan="2"><a href="#">=</a></td>
			</tr>
			<tr>
				<td onclick="onClick(this)"><a href="#">0</a></td>
				<td onclick="onClick(this)" colspan="2"><a href="#">.</a></td>
			</tr>
		</table>
		
		<script>
			var strs = "";
			function onClick(count) {
				var numInput = document.getElementById("numInput");
				// 接收显示
				var str = count.innerText;
				// 如果等于(点击)C就清空
				if(str == "C"){
					numInput.value = "";
					str = "";
					strs = "";
				}
				// 如果等于(点击)= 执行eval()算法 得到结果
				if(str == "="){
					str = eval(strs);
					numInput.value = "";
					strs = str + "";
				}else{
					// 否则继续将内容写入字符串后
					strs += str;
				}
				// 如果等于(点击) + - * / 就显示 + - * /
				if(str == "+" || str == "-" || str == "*" || str == "/"){
					numInput.value = str;
				}else{
					// 如果第一次不是(没点击)数字 将此内容(运算符)清除
					if(isNaN(numInput.value)){
						numInput.value = "";
					}
					// 如果一直是数字则继续将内容写入字符串后
					numInput.value += str;
				}
			}
		</script>
	</body>
</html>

效果

样式效果图：

在这里插入图片描述
运行效果图：

在这里插入图片描述

联系博主

博主QQ：2425991616

博主微信：2425991616

博主邮箱：aboutgjc@outlook.com

扫码即可添加博主微信

博主微信

扫码即可添加博主QQ

博主QQ

打赏博主

在这里插入图片描述

是阿超

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
2
评论
JS实现计算器功能

代码：<!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8"> <title></title>  <style> tr,td{ text-align: center; } a{ /* 去除下划线 */ text-decoration: none; colo
复制链接

扫一扫