js制作的简易购物车

最新推荐文章于 2024-09-28 23:02:25 发布

CurtainMy

最新推荐文章于 2024-09-28 23:02:25 发布

阅读量1.2w

点赞数 13

分类专栏： web 开发笔记文章标签： js购物车

本文链接：https://blog.csdn.net/qq_27462223/article/details/77239571

版权

开发笔记同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

web

9 篇文章 0 订阅

订阅专栏

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