HCI第三篇：表单应用：按钮之购物车

最新推荐文章于 2022-09-29 16:27:17 发布

bkLion

最新推荐文章于 2022-09-29 16:27:17 发布

阅读量502

点赞数 4

分类专栏：前端文章标签：表单

本文链接：https://blog.csdn.net/H_W_1212/article/details/89437229

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

在学习表单的相关知识后，尝试做了一个页面，话不多说，直接看结果：
在这里插入图片描述
结果比较简陋，大家下来有空可以进行美化。这里我提供一下源码：
1.index.html页面

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>购物数量统计</title>
<meta http-equiv="Refresh" content="60">
<meta name="keywords" content="愉快购物，女士服装" />
<meta name="Description" content="网上最大的女士服装销售商，产品物美价廉，让你买的开心，用得放心，欢迎再次光临女士服装专卖店。" /> 
<link rel="stylesheet" href="css/public.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="overall">
	<div>
		你已购买的商品：女士衣服
	</div>
	<div>
		单价:<span id="price">110.00</span>
	</div>
	<div>
		数量为:
	<input type="button" value="-" id="dec" class="minus">
	<input type="text" value="1" id="numInput" class="inputs">
	<input type="button" value="+" id="add" class="plus">
	(库存<span id="inventory">9</span> 件)
	</div>
	<div>
		总价为:<span id="total">110.00</span>
	</div>
</div>	
<div class="clears"></div>
<script src="javascript/web.js"></script>
</body>
</html>

2.public.css页面（公用样式）

/* CSS Document */
*{
	margin: 0;
	padding: 0;
}
.clears{
	clear: both;
	line-height: 0;
	overflow: hidden;
	font-size: 0;
} 
ul,li,ol{
	list-style: none;
}
a{
	text-decoration: none;
}
body{
	font-family: Arial,Verdana,"Microsoft Yahei","Simsun";
}
img{
	border: none;
}

3.style.css页面

/* CSS Document */
.plus,.minus{
	width: 30px;
	color: black;
	border-color: #EEEEEE;
	font-size: 17px;
}
.overall{
	border: 3px solid #eee;
	margin-top: 150px;
	width: 360px;
	height: 250px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 10px;
	line-height: 50px;
	text-align: center;
	letter-spacing: 3px;
}
.inputs{
	width: 50px;
	text-align: center;
	font-size: 17px;
}

4.web.js页面

//JavaScript Document
var price = document.getElementById("price");
var dec = document.getElementById("dec");
var add = document.getElementById("add");
var numInput = document.getElementById("numInput");
var inventory = document.getElementById("inventory");
var total = document.getElementById("total");
dec.onclick = function(){
	var num = Number(numInput.value);
	if( isNaN(num) ){
		num = 1;
	}else if(num<=1){
		num = 1;	 
	}else if(num>10){
		num = 10;
	}else{
		num =num - 1;
	}
	numInput.value = num;
	if(Number(inventory.innerHTML)<=8){
		inventory.innerHTML=Number(inventory.innerHTML)+ 1;
	}
	total.innerHTML=Number(price.innerHTML) * Number(numInput.value)+".00";
} 
add.onclick = function(){
	var num = Number(numInput.value);
	if( isNaN(num) ){
		num = 1;
	}else if(num>=10){
		num = 10;
	}else{
		num =num + 1;
	}
	numInput.value = num;
	if(Number(inventory.innerHTML)>0){
    	inventory.innerHTML=(Number(inventory.innerHTML)- 1);
	}
	total.innerHTML=Number(price.innerHTML) * Number(numInput.value)+".00";
}