感谢您的支持，我会继续努力的!
打开微信扫一扫，即可进行扫码打赏哦
点我查看本站打赏源码！
Powered by RUNCODEX.COM，学的不仅是技术，更是梦想！！！
<div class="container">
<div id="shopCart"></div>
</div>
<div class="container-two">
<ul>
<li date-id="1"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1504781816864&di=f91c89724c302cf62dca02e980c5a853&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2Fd52a2834349b033b618fddd112ce36d3d539bdb1.jpg" id="test"><p><span class="price">￥3499.00</span><span class="numb">已售0件</span></p><p class="title">炮姐</p><p class="btn"><span class="addToCart">加入购物车</span><span class="lightNumb">查看光度</span></p></li>
<li date-id="2"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1504781877370&di=f36e6cf1de5f7ac562052ed60dd5fa43&imgtype=0&src=http%3A%2F%2Fwww.jder.net%2Fwp-content%2Fuploads%2F2015%2F09%2F20150923023705-13.jpg"><p><span class="price">￥3499.00</span><span class="numb">已售0件</span></p><p class="title">小鞠</p><p class="btn"><span class="addToCart">加入购物车</span><span class="lightNumb">查看光度</span></p></li>
<li date-id="3"><img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3830761303,87187840&fm=27&gp=0.jpg"><p><span class="price">￥3499.00</span><span class="numb">已售0件</span></p><p class="title">一条萤</p><p class="btn"><span class="addToCart">加入购物车</span><span class="lightNumb">查看光度</span></p></li>
<li date-id="4"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1504782060038&di=134c868869577a17324aa462f9f4feb6&imgtype=0&src=http%3A%2F%2Fimg4.duitang.com%2Fuploads%2Fitem%2F201602%2F21%2F20160221180758_BcPWe.thumb.700_0.png"><p><span class="price">￥3499.00</span><span class="numb">已售0件</span></p><p class="title">莲华</p><p class="btn"><span class="addToCart">加入购物车</span><span class="lightNumb">查看光度</span></p></li>
<li date-id="5"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1504782178380&di=54809eae640516e6f6c29b202eae4379&imgtype=0&src=http%3A%2F%2Fimg.app178.com%2Fd%2Ffile%2F201508%2F2c67270c6c664d7fae8a95fd848da5d0.jpg"><p><span class="price">￥3499.00</span><span class="numb">已售0件</span></p><p class="title">助手</p><p class="btn"><span class="addToCart">加入购物车</span><span class="lightNumb">查看光度</span></p></li>
<li date-id="6"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1504782200529&di=e55ed08be208b9b80b4207f0eb68e89b&imgtype=0&src=http%3A%2F%2Fa3.topitme.com%2F1%2F1f%2F12%2F1128483280e17121f1l.jpg"><p><span class="price">￥3499.00</span><span class="numb">已售0件</span></p><p class="title">嘟嘟噜</p><p class="btn"><span class="addToCart">加入购物车</span><span class="lightNumb">查看光度</span></p></li>
<li date-id="7"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1504782270810&di=5e4c16b87e21165722efae35cc7bbb1e&imgtype=0&src=http%3A%2F%2Fa3.topitme.com%2Fe%2F5c%2Fb8%2F1156057094c5fb85ceo.jpg"><p><span class="price">￥3499.00</span><span class="numb">已售0件</span></p><p class="title">六花</p><p class="btn"><span class="addToCart">加入购物车</span><span class="lightNumb">查看光度</span></p></li>
<li date-id="8"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1504782314669&di=b61f67641fa80a88f611b0573ba136cb&imgtype=0&src=http%3A%2F%2Fp3.music.126.net%2Ftj37K6narX6_H5ymemK_cw%3D%3D%2F1386484169766616.jpg"><p><span class="price">￥3499.00</span><span class="numb">已售0件</span></p><p class="title">玉子</p><p class="btn"><span class="addToCart">加入购物车</span><span class="lightNumb">查看光度</span></p></li>
</ul>
xxxxxxxxxx
class Noobcart{
constructor(){
this.backet={}
}
subscribe(product,fn){
if(this.backet[product]){
this.backet[product].numb++;
}else{
this.backet[product] = this.backet.product | {};
this.backet[product] = fn;
console.log(this.backet);
this.html();
analysis(node){
let product = {};
const father = node.parentNode.parentNode;
const id = father.getAttribute('date-id');
const title = father.querySelector('.title').innerHTML;
const price = father.querySelector('.price').innerHTML;
const img = father.querySelector('img').src;
product.id = id;
product.title = title;
product.price = price;
product.img = img;
product.numb = 1;
this.subscribe(product.id,product);
html(){
let str='';
for(let i in this.backet){
console.log(this.backet[i].src)
str += "<li date-id="+this.backet[i].id+">"+"<div class='left'><img src="+this.backet[i].img+"></div>"+"<div class='right'><p>"+this.backet[i].title+"</p>"+"<span>"+this.backet[i].numb+"</span>"+"<span>"+this.backet[i].price+"</span></div>"+"</li>";
document.querySelector('#shopCart').innerHTML = str;
var xiaoming= new Noobcart();
var add = document.querySelectorAll('.addToCart');
add.forEach(function(item,index){
item.onclick = function(){
xiaoming.analysis(item);
})
* {
margin: 0;
padding: 0
a {
text-decoration: none;
color: #333;
a:hover {
ul{
list-style:none;
.container-two {
width: 100%;
margin: 30px auto;
.container-two ul:after {
visibility: hidden;
display: block;
font-size: 0;
content: ".";
clear: both;
height: 0;
.container-two ul after {
.container-two li {
margin: 0 15px 15px;
float: left;
padding-bottom: 15px;
.container-two li:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
.container-two li p {
padding: 5px 15px 0;
.container-two li p:after {
.container-two li p after {
.container-two li img {
width: 277px;
height:277px;
.container-two li .price {
color: #f60;
font-size: 16px;
display: inline-block;
.container-two li .numb {
color: #666;
font-size: 12px;
float: right;
.container-two li .title {
.container-two li .addToCart {
font-size: 14px;
color: #fff;
width: 116px;
height: 30px;
background: #27b5e5;
border-radius: 3px;
text-align: center;
line-height: 30px;
cursor: pointer;
.container-two li .lightNumb {
border: 1px solid #27b5e5;
box-sizing: border-box;
#shopCart{
position:fixed;
right:0;
top:10px;
#shopCart li{
display: flex;
margin-bottom: 5px;
border-bottom: 1px dashed #666;
width: 200px;
#shopCart .left{
margin-left:10px;
margin-right: 10px;
#shopCart img{
height: 60px;
#shopCart .right{
flex-wrap: wrap;
justify-content: space-between;
#shopCart .right p{
margin-bottom: 20px;
#shopCart .right span{
