简明现代魔法 -> JavaScript -> 简单的JavaScript金额计算

简单的JavaScript金额计算

2010-07-15

由于需求需要在前端计算用户需要支付的金额,这里简单记录一下。

获取 radio 的类别,然后根据注册的人数,计算总金额。

程序演示

会议出席代表:
姓名 邮件
1
2
3
4
5
我们是: 贵宾
VIP
普通
总金额: 美元:
人民币:

前端代码

<form action="db.php" method="post" onSubmit="return chkinput(this)">            
<table border="0" class="summit" align="center" width="495">
    	<th valign="top">会议出席代表:</th>
    	<td>

<table width="98%" border="0" align="center">
  	<tr>
  		<td width="5%"></td>
    	<!-- <td align="center" width="25%">职位 Title</td> -->
    	<td align="center" width="40%">姓名</td>
    	<td align="center" width="55%">邮件</td>
  	</tr>
  	<tr>
  		<td align="right" style="padding:3px 0 2px 0;">1</td>
    	<!-- <td align="center"><input type="text" name="title1" size="20" maxlength="40" value="" /></td> -->
    	<td align="center"><input id="n1" type="text" name="name1" size="15" maxlength="40" value="" /></td>
    	<td align="center"><input id="e1" type="text" name="email1" size="25" maxlength="40" value="" /></td>
  	</tr>
  	<tr>
    	<td align="right" style="padding:3px 0 2px 0;">2</td>
    	<!-- <td align="center"><input type="text" name="title2" size="20" maxlength="40" value="" /></td> -->
    	<td align="center"><input id="n2" type="text" name="name2" size="15" maxlength="40" value="" /></td>
    	<td align="center"><input id="e2" type="text" name="email2" size="25" maxlength="40" value="" /></td>
  	</tr>
  	<tr>
    	<td align="right" style="padding:3px 0 2px 0;">3</td>
    	<!-- <td align="center"><input type="text" name="title3" size="20" maxlength="40" value="" /></td> -->
    	<td align="center"><input id="n3" type="text" name="name3" size="15" maxlength="40" value="" /></td>
    	<td align="center"><input id="e3" type="text" name="email3" size="25" maxlength="40" value="" /></td>
  	</tr>
  	<tr>
    	<td align="right" style="padding:3px 0 2px 0;">4</td>
    	<!-- <td align="center"><input type="text" name="title4" size="20" maxlength="40" value="" /></td> -->
    	<td align="center"><input id="n4" type="text" name="name4" size="15" maxlength="40" value="" /></td>
    	<td align="center"><input id="e4" type="text" name="email4" size="25" maxlength="40" value="" /></td>
  	</tr>
  	<tr>
    	<td align="right" style="padding:3px 0 2px 0;"> 5</td>
    	<!-- <td align="center"><input type="text" name="title5" size="20" maxlength="40" value="" /></td> -->
    	<td align="center"><input id="n5" type="text" name="name5" size="15" maxlength="40" value="" /></td>
    	<td align="center"><input id="e5" type="text" name="email5" size="25" maxlength="40" value="" /></td>
  	</tr>
</table>

        </td>
    </tr>
    <tr>
    	<th> </th>
    	<td></td>
    </tr>
    <tr>
    	<th valign="top">我们是:</th>
    	<td><input type="radio" name="identity[]" id="i1" value="11" onclick="change()" /> 贵宾</td>
    </tr>
    <tr>
    	<th> </th>
    	<td><input type="radio" name="identity[]" id="i2" value="22" onclick="change()" /> VIP</td>
    </tr>
    <tr>
    	<th> </th>
    	<td><input type="radio" name="identity[]" id="i3" value="33" onclick="change()" /> 普通</td>
    </tr>
    <tr>
    	<th> </th>
    	<td></td>
    </tr>
    <tr>
    	<th valign="top">总金额:<input type="button" onclick="change()" value="刷新结果" /></th>
    	<td>美元:<span id="USD"></span><br />    	  人民币:<span id="RMB"></span></td>
    </tr>
    <tr>
    	<th> </th>
    	<td></td>
    </tr>

  	<tr>
  	  	<td colspan="2" align="center">
        </td>
	</tr>
    <tr>
    	<td colspan="2" align="center"> </td>
  	</tr>
    <tr>
    	<th> </th>
    	<td><input type="submit" name="ga" value="提交" /></td>
    </tr>
</table>
</form>

JavaScript 代码

<script language="javascript">
var usd = document.getElementById("USD"); 
var rmb = document.getElementById("RMB"); 

var i1 = document.getElementById("i1"); 
var i2 = document.getElementById("i2"); 
var i3 = document.getElementById("i3"); 

function change()  
{  	
	var num = checkNumber();
	
    if(i1.checked == true)
	{
		usd.innerHTML = 75 * num; 
		rmb.innerHTML = 500 * num; 
	}
	else if(i2.checked == true)
	{
		usd.innerHTML = 105 * num; 
		rmb.innerHTML = 700 * num; 
	}
	else if(i3.checked == true)
	{
		usd.innerHTML = 200 * num; 
		rmb.innerHTML = 1350 * num; 
	}
} 

var n1 = document.getElementById("n1"); 
var n2 = document.getElementById("n2"); 
var n3 = document.getElementById("n3"); 
var n4 = document.getElementById("n4"); 
var n5 = document.getElementById("n5"); 

var e1 = document.getElementById("e1"); 
var e2 = document.getElementById("e2"); 
var e3 = document.getElementById("e3"); 
var e4 = document.getElementById("e4"); 
var e5 = document.getElementById("e5"); 


function checkNumber()
{
	if(n1.value != "" && e1.value != "" && n2.value == "" && e2.value == "" && n3.value == "" && e3.value == "" && n4.value == "" && e4.value == "" && n5.value == "" && e5.value == "" )
	{
		return 2;
	}
	if(n1.value != "" && e1.value != "" && n2.value != "" && e2.value != "" && n3.value == "" && e3.value == "" && n4.value == "" && e4.value == "" && n5.value == "" && e5.value == "")
	{
		return 3;
	}
	if(n1.value != "" && e1.value != "" && n2.value != "" && e2.value != "" && n3.value != "" && e3.value != "" && n4.value == "" && e4.value == "" && n5.value == "" && e5.value == "")
	{
		return 4;
	}
	if(n1.value != "" && e1.value != "" && n2.value != "" && e2.value != "" && n3.value != "" && e3.value != "" && n4.value != "" && e4.value != "" && n5.value == "" && e5.value == "")
	{
		return 5;
	}
	if(n1.value != "" && e1.value != "" && n2.value != "" && e2.value != "" && n3.value != "" && e3.value != "" && n4.value != "" && e4.value != "" && n5.value != "" && e5.value != "")
	{
		return 6;
	}
	else
		return 1;
		
}
</script>
随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们