如果用js 来进行价格计算

<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 把金额给算出来？

9 个解决方案

#1

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

#2

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

#3

<!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>

#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">
<head>
<meta http-……

确实是这样的我还想问一下就是单价如果我把默认的￥3,000.00 去掉然后直接输入2000 如何才能自动的返回￥2,000.00

#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/xhtml">
<hea……

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

#6

引用 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/……

恩谢谢了

#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">
<head>
<meta http-……

出现了BUG...就是单价输入50~100之间数量还是2个出现了BUG 不知道怎么回事

#8

引用 1 楼的回复:

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

不是固定单价与数量都可以修改

#9

引用 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……

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

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

#1

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

#2

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

#3

<!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>

#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">
<head>
<meta http-……

确实是这样的我还想问一下就是单价如果我把默认的￥3,000.00 去掉然后直接输入2000 如何才能自动的返回￥2,000.00

#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/xhtml">
<hea……

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

#6

引用 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/……

恩谢谢了

#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">
<head>
<meta http-……

出现了BUG...就是单价输入50~100之间数量还是2个出现了BUG 不知道怎么回事

#8

引用 1 楼的回复:

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

不是固定单价与数量都可以修改

#9

引用 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……

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

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

秒客网

如果用js 来进行价格计算

9 个解决方案

#1

#2

#3

#4

#5

#6

#7

#8

#9

#1

#2

#3

#4

#5

#6

#7

#8

#9

相关文章