Web前端学习记录(十八)
程序员文章站
2022-04-22 15:01:57
...
前言：
w：I wanna bring you into my heart。
实现购物列表中的购物车拖曳效果
预览如下：
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"> 网站导航<img src="images/arrow.gif">
<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;
}
}