问题描述:
要求输入商品单价和商品数量,得到总计,总计结果不允许人为修改
技术分析:
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>
效果展示: