html急急急!手写代码,实现如下效果:输入单价和数量后,点击“总价”按钮,即可计算出总价。

如题所述

新建一个记事本,把以下代码拷贝进去,保存成.html文件就可以运行了
代码如下:
<html>
<head><title>单价数量求和</title></head>
<body>
<table align="center" border="1" width="650">
<tr><td align="center" colspan="4"><b>订单</b></td></tr>
<tr>
<td align="center" width="50"><b>名称</b></td>
<td align="center" width="200"><b>单价</b></td>
<td align="center" width="200"><b>数量</b></td>
<td align="center" width="200">
<input type="button" value="总价" onclick="pay();" />
</td>
</tr>
<tr>
<td align="center">U盘</td>
<td align="center"><input id="objectPrice" type="text" width="195" /></td>
<td align="center"><input id="objectNum" type="text" width="195" /></td>
<td align="center"><input id="objectPay" type="text" width="195" readOnly="true" /></td>
</tr>
</table>
<script type="text/javascript">
function pay() {
var resultPrice = document.getElementById("objectPrice").value;
var resultNum = document.getElementById("objectNum").value;
if(resultPrice == "") {
alert("物品单价不能为空!");
document.getElementById("objectPay").value = "";
return false;
}
if(isNaN(resultPrice) || resultPrice < 0) {
alert("非法的商品单价!");
document.getElementById("objectPay").value = "";
return false;
}
if(resultNum == "") {
alert("物品数量不能为空!");
document.getElementById("objectPay").value = "";
return false;
}
if(!checkNum(resultNum)) {
alert("非法的商品数量!");
document.getElementById("objectPay").value = "";
return false;
}
var resultPay = parseFloat(resultPrice)*parseInt(resultNum);
document.getElementById("objectPay").value = resultPay;
}
function checkNum(num) {
var re = /^\d+$/;
return re.exec(num) != null;
}
</script>
</body>
</html>
温馨提示:答案为网友推荐,仅供参考
第1个回答  2013-09-23
<input name="price" id="price" type="text" />
<input name="num" id="num" type="text" />
<input name="submit" type="submit" value="总价" onclick="sum()" />
<input name="sum" id="sum" type="text" />
<script>
function sum(){
var aa = document.getElementById("price").value;
var bb = document.getElementById("num").value;
var cc = parseFloat(aa)*parseInt(bb);
document.getElementById("sum").value=cc;
}
</script>
第2个回答  2013-09-23
自己用表格布好局。
楼上的js代码已经可以完成你的需求。