如果用js 来进行价格计算

yuanaiping554368519 2012-04-24 11:36:30



<table width="100%" cellpadding="0" cellspacing="0" bgcolor="#c1ebff">

  <tr style="background-color:#D1EEEE;">

<td width="25%">商品</td>

<td width="8%">单价</td>

  <td width="1%"></td>

<td width="5%">数量</td>

  <td width="1%"></td>

<td width="8%">金额</td>

<td width="8%">基本操作</td>

  </tr>

  <tr>

  <td>诺基亚</td>

  <td><input type="text" name="price" id="price" value="￥3,000.00" /></td>

  <td>×</td>

<td><input type="text" name="quantity" id="quantity" value="2"/></td>

  <td>=</td>

<td><span id="bb1" style="color: #FFB90F;font-weight: bold;">￥6,000.00</span></td>

  </tr>

</table>

如何通过js 把 金额给算出来？

...全文

473 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

yuanaiping554368519 2012-04-24

打赏
举报

[Quote=引用 3 楼的回复:]
HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-……
[/Quote]
确实是这样的我还想问一下就是单价如果我把默认的￥3,000.00 去掉然后直接输入2000 如何才能自动的返回￥2,000.00

乌镇程序员 2012-04-24

打赏
举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>



<body>

<table width="100%" cellpadding="0" cellspacing="0" bgcolor="#c1ebff">

  <tr style="background-color:#D1EEEE;">

    <td width="25%">商品</td>

    <td width="8%">单价</td>

    <td width="1%"></td>

    <td width="5%">数量</td>

    <td width="1%"></td>

    <td width="8%">金额</td>

    <td width="8%">基本操作</td>

  </tr>

  <tr>

    <td>诺基亚</td>

    <td><input type="text" name="price" id="price" value="￥3,000.00" /></td>

    <td>×</td>

    <td><input type="text" name="quantity" id="quantity" value="2"/></td>

    <td>=</td>

    <td><span id="bb1" style="color: #FFB90F;font-weight: bold;">￥6,000.00</span></td>

  </tr>

</table>



<script type="text/javascript">

//计算函数

function countAmount() {

	var price = document.getElementById('price').value;

	var quantity = document.getElementById('quantity').value;

	

	//单价处理

	price = price.replace(/[￥,]/g, '');

	

	var amount = (price * quantity).toFixed(2);

	

	//格式处理，添加千分位逗号

	var ar = amount.toString().split('.');

	var amount = [];

	ar_tmp = ar[0].split('');

	ar_tmp.reverse();

	for(var i = 0; i < ar_tmp.length; i ++) {

		(i + 1) % 3 == 0 ? amount.push(',' + ar_tmp[i]) : amount.push(ar_tmp[i]);

	}

	amount = '￥' + amount.reverse().join('') + '.' + ar[1];

	

	document.getElementById('bb1').innerHTML = amount;

}



document.getElementById('price').onchange = countAmount;

document.getElementById('quantity').onchange = countAmount;

</script>

</body>

</html>

似梦飞花 2012-04-24

打赏
举报

获取那两个text的值后把两个值想乘innerHTML到span里不很明白你的意思

三石-gary 2012-04-24

打赏
举报

你上面都是些具体值。。2个文本框都是固定？

乌镇程序员 2012-04-24

打赏
举报

[Quote=引用 7 楼的回复:]

引用 3 楼的回复:
HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<hea……
[/Quote]

恩，是的，没有考虑到数值整数部分的位数为3的倍数的情况，修改一行代码即可：

(i + 1) % 3 == 0 && i < ar_tmp.length - 1 ? amount.push(',' + ar_tmp[i]) : amount.push(ar_tmp[i]);

yuanaiping554368519 2012-04-24

打赏
举报

[Quote=引用 1 楼的回复:]
你上面都是些具体值。。2个文本框都是固定？
[/Quote]
不是固定单价与数量都可以修改

yuanaiping554368519 2012-04-24

打赏
举报

[Quote=引用 3 楼的回复:]
HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-……
[/Quote]
出现了BUG...就是单价输入50~100之间数量还是2个出现了BUG 不知道怎么回事

yuanaiping554368519 2012-04-24

打赏
举报

[Quote=引用 5 楼的回复:]
引用 4 楼的回复:

引用 3 楼的回复:
HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/……
[/Quote]
恩谢谢了

乌镇程序员 2012-04-24

打赏
举报

[Quote=引用 4 楼的回复:]

引用 3 楼的回复:
HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<hea……
[/Quote]

请参考countAmount()函数中格式处理部分代码。