HTML+CSS+JavaScript制作简易计算器

2023-12-14 01:08:06

一运行效果图

二代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.zero{
				position: absolute;
				top:18%;
				left:40%;
				height:200px;
				width:300px;
				border:2px solid black;
				background-color:rgb(235, 235, 235);
			}
			.one{
				position: relative;
				top:1%;
				left:5%;
				border:2px;
				width: 50px;
				border-radius: 20px 20px 20px 20px;
				box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.3);
				background-color:rgb(255, 157, 178);
			}
			.two{
				position: relative;
				top:1%;
				left:7%;
				border:2px;
				width: 50px;
				border-radius: 20px 20px 20px 20px;
				box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.3);
				background-color:rgb(44, 227, 255);
			}
			.three{
				position: relative;
				top:1%;
				left:9%;
				border:2px;
				width: 50px;
				border-radius: 20px 20px 20px 20px;
				box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.3);
				background-color:rgb(255, 157, 178);
			}
			.four{
				position: relative;
				top:1%;
				left:11%;
				border:2px;
				width: 50px;
				border-radius: 20px 20px 20px 20px;
				box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.3);
				background-color:rgb(44, 227, 255);
			}
			#one{
				position:relative;
				left:5%;
				font-size:15px;
			}
			input[type="text"]{
				width:200px;
			}
			input[type="text"]:hover{
				background-color:rgb(216, 216, 216);
			}
			p{
				position:absolute;
				top:-20%;
				left:5%;
				background-color:rgb(255, 255, 255);
			}

		</style>
	</head>
	<body>
	<h2 class="zero">
		<p>算术运算</p></br>			
		 <span id="one">数字A<input type="text" id="inputId1" /></br>	
		 数字B<input type="text" id="inputId2" /></br>	
		 结果C<input type="text" id="resultId"/></br></span>
		<button type="button" onclick="cal('+')" class="one">加</button>
		<button type="button" onclick="cal('-')" class="two">减</button>
		<button type="button" onclick="cal('*')" class="three">乘</button>
		<button type="button" onclick="cal('/')" class="four">除</button>
	</h2>
	<script>
			function cal(type){
						var num1 = document.getElementById('inputId1');
						var num2 = document.getElementById('inputId2');
						var result;
						switch(type){
							case '+':
							result = parseInt(num1.value) + parseInt(num2.value);
							break;
							case '-':
							result = parseInt(num1.value) - parseInt(num2.value);
							break;
							case '*':
							result = parseInt(num1.value) * parseInt(num2.value);
							break;
							case '/':
							result = parseInt(num1.value) / parseInt(num2.value);
							break;
						}
						var resultObj = document.getElementById('resultId');
						resultObj.value = result;
					}
		</script>
	</body>
</html>

三相关知识点

3.1????????HTML相关知识

这是一个 HTML 页面中的代码片段，包含了一个简单的算术运算器的界面。

其中 h2?元素的 `class` 属性为 zero，用于定义该元素的样式。

h2?元素内部包含一个文本段落，标题为“算术运算”。

输入框和按钮分别使用 HTML 的 input?和 button?元素实现，每个元素都附有一个唯一的 `id` 属性，方便 JavaScript 代码中调用该元素。

input?元素的 type?属性分别为 text，用于输入整数或浮点数。

每个 button?元素都附有一个 onclick?属性，当用户点击该按钮时，JavaScript 的 cal()?函数将被调用，执行相应的计算操作并将结果写入结果输入框中。

3.2? ? ? ??CSS相关知识

zero，.one，.two，.three?和?.four?都是 CSS 类选择器，分别用于设置不同的 HTML 元素的样式。

这些元素的样式属性包括：

position：控制元素定位方式；
top?和?left：设置元素距离父元素顶部和左边缘的距离；
height?和?width：设置元素的高度和宽度；
border：设置元素边框的宽度、样式和颜色；
background-color：设置元素背景颜色；
border-radius：设置元素圆角的半径；
box-shadow：设置元素阴影效果。

