Web前端学习记录(十八)

前言:

w:I wanna bring you into my heart。
y:英语六级过了么?
w:你出现在我诗的每一页。
y:就这?

实现购物列表中的购物车拖曳效果

预览如下:
在这里插入图片描述

shoppingShow.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>漫步时尚广场-购物列表</title>
    <link href="css/show.css" rel="stylesheet" type="text/css">
    
    <script type="text/javascript" src="js/shoppingCart.js"></script>
    <script type="text/javascript" src="js/hotAdvise.js"></script>
</head>
<body>
<!--顶部区域 start-->
<div class="top_bg">
  <div class="top_content">
    <div class="floatl"><img src="images/star.jpg">收藏 | HI,欢迎来订购 !<a href="../manageadmin/login.html" class="orange">[请登录]</a> <a href="../register/register.html"  class="orange"> [免费注册]</a></div>
    <div class="floatr">客户服务<img src="images/arrow.gif">&nbsp;网站导航<img src="images/arrow.gif">&nbsp;
      <div class="xl">
      	<!--购物车-->
        <div class="droparrow" onclick="showCar()"><span class="shopcart"></span>我的购物车
        	<span class="orange">0</span><img src="images/arrow.gif"/></div>
        <!--下拉菜单-->
        <div class="dropdown" id="dropdown" style="display: none" 
        	ondrop="drop(event)" ondragover="allowDrop(event)"> 
          <!--<div class="gwc"></div><h3>购物车为空,现在去挑选几件商品</h3></div>-->
          <ul class="shop_pic">
            <!--<li><a href="#"><img src="images/shopshow/s1.jpg" /></a>
              <p>1<a href="#"><span class="orange floatr">删除</span></a></p>
            </li>
            <li><a href="#"><img src="images/shopshow/s2.jpg" /></a>
              <p>2<a href="#"><span class="orange floatr">删除</span></a></p>
            </li>
            <li><a href="#"><img src="images/shopshow/s3.jpg" /></a>
              <p>1<a href="#"><span class="orange floatr">删除</span></a></p>
            </li>
            <li><a href="#"><img src="images/shopshow/s6.jpg" /></a>
              <p>1<a href="#"><span class="orange floatr">删除</span></a></p>
            </li>
            <li><a href="#"><img src="images/shopshow/s7.jpg" /></a>
              <p>1<a href="#"><span class="orange floatr">删除</span></a></p>
            </li>
            <li><a href="#"><img src="images/shopshow/s8.jpg" /></a>
              <p>1<a href="#"><span class="orange floatr">删除</span></a></p>
            </li>-->
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
<!--顶部区域 end-->
<div class="clear"></div>
<!--logo和banner start-->
<div class="logo"><a href="../index.html"><img src="images/logo.jpg" ></a><img src="images/banner.jpg" class="floatr "></div>
<!--logo和banner  end--> 

<!--菜单导航栏 start-->
<div class="nav_bg">
  <div class="nav_content">
    <ul class="nav">
      <li ><a href="shoppingIndex.html" class="white">首页</a></li>
      <li class="nav_active" ><a href="shoppingShow.html"  class="white">最新上架</a></li>
      <li>品牌活动</li>
      <li>原厂直供</li>
      <li>团购</li>
      <li>限时抢购</li>
      <li>促销打折</li>
    </ul>
  </div>
</div>
<!--菜单导航栏 end--> 
<!--中间部分 start-->
<div class="main"> 
  <!--购物分类 start-->
  <ul class="menu">
    <li ><span class="title">女装</span></li>
    <li><span class="red_dot"></span><a href="#" >上衣</a><span class="right_arrow"></span></li>
    <li><span class="red_dot"></span><a href="#" >下装</a><span class="right_arrow"></span></li>
    <li><span class="red_dot"></span><a href="#" >连衣裙</a><span class="right_arrow"></span></li>
    <li><span class="red_dot"></span><a href="#" >内衣</a><span class="right_arrow"></span></li>
    <li><span class="title">男装</span></li>
    <li><span class="red_dot"></span><a href="#" >T</a><span class="right_arrow"></span></li>
    <li><span class="red_dot"></span><a href="#" >短裤</a><span class="right_arrow"></span></li>
    <li><span class="red_dot"></span><a href="#" >衬衫</a><span class="right_arrow"></span></li>
    <li><span class="title">童装</span></li>
    <li><span class="red_dot"></span><a href="#" >上衣</a><span class="right_arrow"></span></li>
    <li><span class="red_dot"></span><a href="#" >裤子</a><span class="right_arrow"></span></li>
    <li><span class="title">运动</span></li>
    <li><span class="red_dot"></span><a href="#" >运动裤</a><span class="right_arrow"></span></li>
    <li><span class="red_dot"></span><a href="#" >跑步鞋</a><span class="right_arrow"></span></li>
  </ul>
  <!--购物分类end--> 
  <!--中间区 start-->
  <div class="middle">
    <h1 class="pic_title">最新上架</h1>
    <div class="pic_list">
    <script type="text/javascript">
		var images=["yifu1.jpg","yifu2.jpg","yifu3.jpg","yifu4.jpg","yifu5.jpg","yifu6.jpg","yifu7.jpg","yifu8.jpg",];
		var prices=["198.00","69.00","160.00","210.00","70.00","146.00","69.00","239.00"];
		var buyers=[324,534,643,678,567,4567,1345,789];
		var contents=["冬季新款牛仔外套加厚连帽毛领加绒牛仔棉衣","2015夏新款韩版 透气舒适简约半截袖T恤衫","韩版甜美气质亮片热气球字母中长款圆领短袖T恤","2015款秋新款甜美学院立领中袖套头格子衬衫娃娃衫","2015款秋新款甜美学院立领中袖套头格子衬衫娃娃衫","大码女装胖mm2015夏装新款韩版显瘦露肩镂空连衣裙","v领雪纺背心女夏外穿双层吊带打底衫百搭显瘦无袖上衣","韩版印花无袖短裙背心裙女 高腰连衣裙A字裙秋季"];
		
		for(var i=0;i<images.length;i++){
			var goodsInfo="<dl><div><img src='images/shopshow/"+images[i]+"' /></div><dt><span class='price'>¥"+prices[i]
				+"元</span><span class='font12'>"+buyers[i]+"人购买</span></dt><dd>"
				+contents[i]+"</dd></dl>";
			document.write(goodsInfo);
		}
	</script>
<!--      <dl>
        <div><a href="shoppingDetail.html" target="_blank"><img src="images/shopshow/yifu1.jpg" /></a></div>
        <dt><span class="price">198.00</span><span class="font12">324人购买</span></dt>
        <dd>冬季新款牛仔外套加厚连帽毛领加绒牛仔棉衣</dd>
      </dl>
      <dl>
        <div><img src="images/shopshow/yifu2.jpg" /></div>
        <dt><span class="price">69.00</span><span class="font12">534人购买</span></dt>
        <dd>2015夏新款韩版 透气舒适简约半截袖T恤衫</dd>
      </dl>
      <dl>
        <div><img src="images/shopshow/yifu3.jpg" /></div>
        <dt><span class="price">160.00</span><span class="font12">643人购买</span></dt>
        <dd>韩版甜美气质亮片热气球字母中长款圆领短袖T</dd>
      </dl>
      <dl>
        <div><img src="images/shopshow/yifu4.jpg" /></div>
        <dt><span class="price">210.00</span><span class="font12">678人购买</span></dt>
        <dd>2015款秋新款甜美学院立领中袖套头格子衬衫娃娃衫</dd>
      </dl>
      <dl>
        <div><img src="images/shopshow/yifu5.jpg" /></div>
        <dt><span class="price">70.00</span><span class="font12">567人购买</span></dt>
        <dd>2015款秋新款甜美学院立领中袖套头格子衬衫娃娃衫</dd>
      </dl>
      <dl>
        <div><img src="images/shopshow/yifu6.jpg" /></div>
        <dt><span class="price">146.00</span><span class="font12">4567人购买</span></dt>
        <dd>大码女装胖mm2015夏装新款韩版显瘦露肩镂空连衣裙</dd>
      </dl>
      <dl>
        <div><img src="images/shopshow/yifu7.jpg" /></div>
        <dt><span class="price">69.00</span><span class="font12">1345人购买</span></dt>
        <dd>v领雪纺背心女夏外穿双层吊带打底衫百搭显瘦无袖上衣</dd>
      </dl>
      <dl>
        <div><img src="images/shopshow/yifu8.jpg" /></div>
        <dt><span class="price">239.00</span><span class="font12">789人购买</span></dt>
        <dd>韩版印花无袖短裙背心裙女 高腰连衣裙A字裙秋季 </dd>
      </dl>-->
    </div>
    <!--品牌活动-->
    <h1 class="pic_title">品牌活动</h1>
    <ul class="pic_list2">
      <script type="text/javascript">
	  	var images=["dress1.jpg","dress2.jpg","dress3.jpg","dress4.jpg"];
		var contents=["独家定制 V 双层欧根纱里衬 色织时装料大牌范蓬蓬长裙","夏季新款 子域D5656E 简约通勤腰带修身大摆短袖连衣裙","爱美斯 2015夏季优雅显瘦大摆长裙 中长款复古印花淑女裙","亿婷2015夏女装新品显瘦飘逸黑白竖条纹阔腿裤七分裤裙"];
		for(var i in images){
			var goodsInfo="<li><img src='images/shopshow/"+images[i]+"' /><p>"
				+contents[i]+"</p></li>";
			document.write(goodsInfo);
		}
	  </script>
<!--      <li><img src="images/shopshow/dress1.jpg" />
        <p>独家定制 V 双层欧根纱里衬 色织时装料大牌范蓬蓬长裙</p>
      </li>
      <li><img src="images/shopshow/dress2.jpg" />
        <p>夏季新款 子域D5656E 简约通勤腰带修身大摆短袖连衣裙</p>
      </li>
      <li><img src="images/shopshow/dress3.jpg" />
        <p>爱美斯 2015夏季优雅显瘦大摆长裙 中长款复古印花淑女裙 </p>
      </li>
      <li><img src="images/shopshow/dress4.jpg" />
        <p>亿婷2015夏女装新品显瘦飘逸黑白竖条纹阔腿裤七分裤裙</p>
      </li>-->
    </ul>
  </div>
  <!--中间区 end--> 
  
  <!--右侧热门推荐 start-->
  <div class="right_nav" id="right_nav">    
  <!--  
  <h1 class="notice_title">热门推荐</h1>
  <ul class="pic_list3">
      <li><a href="#"><img src="images/shopshow/s1.jpg" /></a>
        <p class="price2">56.00</p>
      </li>
      <li><a href="#"><img src="images/shopshow/s2.jpg" /></a>
        <p class="price2">97.00</p>
      </li>
      <li><a href="#"><img src="images/shopshow/s3.jpg" /></a>
        <p class="price2">89.00</p>
      </li>
      <li><a href="#"><img src="images/shopshow/s4.jpg" /></a>
        <p class="price2">69.00</p>
      </li>
      <li><a href="#"><img src="images/shopshow/s5.jpg" /></a>
        <p class="price2">89.00</p>
      </li>
      <li><a href="#"><img src="images/shopshow/s6.jpg" /></a>
        <p class="price2">93.00</p>
      </li>
      <li><a href="#"><img src="images/shopshow/s7.jpg" /></a>
        <p class="price2">58.00</p>
      </li>
      <li><a href="#"><img src="images/shopshow/s8.jpg" /></a>
        <p class="price2">69.00</p>
      </li>
      <li><a href="#"><img src="images/shopshow/s9.jpg" /></a>
        <p class="price2">78.00</p>
      </li>
    </ul>-->
    <!--使用脚本的方向定时更新推,下面引入脚本代码也可以放在<head>标签之内荐信息-->
    
  </div>  
  <!--右侧热门推荐 end--> 
  
</div>

<!--中间部分 end--> 
<!--底部 start-->
<div class="clear"></div>
<div class="footer">
  <div class="gotop"></div>
  <div class="foot_title">
    <ul class="foot_pic">
      <li><img src="images/gray1.jpg" ></li>
      <li><img src="images/gray2.jpg" ></li>
      <li><img src="images/gray3.jpg" ></li>
      <li><img src="images/gray4.jpg" ></li>
      <li><img src="images/gray5.jpg" ></li>
    </ul>
  </div>
  <ul class="foot_list">
    <li>
      <div class="floatl">
        <p class="red1"></p>
        <p class="line1"></p>
      </div>
      <ul class="floatl">
        <li class="font16 padding-bottom">新手指导</li>
        <li>用户注册</li>
        <li>电话下单</li>
        <li>购物流程</li>
        <li>购物保障</li>
        <li>服务协议</li>
      </ul>
    </li>
    <li>
      <div class="floatl">
        <p class="red2"></p>
        <p class="line1"></p>
      </div>
      <ul class="floatl">
        <li class="font16 padding-bottom">支付方式</li>
        <li>货到付款</li>
        <li>商城卡支付</li>
        <li>支付宝、网银支付</li>
        <li>优惠券抵用</li>
      </ul>
    </li>
    <li>
      <div class="floatl">
        <p class="red3"></p>
        <p class="line1"></p>
      </div>
      <ul class="floatl">
        <li class="font16 padding-bottom">配送方式</li>
        <li>闪电发货</li>
        <li>满百包邮</li>
        <li>配送范围及时间</li>
        <li>商品验收及签收</li>
        <li>服务协议</li>
      </ul>
    </li>
    <li>
      <div class="floatl">
        <p class="red3"></p>
        <p class="line1"></p>
      </div>
      <ul class="floatl">
        <li class="font16 padding-bottom">售后服务</li>
        <li>退换货协议</li>
        <li>关于发票</li>
        <li>退换货流程</li>
        <li>退换货运费</li>
      </ul>
    </li>
    <li>
      <div class="floatl">
        <p class="red3"></p>
        <p class="line1"></p>
      </div>
      <ul class="floatl">
        <li class="font16 padding-bottom">关于帐号</li>
        <li>修改个人信息</li>
        <li>修改密码</li>
        <li>找回密码</li>
      </ul>
    </li>
    <li>
      <div class="floatl">
        <p class="red3"></p>
        <p class="line1"></p>
      </div>
      <ul class="floatl">
        <li class="font16 padding-bottom">优惠活动</li>
        <li>竞拍须知</li>
        <li>抢购须知</li>
      </ul>
    </li>
  </ul>
  <div class="clear"></div>
  <div class="foot_line"></div>
  <p align="center" class="padding-top">Copyright  2015-2020  Q- Walking Fashion E&S 漫步时尚广场(QST教育)版权所有<Br/>
    中国青岛 高新区河东路8888号  青软教育集团    咨询热线:400-658-0166  400-658-1022 </p>
  <p align="center"><img src="images/foot_pic.jpg"></p>
  <div class="clear"></div>
</div>

<!--底部 end-->
</body>
</html>
show.css,hotAdvise.js参考:

https://blog.csdn.net/weixin_43912621/article/details/105444096.

shoppingCart.js:
// Created by guoqy
//购物车的显示与隐藏
function showCar(){
	var shopCar = document.getElementsByClassName("dropdown")[0];
	var rightNav = document.getElementsByClassName("right_nav")[0];
	switch(shopCar.style.display){
		case "":
		case "none":
			shopCar.style.display = "block";
			rightNav.style.position = "relative";
			//下移热门推荐模块
			//rightNav.style.top = "100px";
			shopCar.innerHTML = loadCar();
			break;
		case "block":
			shopCar.style.display = "none";
			rightNav.style.position = "static";
			break;
	}
}

//定义一个商品对象
var goods={goodsSrc: null, goodsNum: 1};

//设置拖拽效果
function drag(e){
	e=e||event;
	e.dataTransfer.effectAllowed = "copy";
	//IE需通过服务器访问方式,FF、chrome支持本地方式进行访问
	e.dataTransfer.setData("text", e.target.src);			//IE兼容写法
	//e.dataTransfer.setData("text/plain", e.target.src);	//标准写法
}

//拖拽释放效果
function drop(e){
	//方式拖拽事件传播
	allowDrop(e);
	//从拖拽事件中获取数据
	var data=e.dataTransfer.getData("text");
	//e.target.id=="dropdown",表示目标对象是div(dropdown)
	//e.target.parentNode.id=="dropdown"表示目标对象是dropdown的直接子元素UL
	//e.target.parentNode.parentNode.id=="dropdown" 表示目标对象是UL中的LI
	//e.target.parentNode.parentNode.parentNode.id=="dropdown"表示目标对是<a>元素
	//e.target.parentNode.parentNode.parentNode.parentNode.id=="dropdown"表示目标对象是<img>元素
	if(e.target.id=="dropdown" || e.target.parentNode.id=="dropdown" 
		|| e.target.parentNode.parentNode.id=="dropdown" 
		|| e.target.parentNode.parentNode.parentNode.id=="dropdown" 
		|| e.target.parentNode.parentNode.parentNode
			.parentNode.id=="dropdown"){
		//从localStorage中尝试根据Src读取数据
		var newGoods=readFromStorage(data);
		//如果localStorage中存在当前商品,则在原基础上加1
		if (newGoods!=null){
			for(var i=0; i<localStorage.length; i++){
				if(data==newGoods.goodsSrc) {
					newGoods.goodsNum+=1;
					goods=newGoods;
					break;
				}
			}
		}else{
			//如果localStorage中,没有该商品,创建一个新对象,且商品数量为1
			goods.goodsSrc=data;
			goods.goodsNum=1;
		}
		//把处理后的商品信息存储到localStorage
		localStorage.setItem(data, JSON.stringify(goods));
		//重新加载并刷新页面中的购物车
		document.getElementsByClassName("dropdown")[0].innerHTML=loadCar();
	}
}
//阻止被拖拽的图片在新窗口打开
function allowDrop(e){
	e.preventDefault();//通知浏览器不再执行事件相关的默认动作
	e.stopPropagation();//阻止事件冒
}
//根据key读取localStorage的值并封装成JSON
function readFromStorage(key){
	var jsonStr=localStorage.getItem(key);
	var newGoods=JSON.parse(jsonStr);
	return newGoods;
}

//加载购物车
function loadCar(){
	//localStorage不为空时,将购物车中的信息读出来并显示到页面中
	if(localStorage.length!=0){
		var ulObject=document.createElement("ul");
		ulObject.className="shop_pic";
		for(var i=0; i<localStorage.length; i++){
			var key=localStorage.key(i);
			goods=readFromStorage(key);
			if(goods!=null) {
				var liObject=document.createElement("li");
				liObject.innerHTML='<a href="#"><img src="'+goods.goodsSrc
				  +'" width="80px" height="96px"/></a><p>'+goods.goodsNum
				  +'件<a href="javascript:void(0)" 	οnclick="delStorage(this)"><span class="orange floatr">删除</span></a></p>';
			}
			ulObject.appendChild(liObject);
		}
		return ulObject.outerHTML;
	}
	return "购物车还是空的,赶快加点东西吧~";
}

//从localStorage中删除某个元素
function delStorage(element){
	//获得被点击的<a>元素的对应的img标签的src属性
	var targetSrc=element.parentNode.parentNode.childNodes[0]
					.childNodes[0].src;
	//根据src属性读取localStorage中的商品
	var delGoods=readFromStorage(targetSrc);
	delGoods.goodsNum-=1;
	//如果商品数量等于0,则移除该商品
	if(delGoods.goodsNum==0){
		localStorage.removeItem(targetSrc);
	}else{
		//如果商品数量大于0,将修改后的信息保存到localStorage中
		localStorage.setItem(targetSrc,JSON.stringify(delGoods));
	}
	//删除成功后,重新加载并更新页面中的购物车
	document.getElementsByClassName("dropdown")[0].innerHTML=loadCar();
}

//窗口加载时,为允许拖拽的图片添加draggable属性和ondragstart事件
window.onload=function(){
	var pic_list=document.getElementsByClassName("pic_list")[0];
	var pic_list_div=pic_list.getElementsByTagName("div");
	for(var i=0;i<pic_list_div.length;i++){
		var image=pic_list_div[i].getElementsByTagName("img")[0];
		image.setAttribute("draggable",true);
		image.ondragstart=drag;
	}
}

后记:

在这里插入图片描述

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 点我我会动 设计师:白松林 返回首页