网站地图    收藏   

子栏目

主页 > 前端 > javascript >

JS实现购物车基本功能

来源：自学PHP网    时间：2020-11-09 10:02 作者：小飞侠 阅读:次

[导读] JS实现购物车基本功能...

今天带来JS实现购物车基本功能教程详解

JS实现购物车商品 加、减、单选、全选、删除、手动输入、价格更新等功能在这里插入图片描述

JavaScript代码

$(function(){
 
 $("#footer").hover(function(){
  $("#footer").css({"border":"#e00"})
 },)
 
 var inputs=document.getElementsByName("good-id");
 var all=document.getElementsByName("all")[0];
 
 all.onclick=function(){
 for(var i=0;i1){
  counts.value=--count;
  }
  sumprice();
 }
 }
 //增加
 var plus=document.getElementsByName("plus");
 for(var i=0;i

CSS代码

@charset "utf-8";

#main{
  padding: 30px 0px;
}

#cart{
  background: #FFFFFF;
  padding: 40px;
}

#cart h1{
  line-height: 40px;
  padding: 0px 0px 10px 0px;
}

table.form{
  border-collapse: collapse;
  empty-cells: show;
  margin: 20px 0px;
  padding: 0px;
  table-layout: fixed;
  width: 100%;
}

table.form th,
table.form td{
  border-bottom: 1px solid #DDDDDD;
  padding: 15px 10px;
  text-align: left;
}

table.form{
  border-top: 3px solid #DDDDDD;
}

.goods .goods-image img{
  border: 1px solid #DDDDDD;
  float: left;
  height: 100px;
  margin: 0px 20px 0px 0px;
}

.goods .goods-information{
  float: left;
}

.goods .goods-information ul{
  color: #666666;
  font-size: 12px;
  line-height: 20px;
  margin:10px 0px 0px 0px;
}

.price,
.amount,
#total-amount{
  color: #E00000;
}

#total-amount{
  font-size: 22px;
}

.price em,
.amount em,
#total-amount em{
  font-style: normal;
}

.combo .combo-minus,
.combo .combo-value,
.combo .combo-plus{
  background: #FFFFFF;
  border: 1px solid #DDDDDD;
  color: #333333;
  float: left;
  font-weight: bold;
  margin: 0px;
  outline: none;
  text-align: center;
}

.combo .combo-minus,
.combo .combo-plus{
  font-size: 16px;
  height: 26px;
  line-height: 26px;
  padding: 0px;
  width: 24px;
}

.combo .combo-value{
  border-left: none;
  border-right: none;
  height: 20px;
  line-height: 20px;
  padding: 2px;
  width: 40px;
}

#cart-delete{
  margin-left: 20px;
}

#settlement{
  background: #E00000;
  border: none;
  color: #FFFFFF;
  float: right;
  font-size: 16px;
  height: 40px;
  line-height: 40px;
  margin: 0px;
  outline: none;
  padding: 0px;
  width: 160px;
}

HTML代码



 
 
 商城

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论