网页版简易计算器

最新推荐文章于 2025-02-22 01:00:00 发布

Mtreellen

最新推荐文章于 2025-02-22 01:00:00 发布

阅读量1.8k

点赞数 6

CC 4.0 BY-SA版权

分类专栏： web 文章标签：计算器 js

本文链接：https://blog.csdn.net/qq_44057443/article/details/100597081

本文介绍了如何创建一个简单的网页计算器。通过将JavaScript代码嵌入HTML文件中，实现了计算器的运行效果，用户可以在浏览器中直接查看并使用这个计算器。

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

运行效果

在这里插入图片描述
运行：直接将下面的代码放到任意文本文件中，文件后缀名改为.html，然后用任意浏览器打开即可。

实现思路以及代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>网页版的简易计算器</title>
<!--使用js完成,之后可用:jquery-->
<!-
-->
<style>
	/*设置input的宽度和高度*/
	input{
    
    
		width: 396px;
		height: 50px;
		font-size: 30px;
	}
	
	/*表格的行文本左右居中*/
	tr{
    
    
		/*text-align*/
		text-align: center;
	}
	/*设置单元格的内容宽度和高度以及字体大小*/
	td{
    
    
		width: 100px;
		height: 119px;
		font-size:30px;
	}
	/*伪类选择器:hover*/
	td:hover{
    
    
		/*指定背景色*/
		background-color: greenyellow;
		/*cursor:pointer
		 * 鼠标经过的时候,变成小手
		 */
		cursor:pointer ;
	}
</style>
	</head>
<body>
<!--
cellspacing:单元边沿和单元格之间的空间
cellpadding:单元格和单元格之间的空间
-->
<!--在input上面写一个div: 指定这个当前系统时间-->
<!--禁用文本框的输入功能:disabled:disabled-->
<center><input type="text" value="0" id="show" disabled="disabled" /></center>
<table border="1px" cellspacing="0" cellpadding="2" align="center" width="400px" 
	height="600px">
	<tr>