本文介绍了一个使用JavaScript实现的网页动态计价功能。通过监听输入框的键盘事件(onkeyup)来实时更新商品数量和总价，并展示了一种简单的方法来选中(input)中的文本(.select())。此示例涉及表格数据读取、数值运算及DOM操作。
(10/10/13)
这几天开始整理以前写过的所有doc，并且将这个安排一直继续下去，一天一个小知识的总结，慢慢积累~
下面是帮一个百度Hi的朋友写到页面计算价格，主要用到textfield的 onkeyup，了解到 .select()
在线演示地址：
http://zjq123.com/demo/countval.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ANSI" />
<title>动态计算容量</title>
<style type="text/css">
span {margin:50px 15px; width:50px; background:#fff;}
#out_put{
width:220px;
height:20;
}
</style>
<script language="javascript" type="text/javascript">
//计算总价格
function totalValue()
{
var total_num = 0;
var total_prices =0;
var table1 = document.getElementById("table1");
for(var i = 1 ;i<table1.rows.length-1;i++){//去除首尾2行
var r = table1.rows[i];
var price = r.children[1].innerHTML;
var num = r.children[2].children[0].getElementsByTagName("input")[0].value;
total_num+=parseFloat(num);
total_prices+=price*parseFloat(num);
document.getElementById("out_put").setAttribute("value","你共选择"+total_num+"张，共计"+total_prices+"元");
}
};
function auto(){
var tfields = document.getElementsByName("textfield");
for(var i =0;i<tfields.length;i++){
tfields[i].οnkeyup=totalValue;
tfields[i].οnclick=function(){this.select();}
}
}
window.οnlοad=totalValue;
</script>
</head>
<body onLoad="auto();">
<table width="411" border="1" id="table1">
<tr>
<td width="168">名称</td>
<td width="28">价格</td>
<td width="193">张数</td>
</tr>
<tr>
<td>A</td>
<td id="price_A">30</td>
<td>
<form name="form1" method="post" action="">
<label>
<input name="textfield" type="text" id="num_A" value="0" />
</label>
</form>
</td>
</tr>
<tr>
<td>B</td>
<td id="price_B">50.5</td>
<td><form name="form1" method="post" action="">
<label>
<input name="textfield" type="text" id="num_B" value="0">
</label>
</form></td>
</tr>
<tr>
<td>C</td>
<td id="price_C">12</td>
<td><form name="form1" method="post" action="">
<label>
<input name="textfield" type="text" id="num_C" value="0">
</label>
</form></td>
</tr>
<tr>
<td><form name="form2" method="post" action="">
<label onClick="totalValue()">
<input value="计算总价">
</label>
</form> </td>
<td colspan="2"><form name="form1" method="post" action="">
<input name="textfield42" type="text" id="out_put" value="你共选择0张，共计0元">
</form> </td>
</tr>
</table>
</body>
</html>
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
