简易购物车
css部分
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 900px;
margin: 30px auto;
}
table {
border-collapse: collapse;
width: 900px;
/*background: #eee;*/
margin: 30px auto;
font-size: 12px;
}
table tr {
border: 1px solid #ddd;
}
table tr:first-child{
font-weight:bold;
}
table td {
padding: 10px 0;
}
table img {
vertical-align: text-top;
width: 80px;
}
table .name {
margin-left: 10px;
}
table tr td:first-child {
text-align: center;
}
table a {
text-decoration: none;
display: inline-block;
width: 15px;
height: 17px;
color: #444;
text-align: center;
border: 1px solid #e5e5e5;
background: #f0f0f0;
}
table .num {
width: 39px;
height: 17px;
border: 1px solid #bbb;
text-align: center;
}
.total {
position: fixed;
width: 900px;
height: 60px;
bottom: 0;
background: #eee;
font-size: 14px;
left: 50%;
transform: translateX(-50%);
}
.total div {
display: inline-block;
line-height: 60px;
height: 60px;
}
.total div:first-child {
width: 70px;
text-align: center;
}
.total div:nth-child(2) {
width: 500px;
text-align: right;
}
.total div:nth-child(3) {
width: 196px;
text-align: center;
}
.total div .btn {
width: 120px;
height: 60px;
background: #bbb;
color: #fff;
border: none;
}
.total span, .money {
color: red;
font-weight: bold;
}
.price {
font-weight: bold;
}
</style>
HTML
<div class="box">
<h3>我的购物车</h3>
<table id="cart">
<tr>
<td width="70px"><input type="checkbox" class="allSelect"> 全选</td>
<td width="520px">商品信息</td>
<td>单价</td>
<td>数量</td>
<td>金额</td>
</tr>
</table>
</div>
<div class="total">
<div><input type="checkbox" class="allSelect"> 全选</td></div>
<div>已选商品<span id="items-num">0</span>件</div>
<div>合计(不含运费): <span id="price-sum">¥0.00</span></div>
<div><input type="button" id="calc" class="btn" value="结算"></div>
</div>
js部分
<script type="text/javascript">
var arr = [
{
name: "八度北欧台灯简约现代led卧室床头灯创意个性书房",
price: 118,
image: "image/deng2.jpg",
num: 1
},
{
name: "欧普 LED台灯护眼台灯学生书桌卧室床头灯学习阅读",
price: 399,
image: "image/deng3.jpg",
num: 1
},
{
name: "美的可充电式led小台灯护眼书桌大学生宿舍家用卧室",
price: 233,
image: "image/deng4.jpg",
num: 1
},
{
name: "欧式全铜台灯家用卧室床头灯简约客厅书房灯婚庆温暖",
price: 399,
image: "image/deng5.jpg",
num: 1
},
{
name: "飞利浦led台灯 儿童学习护眼灯寝室书桌大学生宿舍卧",
price: 123,
image: "image/deng6.jpg",
num: 1
}
];
//创建table;
var table=document.getElementById('cart');
//复选框
var singleCxs=document.getElementsByClassName('singleCx');
//每行的总价钱数
var moneys=document.getElementsByClassName('money');
//结算总价
var priceSum=document.getElementById('price-sum');
var nums=document.getElementsByClassName('num');
var itemNum=document.getElementById('items-num');
//全选按钮
var allSelect=document.getElementsByClassName('allSelect');
//创建内容
function createrows() {
for(var i=0;i<arr.length;i++){
var tr=table.insertRow();//创建一行
for(var j=1;j<=5;j++){//5个td
var td=tr.insertCell();
if(j===1){
var singleCx=document.createElement('input');
singleCx.type='checkbox';
singleCx.className='singleCx';
td.appendChild(singleCx);
}else if(j===2){
var img=document.createElement('img');
img.src=arr[i].image;
td.appendChild(img);
var osp=document.createElement('span');
osp.className='name';
osp.innerHTML=arr[i].name;
td.appendChild(osp);
}else if(j===3){
var money=document.createElement('span');
money.className='price';
money.innerHTML='¥'+arr[i].price;
td.appendChild(money);
}else if(j===4){
var ominus=document.createElement('a');
ominus.href='#';
ominus.innerHTML='-';
ominus.onclick=function(e){
minus(this);
e.preventDefault();
}
var onum=document.createElement('input');
onum.type='text';
onum.className='num';
onum.value=arr[i].num;
onum.oninput=function(){
updateMoney(this);
}
var oplus=document.createElement('a');
oplus.href='#';
oplus.innerHTML='+';
oplus.onclick=function(e){
plus(this);
e.preventDefault();
}
td.appendChild(ominus);
td.appendChild(onum);
td.appendChild(oplus);
}else if(j===5){
var omoney=document.createElement('span');
omoney.className='money';
omoney.innerHTML='¥'+arr[i].price*arr[i].num;
td.appendChild(omoney);
}
}
}
}
//点击加号时触发事件
function plus(obj){
//加号的上一个兄弟节点
var onum=obj.previousSibling;
onum.value=parseInt(onum.value)+1;//每次点击时input框的值加一再赋值给onum;
//获取单价 取当前节点的父级的上一个节点的第一个子节点的innerHTML(去掉人名币符号)
var price=parseFloat(onum.parentNode.previousSibling.children[0].innerHTML.substring(1));
//计算总价 当前对象的父级的下一个兄弟节点的子节点的innetHTML的 单价*数量
onum.parentNode.nextSibling.children[0].innerHTML='¥'+price*onum.value;
calc();//计算总价
}
//点击减号时触发事件
function minus(obj){
//加号的下一个兄弟节点
var onum=obj.nextSibling;
if(onum.value>1){
onum.value=parseInt(onum.value)-1;
}
var price=parseFloat(onum.parentNode.previousSibling.children[0].innerHTML.substring(1));
onum.parentNode.nextSibling.children[0].innerHTML='¥'+price*onum.value;
calc();//计算总价
}
//输入框
function updateMoney(obj){
var onum=obj.value;
//输入框里只能是数字,去掉输入的空格之后不能是空
if(!isNaN(onum) && onum.trim()!=''){
if(onum>=1){//大于等于1 (至少为一件)
onum=parseInt(onum);
var price=parseFloat(obj.parentNode.previousSibling.children[0].innerHTML.substring(1));
obj.parentNode.nextSibling.children[0].innerHTML='¥'+onum*price;
calc();//计算总价
}
}
}
//计算总价 复选框沟中之后才计算总和。 还有总件数
function calc(){
var sum=0;//总价
var n=0;//数量
for(var i=0;i<singleCxs.length;i++){
if(singleCxs[i].checked){//计算总价和总数量的前提是, 每条记录的复选框被沟中
sum+=parseFloat(moneys[i].innerHTML.substring(1));
n+=parseInt(nums[i].value)
}
}
priceSum.innerHTML='¥'+sum;
itemNum.innerHTML=n;
}
allSelect[0].onclick=function(){
allSelect[1].checked=this.checked;
updateSinglecxs(this.checked);
calc();//计算总价
}
allSelect[1].onclick=function(){
allSelect[0].checked=this.checked;
updateSinglecxs(this.checked);
calc();//计算总价
}
//点击全选按钮的时候 每行复选框做的事
function updateSinglecxs(status){
for(var i=0;i<singleCxs.length;i++){
singleCxs[i].checked=status;//把全选按钮的状态给每行的复选框
}
}
createrows();
//给每个行的复选框添加点击事件 每次点击都计算总价钱
for(var i=0;i<singleCxs.length;i++){
singleCxs[i].onclick=function(){
//判断每个checkbox的状态
for(var j=0;j<singleCxs.length;j++){
if(!singleCxs[j].checked){//只要有一个不选中则跳出循环
break;
}
}
if(j===singleCxs.length){ //j的值和总长度相等 则说明都是选中状态
allSelect[0].checked=true;
allSelect[1].checked=true;
}else{
allSelect[0].checked=false;
allSelect[1].checked=false;
}
calc();//计算总价
}
}
</script>
运行结果
每条记录的格式
心得:
把整体拆分成一部分一部分的功能。一步一步的来实现。