JavaScrip练习（一）——计算商品总价

最新推荐文章于 2023-03-11 14:29:10 发布

子木_Lee

最新推荐文章于 2023-03-11 14:29:10 发布

阅读量4.1k

点赞数 3

分类专栏： JavaScript 文章标签：计算商品总价 JavaScript

本文链接：https://blog.csdn.net/qq_41819988/article/details/90906492

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

问题描述：

要求输入商品单价和商品数量，得到总计，总计结果不允许人为修改

技术分析：

readonly：不允许修改文本框中的数据

oninput：当输入框中的内容变化时，触发指定函数

步骤分析：

1，确定事件：输入框内容改变 oninput

2，事件要触发的函数 result()

3，result函数里执行任务

1，获取单价和数量

2，计算总价

3，修改总价框中的内容

代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jiojio</title>
		<script>
			function result(){
				var text1 = document.getElementById("text1");
				var text2 = document.getElementById("text2");
				var text3 = document.getElementById("text3");
				var uValue1 = parseFloat(text1.value);
				var uValue2 = parseFloat(text2.value);
				text3.value = uValue1*uValue2;
			}
		</script>
	</head>
	<body>
		<div style="border: 5px solid gray; height: 500px;background-color: brown;">
			
			<div style="position:absolute;left: 250px ; top: 150px;height: 50%;width: 50%;border: 5px solid red;background-color: wheat;">
				<table width="90%" align="center">
					<tr>
						<td colspan="2"><font size="5">计算页面</font></td>
					</tr>
					<tr>
						<td>商品单价：</td>
						<td>
							<input type="text" id="text1" value="0" oninput="result()"style="width: 300px; height: 30px;"/>
						</td>
					</tr>
					<tr>
						<td>商品个数：</td>
						<td>
							<input type="text" id="text2" value="0" oninput="result()"style="width: 300px; height: 30px;"/>
						</td>
					</tr>
					<tr>
						<td>总计：</td>
						<td>
							<input type="text" id="text3" value="0" style="width: 300px; height: 30px;"readonly/>
						</td>
					</tr>
					<!--<tr>
						<td></td>
						<td>
							<input type="button" value="计算" onclick="sum()" />
						</td>
					</tr>-->
				</table>
			</div>
			
		</div>
	</body>
</html>

效果展示：

子木_Lee

关注

3
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
JavaScrip练习（一）——计算商品总价

问题描述：要求输入商品单价和商品数量，得到总计，总计结果不允许人为修改技术分析：readonly：不允许修改文本框中的数据oninput：当输入框中的内容变化时，触发指定函数步骤分析：1，确定事件：输入框内容改变 oninput2，事件要触发的函数 result()3，result函数里执行任务 1，获取单价和数量 2，...
复制链接

扫一扫