要求实现的功能:
在网页中显示一个表格,第一行为:序号,物品名称,单价,数量,小计,下面的每一行为商品的数据.
点击加号按钮和减号按钮可以实现数量的加减,最低减到1,右边小计可以实现单价*数量的计算并显示
结果图:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车</title>
<style type="text/css">
.cart-css{
/*外层div的样式*/
width:500px;
height:300px;
margin: 100px auto;
background: #ff7a39;
}
table{
/*购物车的table表格显示样式*/
width: 100%;
}
.text-css{
/*数量输入框样式*/
width: 25px;
}
</style>
</head>
<body>
<div class="cart-css">
<table>
<tr>
<!--tr标签表示创建一行,td标签表示加一个数据-->
<td>序号</td>
<td>物品名称</td>
<td>单价</td>
<td>数量</td>
<td>小计</td>
</tr>
<tr>
<td>1</td>
<td>iphone</td>
<td>6999</td>
<td>
<input type="button" id="jian" value="-" onclick="count(this)">
<input class="text-css" type="text" id="txt_count" value="1" readonly>
<input type="button" id="jia" value="+" onclick="count(this)">
</td>
<td >
<div id="account"></div>
</td>
</tr>
</table>
<script type="text/javascript">
var xiaoji=document.querySelector("#account");
xiaoji.innerText=6999;
//上面两行是用来初始化小计的值
//定义一个方法来实现加减按钮的功能 要求:加可以无限加,减,不能减到0以下
function count(th) {
var opt=th.value;//获取到当前点击的按钮
var num=document.querySelector('#txt_count').value;//找到数量框
var acount=0;
var xiaoji=document.querySelector("#account");//获取到小计那一列的输入框
var jia=document.querySelector("#jia");//获取到加号按钮
var jian=document.querySelector("#jian");//获取到减号按钮
if (opt=='+'){
num++;
jian.removeAttribute('disabled');//去除属性disabled
} else {
if (num>1){
num--;
} else {
jian.setAttribute('disabled',true);//设置属性disabled,不能用
}
}
document.querySelector('#txt_count').value=num;
acount=num*6999;
xiaoji.innerText=acount;//设置文本为acount
}
</script>
</div>
</body>
</html>