#one?是 CSS 的 ID 选择器，用于设置一个唯一的 HTML 元素的样式属性。这里使用?font-size?属性设置该元素的字体大小。

input[type="text"]?是 CSS 属性选择器，用于设置 HTML 的输入框元素的样式。该选择器设置输入框的宽度和鼠标悬浮样式。

p?是 HTML 的段落元素，这里使用 CSS 样式设置该元素的位置和背景颜色。

3.3? ? ? ? JavaScript相关知识

3.3.1? ? ? ? JavaScript整体

这是一个 JavaScript 函数，用于计算两个数的四则运算结果，并将计算结果写入 HTML 页面。

函数中的 `num1` 和 `num2` 分别表示两个输入框的值，即被计算的两个数。`parseInt()` 方法用于将字符串类型的输入框值转换为整数类型，以便进行数值计算。

`switch` 语句用于根据传入的参数 `type` 来选择执行加减乘除中的哪一种运算，然后将计算结果赋值给变量 `result`。

最后，使用 `document.getElementById()` 方法获取到页面中 ID 为 `resultId` 的元素，将 `result` 的值赋值给该元素的 `value` 属性，从而将计算结果显示在页面中。

3.3.2????????var num1 = document.getElementById('inputId1');

num2同理；

这行代码是在JavaScript中获取ID为`inputId1`的元素，并将其赋值给`num1`变量。具体来说，它使用了 `document.getElementById` 方法来获取指定ID的元素。这个方法接收一个字符串参数，即需要获取元素的ID，然后返回表示该元素的对象。

例如，在下面的HTML代码中，我们可以获取 ID 为 `inputId1` 的 `<input>` 元素：

<input type="text" id="inputId1">

然后，我们可以在JavaScript中使用以下代码将该元素赋值给 `num1` 变量：

var num1 = document.getElementById('inputId1');

这样，我们就可以通过 num1`变量来操作该元素，例如获取或设置其值、样式等等。

3.3.3?????????result = parseInt(num1.value) + parseInt(num2.value);

减，乘，除同理；

这行代码是在 JavaScript 中进行数值计算。具体来说，它将 num1.value`和 num2.value?这两个字符串类型的值转换为整数类型，然后将它们相加，并将结果赋值给 `result` 变量。

parseInt()是 JavaScript 中的函数，用于将字符串转换为整数类型。例如，parseInt('123')?的结果为 123。

num1.value和 num2.value?表示分别获取了 ID 为num1和 num2的 <input>元素的值。由于 HTML 中的 <input>?元素的值是字符串类型的，所以需要使用 parseInt()?方法将其转换为整数类型，才能进行数值计算。

3.3.4?????????var resultObj = document.getElementById('resultId');
? ? ?? resultObj.value = result;

resultObj.value = result是JavaScript中的一行代码，它的作用是将变量 result的值赋给 resultObj?元素的 value?属性。

具体来说，假设 resultObj`是一个HTML页面中的文本框元素，代码中的 resultObj.value?表示获取这个文本框的值，而 result?则是一个变量，它存储了一些计算结果或其他值。通过将 result的值赋给 resultObj.value，就可以将计算结果显示在文本框中。

例如，下面的代码片段在一个HTML页面中定义了一个文本框元素，然后通过JavaScript代码将计算结果显示在该文本框中：

<input type="text" id="resultObj">

<script>
// 计算结果
var a = 1 + 2;
var b = 3 * 4;
var result = "a = " + a + ", b = " + b;

// 将结果显示在文本框中
var resultObj = document.getElementById("resultObj");
resultObj.value = result;
</script>

在上面的例子中，首先通过JavaScript计算了 `a` 和 `b` 的值，然后将它们与一些文本拼接起来形成了 `result` 变量。最后，通过 `resultObj.value = result` 代码将 `result` 的值赋给文本框元素的 `value` 属性，从而将计算结果显示在了该文本框中。

文章来源:https://blog.csdn.net/qq_64867440/article/details/134833227
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！