您的位置:首页 > Web前端 > JavaScript

js制作的简易购物车

2017-08-16 12:18 513 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>简易购物车</title>
<script type="text/javascript">
function cal(){
var num= parseInt(document.myform.num.value);
var price=parseFloat(document.myform.price.value);
var cost=parseFloat(document.myform.cost.value);
var amount=num*price+cost;
document.myform.amount.value=amount;
}

</script>

</head>
<body>
<form action="" name="myform" method="post">

<table width="533" height="133" border="1" bgcolor="antiquewhite" align="center">
<tr align="center">
<td colspan="5"><h2>简易购物车<h2/></td>
</tr>
<tr align="center">
<td>商品名称</td>
<td >数量(件)</td>
<td>单价(美元)</td>
<td>运费(美元)</td>
<td><input type="button"value=" 合计 "onClick="cal()"></td>
</tr>
<tr>
<td>跑跑道具</td>
<td><input type="text" name="num"size="10"></td>
<td><input type="text" name="price"size="10"></td>
<td><input type="text"name="cost"size="10"></td>
<td><input type="text" name="amount"size="10">美元</td>
</tr>
</table>
</form>

</body>
</html>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: