页面计算价格例子
2010-10-13 10:24
183 查看
(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].onkeyup=totalValue;
tfields[i].onclick=function(){this.select();}
}
}
window.onload=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>
这几天开始整理以前写过的所有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].onkeyup=totalValue;
tfields[i].onclick=function(){this.select();}
}
}
window.onload=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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- h5 购物车动态加载页面及动态计算价格js
- 购物车(进入页面动画,购物车价格计算,增减,删除)
- [小例子]计算商品价格
- Angularjs购物车计算价格例子
- 不用jquery等框架/库，查找一个页面上有多少种标签，并计算每种标签的个数
- 计算ScrollView的当前页面
- 从分形图片用Box counting方法计算分形维数的一个例子
- structs2 页面取值分条件的计算
- 用js计算页面执行时间的函数
- Oracle 购买价格 和 服务费 计算方式
- 编写一个程序，实现设置上月、本月电表读数，显示上月、本月电表读数，计算并显示本月用电数。 假设每度电的价格为1.2元，计算并显示本月电费
- 编写一个程序，实现设置上月、本月电表读数，显示上月、本月电表读数，计算并显示本月用电数。 假设每度电的价格为1.2元，计算并显示本月电费
- jquery实现页面滑动例子
- Skyline软件二次开发初级——6如何在WEB页面中的三维地图上进行坐标和方向计算
- DLL+ ActiveX控件+WEB页面调用例子
- DLL+ ActiveX控件+WEB页面调用例子
- DLL+ ActiveX控件+WEB页面调用例子
- JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
- 编写JSP页面，计算2000~2016年中有几个闰年
- 价格弹性的计算()