web期末实验 自选 京东网站

登录页面


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>"><title>京东-欢迎登录</title><meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--<link rel="stylesheet" type="text/css" href="styles.css">--><script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.js"></script><script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap/bootstrap.js"></script>
<style type="text/css">.logo {margin: 10px 0;position: relative;width: 300px;float:left;height:60px;
}.welcome-login {margin-top: 15px;position: absolute;margin-left: 15px;color: rgb(51, 51, 51);
}.questions {position: relative;float: right;text-decoration: none;color: #999;font-size: 12px;outline: rgb(109, 109, 109) none 0px;top:52px;
}
a{text-decoration: none;color: #999;
}
a:hover {color: #f00;text-decoration: underline;
}.background-img {position: relative;width: 102%;margin-left: -8px;
}.login-form {position: absolute;margin-top: 180px;
}
.login-wrap{position:relative;height:475px;margin:10px 0 20px;z-index:5px;
}
.w{width:990px;margin: 0 auto;
}#content{clear: both;
}.login-wrap .login-form{float:right;top:-140px;
}
.login-form{position:relative;z-index:4;background:#fff;overflow:visible;width:345px;
}
.login-form .login-tab{margin-top:15px;height:39px;font-size:18px;font-family:"microsoft yahei";text-align: center;border-bottom:1px solid #f4f4f4;position:absolute;background:#ffff;display:block;
}
.login-tab{position:relative;margin-left:500px;
}
.login-form .login-tab-r{right:0;
}
.login-form .login-tab-l, .login-form .login-tab-r {width: 173px;
}
a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var {margin: 0;padding: 0;
}
.msg-wrap{width:306px;margin-left: 20px;
}
.msg-warn{color:#666;border: solid 1px ;border-color:orange;background-color: #FFEEDD;margin-top: 60px;text-align: center;font-size: 12px;padding-top: 3px;padding-bottom:3px;
}
.form{margin-left: 20px;width:306px;margin-top: 10px;font-size: 20px;
}
.item .item-fore1 .item .item-fore2{border:1px solider #bdbdbd;}
.form .item-fore1{z-index:6;
}
.form .item{position:relative;margin-bottom:20px;
}
.item .item-fore2{margin-top:10px;}
.form .itxt {line-height:18px;height:40px;padding:10px 0 10px 10px;width:256px;float:none;overflow:hidden;font-size:14px;
}
.item-fore4{font-size:12px;margin-top: 10px;height: 18px;/* width: 306px; */
}
.forgetPassword{
/*  margin-left:182px; */position:absolute;right:0;top:0;margin:0;
}
.jdcheckbox{float: none;vertical-align: middle;margin:0 3px 0 0;padding:0;
}
.item-fore5{text-align: center;
}
.lo{}
.login-form .login-box .login-btn {border:1px solid #cb2a2d;width:99%;position:relative;height:32px;
}
.login-form .login-box .login-btn .btn-img{border:1px solid #e85356;background: #e4393c;width:302px;font-size: 20px;color:#fff;display:block;height:31px;line-height:31px;font-family:'Micraosoft YaHei';
}a.btn-img:hover{color:#000;text-decoration: none;
}
a.ss:hover{color:red;/* text-decoration: none;  */
}
.main-img{width: 990;height:475;
}element.style {background-color: #041422;
}
/**图片样式*/
.login-banner{background-color: #041422;position:absolute;width: 100%;margin-top: 0px;
}/* 底部链接*/
#footer{text-align:center;padding-bottom:30px;font-size:12px;color:#666;
}
.copyright{margin-top:10px;
}</style>
</head><body>
<div class="w"><!-- 头部，logo部分 --><div class="logo"><!-- <img alt="京东" src="${pageContext.request.contextPath }/img/logo.png"></img> --><font size="5px" class="welcome-login">周展羽欢迎您登录</font></div><a class="questions" οnmοuseοver="color:red;" target="_blank"href="https://surveys.jd.com/index.php?r=survey/index/sid/568245/lang/zh-Hans">登录页面，调查问卷</a>
</div><!-- body --><div id="content"><div class=login-wrap><div class="w"><!-- 登录框 --><div class="login-form"><div class="login-tab login-tab-r"><a class="ss" href="javascript:void(0)"style="color:#f00">账户登录</a></div><!-- 主体 --><div class="login-box"><div class="mt tab-h"></div><div class="msg-wrap"><div class="msg-warn"><label>公共场所不建议自动登录，以防账号丢失</label></div></div><!-- 输入框 --><div class="mc"><div class="form"><form id="formlogin" method="post" οnsubmit="return false;"><div class="item item-fore1"><!-- <div class="input-group-addon glyphicon glyphicon-user">aa</div> --><label for="loginanme" class="login-label name-label ">账号</label><input  class="itxt" type="text" name="loginname" placeholder="邮箱/用户名/已验证手机"></div><div class="item item-fore2"><label for="loginanme" class="login-label name-label">密码</label><input type="text"  class="itxt"name="loginname" placeholder="请输入密码"></div><div class="item item-fore4"><div class="safe"><input class="jdcheckbox" type="checkbox" name="remember">自动登录<a href="#" class="forgetPassword"style="text-align: right;">忘记密码</a></div></div><!-- 登录按钮 --><div class="item item-fore5"><div class="login-btn"><a href="./index.html"   class="btn-img btn-entry"  tabindex="6" id="loginsubmit">登  录</a></div></div></form></div></div></div></div></div><div class="login-banner" ><!-- style="background-color:#041422" --><div class="w"><img  class="main-img"  height="475px" width="90px" ><!-- <div id="banner-bg"  class="i-inner" style="background: url(//img11.360buyimg.com/da/jfs/t3154/258/5179306513/128208/9d5b12bd/5864cf6eN542ab244.jpg) "></div> --></div></div></div></div><div class="w"><div id="footer"><div class="links"><a rel="nofollow" target="_blank" href="//www.jd.com/intro/about.aspx">关于我们</a>|<a rel="nofollow" target="_blank" href="//www.jd.com/contact/">联系我们</a>|<a rel="nofollow" target="_blank" href="//zhaopin.jd.com/">人才招聘</a>|<a rel="nofollow" target="_blank" href="//www.jd.com/contact/joinin.aspx">商家入驻</a>|<a rel="nofollow" target="_blank" href="//www.jd.com/intro/service.aspx">广告服务</a>|<a rel="nofollow" target="_blank" href="//app.jd.com/">手机京东</a>|<a target="_blank" href="/links.vm/club.jd.com/links.aspx">友情链接</a>|<a target="_blank" href="//media.jd.com/">销售联盟</a>|<a href="//club.jd.com/" target="_blank">京东社区</a>|<a href="//gongyi.jd.com" target="_blank">京东公益</a>|<a target="_blank" href="//en.jd.com/" clstag="pageclick|keycount|20150112ABD|9">English Site</a></div><div class="copyright">Copyright &copy; 2004-2017  京东JD.com 周展羽版权所有</div></div></div>
</body>
</html>

实现效果

主页

主页js代码

$('#myJD').addDropdown({width: 280,widthCol: 126,justifyConent: 'start',menuList: [{title: "",items: [{href: '#',name: '待处理订单',}, {href: '#',name: '消息',}, {href: '#',name: '返修退换货',}, {href: '#',name: '我的问答',}, {href: '#',name: '降价商品',}, {href: '#',name: '我的关注',}],}, {title: '',items: [{href: '#',name: '我的京豆',}, {href: '#',name: '我的优惠券',}, {href: '#',name: '我的白条',}],}]
});$('#procurement').addDropdown({width: 140,widthCol: 56,justifyConent: 'start',menuList: [{title: '',items: [{href: '',name: '企业购'}, {href: '',name: '商用场景馆'}, {href: '',name: '工业品'}, {href: '',name: '礼品卡'}]}]
});$('#service').addDropdown({width: 170,widthCol: 70,justifyContent: 'end',menuList: [{title: '客户',items: [{name: '帮助中心',href: ''}, {name: '售后服务',href: ''}, {name: '在线客服',href: '',}, {name: '意见建议',href: ''}, {name: '电话客服',href: ''}, {name: '客服邮箱',href: ''}, {name: '金融咨询',href: ''}, {name: '全球售客服'}]}, {title: '商户',items: [{name: '合作招商'}, {name: '学习中心'}, {name: '商家后台'}, {name: '京麦工作台'}, {name: '商家帮助'}, {name: '规则平台'}]}]
});$('#bar-navs').addDropdown({direction: 'x',width: 1188,menuList: [{title: '特色主题',width: 340,widthCol: 85,items: [{name: '京东试用'}, {name: '京东金融'}, {name: '全球售'}, {name: '国际站'}, {name: '京东会员'}, {name: '京东预售'}, {name: '买什么'}, {name: '俄语站'}, {name: '装机大师'}, {name: '0元评测'}, {name: '港澳售'}, {name: '优惠券'}, {name: '秒杀闪购'}, {name: '印尼站'}, {name: '京东金融科技'}, {name: '陪伴计划'}, {name: '出海招商'}, {name: '拍拍'}]}, {title: '特色主题',width: 270,itemWidth: 85,items: [{name: '京东试用'}, {name: '京东金融'}, {name: '全球售'}, {name: '国际站'}, {name: '京东会员'}, {name: '京东预售'}, {name: '买什么'}, {name: '俄语站'}, {name: '装机大师'}, {name: '0元评测'}, {name: '港澳售'}, {name: '优惠券'}, {name: '秒杀闪购'}, {name: '印尼站'}]}]
});$('#seckill-slider-l').swiper({// 轮播内容items: $('#seckill-slider-l > .item'),//  是否展示左右按钮showArrowBtn: true,showSpotBtn: false,//  动画效果:  fade 代表淡入淡出  animate代表左右滑动type: 'animate',width: 800,height: 260,//    isAuto: true,
})$('#seckill-slider-r').swiper({// 轮播内容items: $('#seckill-slider-r > img'),//  是否展示左右按钮showArrowBtn: false,showSpotBtn: true,spotPosition: 'center',//  动画效果:  fade 代表淡入淡出  animate代表左右滑动type: 'animate',width: 180,height: 240,isAuto: true,autoTime: 1000
})
$('.slider-focus').swiper({items: $('.slider-focus > img'),showArrowBtn: true,showSpotBtn: true,type: 'fade',width: 590,height: 470,isAuto: true,spotPosition: 'left',autoTime: 3000
})
$('.slider-recommend').swiper({items: $('.slider-recommend > .recommend-item'),showArrowBtn: true,showSpotBtn: false,type: 'fade',width: 190,height: 470,isAuto: true,autoTime: 1000
});$('.logo').hover(function () {$('.logo-hover', this).remove();$('<a href="#" class="logo-hover"></a>').appendTo($('.logo')).css({backgroundImage: 'url(https://img1.360buyimg.com/da/jfs/t1/16134/5/11584/77878/5c90a4bdE5ae12937/38714fb6679b8daf.gif?v=' + Math.random() + ')'})
}, function () {setTimeout(function () {$('.logo-hover', $('.logo')).remove()}, 1500)});var placeholders = ['宝洁京东超级品牌日199-100', '磁力片', '监控摄像头']// 像搜索框里面添加placeholder
function addPlaceholder() {var count = 0;var placeholdersTimer = setInterval(function () {$('#search-inp').prop('placeholder', placeholders[count]);count++;count = count % placeholders.length;}, 2000)
}addPlaceholder()function dealSearchData(data) {console.log(data)data = data.result || [];$('#search-box').empty().show();for (var i = 0; i < data.length; i++) {$('<li><a href="#">' + data[i][0] + '</a> <span class="number">' + data[i][1] + '</span></li>').appendTo($('#search-box'))}
}var inputTimer = null;
var showSearchTimer = null;
$('#search-inp').on('keyup', function () {var val = $(this).val();if (val) {clearTimeout(inputTimer);inputTimer = setTimeout(function () {$.ajax({type: 'GET',url: 'https://suggest.taobao.com/sug',data: {code: 'utf-8',q: val,_ksTS: '1576761011741_312',callback: 'dealSearchData',k: 1,area: 'c2c',bucketid: 10},dataType: 'jsonp'})}, 500)}
}).mouseleave(function () {showSearchTimer = setTimeout(function () {$('#search-box').hide()}, 500);
}).mouseenter(function () {clearTimeout(showSearchTimer);
});$('#search-box').mouseleave(function () {showSearchTimer = setTimeout(function () {$('#search-box').hide()}, 500);
}).mouseenter(function () {clearTimeout(showSearchTimer)
});var adLock = false;// 广告区域
$('.ad').hover(function () {if (adLock) {return false;}adLock = true;$('.ad-hover', this).animate({width: 790,}, function () {adLock = false;})
}, function () {if (adLock) {return false;}adLock = true;$('.ad-hover', this).animate({width: 0,}, function () {adLock = false;})
}, 100)// 左侧导航//  左侧菜单栏数据
var menuList = [{titles: ['家用电器'],content: {tabs: ['家电馆', '镇乡专卖店', '家电服务'],subs: [{title: '电视',items: ["曲面电视", "超薄电视", "OLED电视", "4K超清电视", "55英寸", "65英寸", "电视配件", "曲面电视", "超薄电视", "OLED电视", "4K超清电视", "55英寸", "65英寸", "电视配件", "曲面电视", "超薄电视", "OLED电视", "4K超清电视", "55英寸", "65英寸", "电视配件"]}, {title: '空调',items: ["壁挂式空调", "柜式空调", "中央空调", "一级能效空调", "变频空调", "1.5匹空调", "以旧换新"]}]}
}, {titles: ['手机', '运营商', '数码'],content: {tabs: ['手机'],subs: [{title: '手机',items: ["曲面电视", "超薄电视", "OLED电视", "4K超清电视", "55英寸", "65英寸", "电视配件"]}, {title: '手表',items: ["壁挂式空调", "柜式空调", "中央空调", "一级能效空调", "变频空调", "1.5匹空调", "以旧换新"]}]}
}, {titles: ['电脑', '办公'],content: {tabs: ['家电馆', '镇乡专卖店', '家电服务'],subs: [{title: '电视',items: ["曲面电视", "超薄电视", "OLED电视", "4K超清电视", "55英寸", "65英寸", "电视配件"]}, {title: '空调',items: ["壁挂式空调", "柜式空调", "中央空调", "一级能效空调", "变频空调", "1.5匹空调", "以旧换新", "壁挂式空调", "柜式空调", "中央空调", "一级能效空调", "变频空调", "1.5匹空调", "以旧换新", "壁挂式空调", "柜式空调", "中央空调", "一级能效空调", "变频空调", "1.5匹空调", "以旧换新"]}]}
}, {titles: ['家居', '家具', '家装', '厨具'],content: {tabs: ['家居', '镇乡专卖店', '家电服务'],subs: [{title: '电视',items: ["曲面电视", "超薄电视", "OLED电视", "4K超清电视", "55英寸", "65英寸", "电视配件"]}, {title: '空调',items: ["壁挂式空调", "柜式空调", "中央空调", "一级能效空调", "变频空调", "1.5匹空调", "以旧换新", "壁挂式空调", "柜式空调", "中央空调", "一级能效空调", "变频空调", "1.5匹空调", "以旧换新", "壁挂式空调", "柜式空调", "中央空调", "一级能效空调", "变频空调", "1.5匹空调", "以旧换新"]}]}
},{titles: ['机票', '酒店', '旅游', '生活'],content: {tabs: ['家电馆', '镇乡专卖店', '家电服务'],subs: [{title: '电视',items: ["曲面电视", "超薄电视", "OLED电视", "4K超清电视", "55英寸", "65英寸", "电视配件", "曲面电视", "超薄电视", "OLED电视", "4K超清电视", "55英寸", "65英寸", "电视配件", "曲面电视", "超薄电视", "OLED电视", "4K超清电视", "55英寸", "65英寸", "电视配件"]}, {title: '空调',items: ["壁挂式空调", "柜式空调", "中央空调", "一级能效空调", "变频空调", "1.5匹空调", "以旧换新"]}]}
},
{titles: ['安装', '维修', '生活', '家电'],content: {tabs: ['家电馆', '镇乡专卖店', '家电服务'],subs: [{title: '电视',items: ["曲面电视", "超薄电视", "OLED电视", "4K超清电视", "55英寸", "65英寸", "电视配件", "曲面电视", "超薄电视", "OLED电视", "4K超清电视", "55英寸", "65英寸", "电视配件", "曲面电视", "超薄电视", "OLED电视", "4K超清电视", "55英寸", "65英寸", "电视配件"]}, {title: '空调',items: ["壁挂式空调", "柜式空调", "中央空调", "一级能效空调", "变频空调", "1.5匹空调", "以旧换新"]}]}
},
{titles: ['理财', '众筹', '白条', '保险'],content: {tabs: ['家电馆', '镇乡专卖店', '家电服务'],subs: [{title: '电视',items: ["曲面电视", "超薄电视", "OLED电视", "4K超清电视", "55英寸", "65英寸", "电视配件", "曲面电视", "超薄电视", "OLED电视", "4K超清电视", "55英寸", "65英寸", "电视配件", "曲面电视", "超薄电视", "OLED电视", "4K超清电视", "55英寸", "65英寸", "电视配件"]}, {title: '空调',items: ["壁挂式空调", "柜式空调", "中央空调", "一级能效空调", "变频空调", "1.5匹空调", "以旧换新"]}]}
},
{titles: ['安装', '维修', '生活', '家电'],content: {tabs: ['家电馆', '镇乡专卖店', '家电服务'],subs: [{title: '电视',items: ["曲面电视", "超薄电视", "OLED电视", "4K超清电视", "55英寸", "65英寸", "电视配件", "曲面电视", "超薄电视", "OLED电视", "4K超清电视", "55英寸", "65英寸", "电视配件", "曲面电视", "超薄电视", "OLED电视", "4K超清电视", "55英寸", "65英寸", "电视配件"]}, {title: '空调',items: ["壁挂式空调", "柜式空调", "中央空调", "一级能效空调", "变频空调", "1.5匹空调", "以旧换新"]}]}
},
{titles: ['母婴','玩具','乐器'],content: {tabs: ['家电馆', '镇乡专卖店', '家电服务'],subs: [{title: '电视',items: ["曲面电视", "超薄电视", "OLED电视", "4K超清电视", "55英寸", "65英寸", "电视配件", "曲面电视", "超薄电视", "OLED电视", "4K超清电视", "55英寸", "65英寸", "电视配件", "曲面电视", "超薄电视", "OLED电视", "4K超清电视", "55英寸", "65英寸", "电视配件"]}, {title: '空调',items: ["壁挂式空调", "柜式空调", "中央空调", "一级能效空调", "变频空调", "1.5匹空调", "以旧换新"]}]}
},
{titles: ['食品','酒类','生鲜','特产'],content: {tabs: ['家电馆', '镇乡专卖店', '家电服务'],subs: [{title: '电视',items: ["曲面电视", "超薄电视", "OLED电视", "4K超清电视", "55英寸", "65英寸", "电视配件", "曲面电视", "超薄电视", "OLED电视", "4K超清电视", "55英寸", "65英寸", "电视配件", "曲面电视", "超薄电视", "OLED电视", "4K超清电视", "55英寸", "65英寸", "电视配件"]}, {title: '空调',items: ["壁挂式空调", "柜式空调", "中央空调", "一级能效空调", "变频空调", "1.5匹空调", "以旧换新"]}]}
},
{titles: ['食品','酒类','生鲜','特产'],content: {tabs: ['家电馆', '镇乡专卖店', '家电服务'],subs: [{title: '电视',items: ["曲面电视", "超薄电视", "OLED电视", "4K超清电视", "55英寸", "65英寸", "电视配件", "曲面电视", "超薄电视", "OLED电视", "4K超清电视", "55英寸", "65英寸", "电视配件", "曲面电视", "超薄电视", "OLED电视", "4K超清电视", "55英寸", "65英寸", "电视配件"]}, {title: '空调',items: ["壁挂式空调", "柜式空调", "中央空调", "一级能效空调", "变频空调", "1.5匹空调", "以旧换新"]}]}
},
{titles: ['食品','酒类','生鲜','特产'],content: {tabs: ['家电馆', '镇乡专卖店', '家电服务'],subs: [{title: '电视',items: ["曲面电视", "超薄电视", "OLED电视", "4K超清电视", "55英寸", "65英寸", "电视配件", "曲面电视", "超薄电视", "OLED电视", "4K超清电视", "55英寸", "65英寸", "电视配件", "曲面电视", "超薄电视", "OLED电视", "4K超清电视", "55英寸", "65英寸", "电视配件"]}, {title: '空调',items: ["壁挂式空调", "柜式空调", "中央空调", "一级能效空调", "变频空调", "1.5匹空调", "以旧换新"]}]}
},
{titles: ['食品','酒类','生鲜','特产'],content: {tabs: ['家电馆', '镇乡专卖店', '家电服务'],subs: [{title: '电视',items: ["曲面电视", "超薄电视", "OLED电视", "4K超清电视", "55英寸", "65英寸", "电视配件", "曲面电视", "超薄电视", "OLED电视", "4K超清电视", "55英寸", "65英寸", "电视配件", "曲面电视", "超薄电视", "OLED电视", "4K超清电视", "55英寸", "65英寸", "电视配件"]}, {title: '空调',items: ["壁挂式空调", "柜式空调", "中央空调", "一级能效空调", "变频空调", "1.5匹空调", "以旧换新"]}]}
},
{titles: ['食品','酒类','生鲜','特产'],content: {tabs: ['家电馆', '镇乡专卖店', '家电服务'],subs: [{title: '电视',items: ["曲面电视", "超薄电视", "OLED电视", "4K超清电视", "55英寸", "65英寸", "电视配件", "曲面电视", "超薄电视", "OLED电视", "4K超清电视", "55英寸", "65英寸", "电视配件", "曲面电视", "超薄电视", "OLED电视", "4K超清电视", "55英寸", "65英寸", "电视配件"]}, {title: '空调',items: ["壁挂式空调", "柜式空调", "中央空调", "一级能效空调", "变频空调", "1.5匹空调", "以旧换新"]}]}
},
{titles: ['食品','酒类','生鲜','特产'],content: {tabs: ['家电馆', '镇乡专卖店', '家电服务'],subs: [{title: '电视',items: ["曲面电视", "超薄电视", "OLED电视", "4K超清电视", "55英寸", "65英寸", "电视配件", "曲面电视", "超薄电视", "OLED电视", "4K超清电视", "55英寸", "65英寸", "电视配件", "曲面电视", "超薄电视", "OLED电视", "4K超清电视", "55英寸", "65英寸", "电视配件"]}, {title: '空调',items: ["壁挂式空调", "柜式空调", "中央空调", "一级能效空调", "变频空调", "1.5匹空调", "以旧换新"]}]}
},
{titles: ['食品','酒类','生鲜','特产'],content: {tabs: ['家电馆', '镇乡专卖店', '家电服务'],subs: [{title: '电视',items: ["曲面电视", "超薄电视", "OLED电视", "4K超清电视", "55英寸", "65英寸", "电视配件", "曲面电视", "超薄电视", "OLED电视", "4K超清电视", "55英寸", "65英寸", "电视配件", "曲面电视", "超薄电视", "OLED电视", "4K超清电视", "55英寸", "65英寸", "电视配件"]}, {title: '空调',items: ["壁挂式空调", "柜式空调", "中央空调", "一级能效空调", "变频空调", "1.5匹空调", "以旧换新"]}]}
},
{titles: ['食品','酒类','生鲜','特产'],content: {tabs: ['家电馆', '镇乡专卖店', '家电服务'],subs: [{title: '电视',items: ["曲面电视", "超薄电视", "OLED电视", "4K超清电视", "55英寸", "65英寸", "电视配件", "曲面电视", "超薄电视", "OLED电视", "4K超清电视", "55英寸", "65英寸", "电视配件", "曲面电视", "超薄电视", "OLED电视", "4K超清电视", "55英寸", "65英寸", "电视配件"]}, {title: '空调',items: ["壁挂式空调", "柜式空调", "中央空调", "一级能效空调", "变频空调", "1.5匹空调", "以旧换新"]}]}
},
{titles: ['食品','酒类','生鲜','特产'],content: {tabs: ['家电馆', '镇乡专卖店', '家电服务'],subs: [{title: '电视',items: ["曲面电视", "超薄电视", "OLED电视", "4K超清电视", "55英寸", "65英寸", "电视配件", "曲面电视", "超薄电视", "OLED电视", "4K超清电视", "55英寸", "65英寸", "电视配件", "曲面电视", "超薄电视", "OLED电视", "4K超清电视", "55英寸", "65英寸", "电视配件"]}, {title: '空调',items: ["壁挂式空调", "柜式空调", "中央空调", "一级能效空调", "变频空调", "1.5匹空调", "以旧换新"]}]}
},];function renderMenuList() {for (var i = 0; i < menuList.length; i++) {var oLi = $('<li></li>');menuList[i].titles.forEach(function (item, index, arr) {$('<a href="#"></a>').html(item).appendTo(oLi);if (index != arr.length - 1) {$('<span>/</span>').appendTo(oLi);}});oLi.appendTo($('.menu-list'));}
}
renderMenuList()
var menuTimer = null;
$('.menu-list').on('mouseenter', 'li', function (e) {clearTimeout(menuTimer)var index = $(this).index();renderMenuContent(menuList[index]);$('.menu-content').fadeIn();$('.menu-list > li').removeClass('active')$(this).addClass('active');}).on('mouseleave', 'li', function() {menuTimer = setTimeout(function () {$('.menu-content').fadeOut()$('.menu-list > li').removeClass('active')}, 500)
})
$('.menu-content').mouseenter(function () {clearTimeout(menuTimer);
}).mouseleave(function () {menuTimer = setTimeout(function () {$('.menu-content').fadeOut()$('.menu-list > li').removeClass('active')}, 500)
})function renderMenuContent(data) {$('.menu-content').empty();var tabsDiv = $('<div class="tabs"></div>');var detailDiv = $(' <div class="detail"></div>');data = data.content;data.tabs.forEach(function (tab) {$(`<a href="#">${tab}<i class="iconfont">&#xe743;</i></a>`).appendTo(tabsDiv)});data.subs.forEach(function (sub) {var oDl = $('<dl></dl>');$(`<dt><a href="#">电视<i class="iconfont">&#xe743;</i></a></dt>`).appendTo(oDl);var oDD = $('<dd></dd>');sub.items.forEach(function (item) {$('<a href="#"></a>').text(item).appendTo(oDD);})oDl.append(oDD).appendTo(detailDiv);})$('.menu-content').append(tabsDiv).append(detailDiv)
}$('.service_frame').mouseenter(function () {$('.j-service').addClass('service_extend')$('.service_frame_on').removeClass('service_frame_on');$(this).addClass('service_frame_on')$('.service-pop').find('.service-content').text($(this).text())
});
$('.close').click(function () {$('.service_frame_on').removeClass('service_frame_on');$('.j-service').removeClass('service_extend')
})

主页css代码

* {padding: 0;margin: 0;list-style: none;text-decoration: none;
}
@font-face {font-family: 'iconfont';  /* project id 1568466 */src: url('https://at.alicdn.com/t/font_1568466_tgtcrlj6ln.eot');src: url('https://at.alicdn.com/t/font_1568466_tgtcrlj6ln.eot?#iefix') format('embedded-opentype'),url('https://at.alicdn.com/t/font_1568466_tgtcrlj6ln.woff2') format('woff2'),url('https://at.alicdn.com/t/font_1568466_tgtcrlj6ln.woff') format('woff'),url('https://at.alicdn.com/t/font_1568466_tgtcrlj6ln.ttf') format('truetype'),url('https://at.alicdn.com/t/font_1568466_tgtcrlj6ln.svg#iconfont') format('svg');
}
.iconfont {font-family: 'iconfont';font-style: normal;display: inline-block;width: 12px;height: 12px;/* transform: scale(); */
}
body {font-size: 12px;background-color: #f4f4f4;
}
.shortcut {height: 30px;background-color: #e3e4e5;border-bottom: 1px solid #ddd;
}
.w {width: 1190px;margin: auto;
}
.shortcut .w {height: 30px;line-height: 30px;color: #999;
}
.fr {float: right;
}
.fr li {float: left;padding: 0 10px;position: relative;z-index: 100;
}
.shortcut a {color: #999;
}
.fr li.spacer {width: 1px;height: 10px;background-color: #ccc;margin: 11px 5px 0;padding: 0;
}
.shortcut a:hover {color: red;
}
.fr li.dropdown:hover{background-color: #fff;
}
.fr li:hover > .my-dropdown {display: block;
}
.fr li.dropdown:hover::after {content: '';width: 100%;height: 2px;display: inline-block;background-color: #fff;position: absolute;top: 30px;left: 0;
}
.my-dropdown {/* width: 280px; */background-color: #fff;border: 1px solid #eee;position: absolute;top: 30px;left: -1px;overflow: hidden;display:none;
}
.my-dropdown dl {width: 100%;padding: 10px 0 10px 15px;border-bottom: 1px solid #eee;overflow: hidden;
}
.my-dropdown dl dt {margin-bottom: 5px;font-weight: 700;color: #666;
}
.my-dropdown dl dd {float: left;line-height: 24px;/* width: 126px; */
}
.my-dropdown dl dd a {white-space: nowrap;
}.header {height: 140px;background-color: #fff;border-bottom: 1px solid #ddd;
}
.header .w {background-color: #fff;height: 140px;position: relative;
}
.fs .ad {position: absolute;left: -350px;width: 350px;height: 470px;top: 10px;/* background-color: sandybrown; */
}
.fs .ad .ad-hover {position: absolute;left: 350px;top: 0;width: 0;height: 470px;z-index: 111;overflow: hidden;
}
.fs .ad .ad-hover img {width: 790px;height: 470px;
}
.fs .w {position: relative;
}
.fs .w > div {float: left;
}
.fs .w .fs-1 , .fs .w .fs-3{width: 190px;height: 480px;/* background-color: #fff; */}
.fs .w .fs-1, .fs .w .fs-2{margin-right: 10px;
}
.fs .w .fs-2 {width: 790px;height: 480px;/* background-color: skyblue; */}.seckill .w .timing {width: 190px;height: 260px;background-color: #e83632;}
.seckill .w > div{float: left;
}
.seckill .w .slider-l {width: 800px;height: 260px;
}
.seckill .w .slider-r {width: 200px;height: 260px;background-color: #fff;padding: 10px;box-sizing: border-box;
}.item .slider-item {float: left;width: 200px;height: 260px;
}
img {width: 100%;height: 100%;
}
.fs-2 .slider-focus {width: 590px;height:470px;margin-right: 10px;float: left;/* display: inline-block; */overflow: hidden;/* background-color: springgreen; */margin-top: 10px;
}
.fs-2 .slider-recommend {width: 190px;height:470px;float: left;/* display: inline-block; */overflow: hidden;/* background-color: steelblue; */margin-top: 10px;
}
.recommend-item a img{margin-bottom: 10px;
}.logo {width: 190px;height: 120px;position: absolute;top: 50%;margin-top: -60px;
}.logo a {width: 190px;height: 120px;display: inline-block;background-image: url(https://misc.360buyimg.com/mtd/pc/index_2019/1.0.0/assets/sprite/header/sprite.png);
}
.logo a.logo-hover {position: absolute;top: 0;left: 0;background-color: #fff;/* background-image: url(https://img1.360buyimg.com/da/jfs/t1/16134/5/11584/77878/5c90a4bdE5ae12937/38714fb6679b8daf.gif?v=0.4816663691124261); */background-position: center center;/* display: none; */
}
/* .logo:hover .logo-hover {display: block;
} */.header .w {/* overflow: hidden; */
}
.search {padding-top: 25px;
}
.search .form {width: 546px;height: 32px;border: 2px solid #e2231a;margin-left: 260px;
}
.search .form #search-inp {padding: 2px 44px 2px 17px;width: 425px;height: 26px;border: 1px solid transparent;line-height: 26px;font-size: 12px;outline: none;
}
.form {font-size: 0;
}
.search .form #search-btn {width: 58px;height: 32px;line-height: 32px;border: none;outline: none;box-sizing: border-box;background-color: #e1251b;color: #fff;font-size: 20px;font-weight: 700;vertical-align: top;font-family: 'iconfont';
}
#search-box {position: absolute;left: 260px;background-color: #fff;border: 1px solid #eee;width: 488px;z-index: 100;
}
#search-box li {overflow: hidden;padding: 1px 6px;line-height: 24px;cursor: pointer;
}.settleup {width: 130px;height: 34px;background-color: #fff;text-align: center;line-height: 34px;border: 1px solid #e3e4e5;position: absolute;right: 230px;top: 25px;
}
.settleup .iconfont {margin-right: 13px;font-size: 16px;color: #e1251b;
}
.settleup a {color: #e1251b;font-size: 12px;
}
.settleup .count {font-style: normal;position: absolute;top: 1px;left: 29px;padding: 1px 3px;font-size: 12px;line-height: 12px;color: #fff;background-color: #e1251b;border-radius: 7px;min-width: 12px;text-align: center;
}.hotwords {width: 550px;height: 20px;line-height: 20px;position: absolute;left: 260px;top: 65px;
}
.hotwords a {margin-right: 10px;color: #999;
}
.hotwords .style-red {color: #e1251b;
}
.navitems {overflow: hidden;position: absolute;left: 203px;bottom: 0;height: 40px;padding-top: 20px;
}
.navitems li {float: left;padding: 0 11px;color: #333;line-height: 40px;font-size: 15px;cursor: pointer;
}
.navitems li.style-red {font-weight: 700;color: #e1251b;
}.menu-list {padding: 10px 0;height: 450px;background-color: #fefefe;color: #636363;margin-top: 10px;
}.menu-list li {height: 25px;line-height: 25px;cursor: pointer;padding-left: 18px;
}
.menu-list li a {font-size: 14px;color: #333;
}.menu-list li.active {background-color: #d9d9d9;
}
.menu-list li a:hover {color: #e1251b;
}
.menu-content {position: absolute;left: 190px;top: 10px;width: 998px;min-height: 468px;background-color: #fff;z-index: 100;border: 1px solid #f7f7f7;padding: 20px 0 10px;box-sizing: border-box;
}
.menu-content .tabs {padding-left: 20px;height: 24px;
}
.tabs a {margin-right: 10px;padding: 0 10px;height: 24px;background-color: #333;line-height: 24px;color: #fff;display: inline-block;
}
.tabs a:hover {background-color: #c81623;color: #fff;
}
.menu-content .detail {padding: 10px 0 0 20px;
}
.detail dl {padding-left: 80px;position: relative;overflow: hidden;
}
.detail dl dt {width: 70px;text-align: right;font-weight: 700;white-space: nowrap;position: absolute;left: 0;top: 6px;
}
.detail dl dt a {color: #333;font-weight: 700;
}
.detail dl dd {padding: 5px 0;
}
.detail dl dd a {margin: 3px 0;padding: 0 7px;height: 16px;line-height: 16px;white-space: nowrap;color: #666;
}
.menu-content .detail a:hover {color: #c81623;
}.menu-content {display: none;
}
.fs-3 .j-user {height: 102px;background: #fff;margin-top: 10px;overflow: hidden;
}
.fs-3 .j-news {overflow: hidden;height: 130px;background: #fff;
}
.fs-3 .j-service {height: 238px;position: relative;border-top: 1px solid #eee;overflow: hidden;
}
.j-service .service-entry {padding: 5px .5px;background: #fff;
}
.service-entry .service_list {padding-top: 5px;height: 225px;
}
.service_item {position: relative;float: left;width: 63px;height: 55px;background: #fff;text-align: center;overflow: hidden;
}
.service_lk {display: block;cursor: pointer;position: relative;
}
.service_ico {width: 28px;height: 28px;margin: 0 auto;position: relative;display: block;
}
.service_ico_img, .service_ico_img_hover {width: 28px;height: 28px;
}
.service_ico_img_hover {position: absolute;top: 0;left: 0;visibility: hidden;
}
.service_txt {display: block;height: 25px;line-height: 25px;border-bottom: 2px solid #fff;color: #333;-webkit-transition: color .15s ease;transition: color .15s ease;position: relative;background-color: #fff;
}
.service_corner {position: absolute;right: 5px;top: 0;width: 14px;height: 14px;font-size: 12px;line-height: 14px;text-align: center;background: #e1251b;color: #fff;z-index: 1;-webkit-transition: all .2s ease;transition: all .2s ease;
}
.service_corner_txt {vertical-align: top;font-style: normal;
}
.service_ico:hover .service_ico_img_hover {visibility: visible;
}
.service-pop {position: absolute;width: 100%;height: 206px;background-color: #fff;-webkit-transition: all .2s ease;transition: all .2s ease;top: 232px;z-index: 111;
}
.service_frame.service_frame_on .service_txt::after {content: '';width: 30px;height: 2px;background-color: #c81623;position: absolute;bottom:0px;left: 50%;margin-left: -15px;
}.close {position: absolute;width: 20px;height: 20px;left: 50%;margin-left: -10px;bottom: 0;cursor: pointer;
}.service_extend .service_frame .service_txt {margin-top: -32px;line-height: 32px;/* height: 32px; */
}
.service_extend .service_frame {overflow: visible;
}
.service_extend .service_frame.service_frame2.service_frame_on .service_txt {margin-top:  -87px;line-height: 32px;/* height: 32px; */
}
.service_extend .service-pop {top: 32px;
}

主页 HTML代码

<!DOCTYPE html>
<html lang="en"><head><meta char  set="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>周展羽设计</title><link rel="stylesheet" href="./swiper/index.css" /><link rel="stylesheet" href="./index.css" />
</head><body><div class="shortcut"><div class="w"><div class="fl"></div><ul class="fr"><li><a href="./login.html">你好，请登录</a><a href="#">免费注册</a></li><li class="spacer"></li><li><a href="#">我的订单</a></li><li class="spacer"></li><li id="myJD" class="dropdown"><a href="#">我的京东</a><i class="iconfont">&#xe658;</i><!-- <div class="my-dropdown"><dl><dd>待处理订单</dd><dd>待处理订单</dd><dd>待处理订单</dd><dd>待处理订单</dd><dd>待处理订单</dd><dd>待处理订单</dd></dl><dl><dd>我的京东</dd><dd>我的京东</dd><dd>我的京东</dd><dd>我的京东</dd></dl></div> --></li><li class="spacer"></li><li><a href="#">京东会员</a></li><li class="spacer"></li><li id="procurement" class="dropdown"><a href="#">企业采购</a><i class="iconfont">&#xe658;</i></li><li class="spacer"></li><li id="service" class="dropdown"><a href="#">客户服务</a><i class="iconfont">&#xe658;</i></li><li class="spacer"></li><li id="bar-navs" class="dropdown"><a href="#">网站导航</a><i class="iconfont">&#xe658;</i></li><li class="spacer"></li><li><a href="#">手机京东</a></li></ul></div></div><div class="header"><div class="w"><div class="logo"><a class="logo-title" href="#"></a><!-- <a href="#" class="logo-hover"></a> --></div><div class="search"><div class="form"><input type="text" id="search-inp" placeholder="爱普生打印机"><button id="search-btn">&#xe618;</button></div><ul id="search-box"></ul></div><div class="settleup"><i class="iconfont">&#xe746;</i><a href="./购物车/index.html">我的购物车</a><i class="count">0</i></div><div class="hotwords"><a href="#" class="style-red">分千万京豆</a><a href="#">美妆好礼</a><a href="#">199减20</a><a href="#">圣诞好礼</a><a href="#">京东国际</a><a href="#">千万京豆</a><a href="#">每100-50</a><a href="#">ROG手机</a></div><ul class="navitems"><li class="style-red">秒杀</li><li class="style-red">优惠券</li><li>PLUS会员</li><li>品牌闪购</li><li>拍卖</li><li>京东时尚</li><li>京东超市</li><li>京东生鲜</li><li>京东国际</li><li>京东金融</li></ul></div></div><div class="fs"><div class="w"><div class="ad"><img class="fs_act_lk_img"src="https://img13.360buyimg.com/img/jfs/t1/100540/28/6222/179780/5df1a461E95e36498/2594141d6a3fc4c2.png.webp"><div class="ad-hover"><imgsrc="https://img13.360buyimg.com/img/jfs/t1/100780/5/6135/410812/5df1a46cE4a85f5fd/d7a93bf31e000bc6.jpg.webp"></div></div><div class="fs-1"><ul class="menu-list"><!-- <li class="active"><a href="#">家用电器</a></li><li><a href="#">手机</a><span>/</span><a href="#">运营商</a><span>/</span><a href="#">数码</a></li><li><a href="#">电脑</a><span>/</span><a href="#">办公</a></li> --></ul><div class="menu-content"><div class="tabs"><!-- <a href="#">家电馆<i class="iconfont">&#xe743;</i></a><a href="#">家电专卖店<i class="iconfont">&#xe743;</i></a><a href="#">家电服务<i class="iconfont">&#xe743;</i></a><a href="#">企业采购<i class="iconfont">&#xe743;</i></a><a href="#">商业服务<i class="iconfont">&#xe743;</i></a> --></div><div class="detail"><!-- <dl><dt><a href="#">电视<i class="iconfont">&#xe743;</i></a></dt><dd class="cate_detail_con" clstag="h|keycount|head|category_01d01"><a href="//list.jd.com/list.html?cat=737,794,798&amp;ev=4155_76344&amp;sort=sort_rank_asc&amp;trans=1&amp;JL=2_1_0#J_crumbsBar" class="cate_detail_con_lk" target="_blank">超薄电视</a><a href="//list.jd.com/list.html?cat=737,794,798&amp;ev=4155_97865&amp;sort=sort_rank_asc&amp;trans=1&amp;JL=3_%E7%94%B5%E8%A7%86%E7%B1%BB%E5%9E%8B_%E5%85%A8%E9%9D%A2%E5%B1%8F#J_crumbsBar" class="cate_detail_con_lk" target="_blank">全面屏电视</a><a href="//list.jd.com/list.html?cat=737,794,798&amp;ev=4155_100812&amp;sort=sort_rank_asc&amp;trans=1&amp;JL=2_1_0#J_crumbsBar" class="cate_detail_con_lk" target="_blank">智能电视</a><a href="//list.jd.com/list.html?cat=737,794,798&amp;ev=4155_88234&amp;sort=sort_rank_asc&amp;trans=1&amp;JL=2_1_0#J_crumbsBar" class="cate_detail_con_lk" target="_blank">OLED电视</a><a href="//list.jd.com/list.html?cat=737,794,798&amp;ev=4155_122030" class="cate_detail_con_lk" target="_blank">智慧屏</a><a href="//list.jd.com/list.html?cat=737,794,798&amp;ev=4155_110018&amp;sort=sort_rank_asc&amp;trans=1&amp;JL=2_1_0#J_crumbsBar" class="cate_detail_con_lk" target="_blank">4K超清电视</a><a href="//list.jd.com/list.html?cat=737,794,798&amp;ev=244_1486&amp;sort=sort_rank_asc&amp;trans=1&amp;JL=3_%E5%B1%8F%E5%B9%95%E5%B0%BA%E5%AF%B8_55%E8%8B%B1%E5%AF%B8#J_crumbsBar" class="cate_detail_con_lk" target="_blank">55英寸</a><a href="//list.jd.com/list.html?cat=737,794,798&amp;ev=244_58269&amp;sort=sort_rank_asc&amp;trans=1&amp;JL=2_1_0#J_crumbsBar" class="cate_detail_con_lk" target="_blank">65英寸</a><a href="//list.jd.com/list.html?cat=737,17394,17395" class="cate_detail_con_lk" target="_blank">电视配件</a></dd></dl><dl><dt><a href="#">空调<i class="iconfont">&#xe743;</i></a></dt><dd class="cate_detail_con" clstag="h|keycount|head|category_01d02"><a href="//list.jd.com/list.html?cat=737,794,870&amp;ev=1554_584893&amp;JL=3_%E7%A9%BA%E8%B0%83%E7%B1%BB%E5%88%AB_%E5%A3%81%E6%8C%82%E5%BC%8F%E7%A9%BA%E8%B0%83#J_crumbsBar" class="cate_detail_con_lk" target="_blank">空调挂机</a><a href="//list.jd.com/list.html?cat=737,794,870&amp;ev=1554_584894&amp;JL=3_%E7%A9%BA%E8%B0%83%E7%B1%BB%E5%88%AB_%E7%AB%8B%E6%9F%9C%E5%BC%8F%E7%A9%BA%E8%B0%83#J_crumbsBar" class="cate_detail_con_lk" target="_blank">空调柜机</a><a href="//list.jd.com/list.html?cat=737,794,13701" class="cate_detail_con_lk" target="_blank">中央空调</a><a href="//coll.jd.com/list.html?sub=36582" class="cate_detail_con_lk" target="_blank">变频空调</a><a href="//coll.jd.com/list.html?sub=36577" class="cate_detail_con_lk" target="_blank">一级能效</a><a href="//list.jd.com/list.html?cat=737,794,17152" class="cate_detail_con_lk" target="_blank">移动空调</a><a href="//pro.jd.com/mall/active/jLwLxB3MD7ygsDnxzUmgQb8sFUQ/index.html" class="cate_detail_con_lk" target="_blank">以旧换新</a></dd></dl><dl><dt><a href="#">洗衣机<i class="iconfont">&#xe743;</i></a></dt><dd class="cate_detail_con" clstag="h|keycount|head|category_01d03"><a href="//list.jd.com/list.html?cat=737,794,880&amp;ev=998_605429&amp;JL=3_%E4%BA%A7%E5%93%81%E7%B1%BB%E5%9E%8B_%E6%BB%9A%E7%AD%92#J_crumbsBar" class="cate_detail_con_lk" target="_blank">滚筒洗衣机</a><a href="//list.jd.com/list.html?cat=737,794,880&amp;ev=998_5006&amp;JL=3_%E4%BA%A7%E5%93%81%E7%B1%BB%E5%9E%8B_%E6%B4%97%E7%83%98%E4%B8%80%E4%BD%93#J_crumbsBar" class="cate_detail_con_lk" target="_blank">洗烘一体机</a><a href="//list.jd.com/list.html?cat=737,794,880&amp;ev=998_5005&amp;JL=3_%E4%BA%A7%E5%93%81%E7%B1%BB%E5%9E%8B_%E6%B3%A2%E8%BD%AE#J_crumbsBar" class="cate_detail_con_lk" target="_blank">波轮洗衣机</a><a href="//list.jd.com/list.html?cat=737,794,880&amp;ev=998_77402&amp;JL=3_%E4%BA%A7%E5%93%81%E7%B1%BB%E5%9E%8B_%E8%BF%B7%E4%BD%A0%E6%B4%97%E8%A1%A3%E6%9C%BA#J_crumbsBar" class="cate_detail_con_lk" target="_blank">迷你洗衣机</a><a href="//list.jd.com/list.html?cat=737,794,14420" class="cate_detail_con_lk" target="_blank">烘干机</a><a href="//list.jd.com/list.html?cat=737,17394,17396" class="cate_detail_con_lk" target="_blank">洗衣机配件</a></dd></dl> --></div></div></div><div class="fs-2"><div class="slider-focus"><imgsrc="https://img20.360buyimg.com/babel/s590x470_jfs/t1/105258/39/5383/98045/5dedbd1bEbcd2cd83/d83ee98d128c006e.jpg.webp"alt="" /><imgsrc="https://img12.360buyimg.com/pop/s590x470_jfs/t1/102498/1/6201/69252/5df205ddE9ef307ee/49d6fb8555873342.jpg.webp"alt="" /><imgsrc="https://img20.360buyimg.com/pop/s590x470_jfs/t1/106050/5/7033/72549/5df99388Ed5c1018a/6eb231965d4b0432.jpg.webp"alt="" /><imgsrc="https://img20.360buyimg.com/pop/s590x470_jfs/t1/67659/19/9335/71518/5d706ce2E040a449b/ae70a4cc68c0a356.jpg.webp"alt="" /></div><div class="slider-recommend"><div class="recommend-item "><a href="https://pro.jd.com/mall/active/2aRqdvBvQA8kinebZxp3ggGLsq4d/index.html" target="_blank"class="recommend-item fade-in" clstag="h|keycount|head|rmd_01a" aria-label="今日推荐 第1帧第1个坑位"><img alt=""class="recommend-item__image"src="https://img30.360buyimg.com/babel/s380x300_jfs/t1/56213/9/11485/98187/5de0c661E15e39c1b/3b154f04e67db943.jpg.webp" /></a><ahref="https://pro.jd.com/mall/active/4P9a2T9osR9JvtzHVaYTPvsecRtg/index.html" target="_blank"class="recommend-item fade-in" clstag="h|keycount|head|rmd_01b" aria-label="今日推荐 第1帧第2个坑位"><img alt=""class="recommend-item__image"src="https://img12.360buyimg.com/babel/s380x300_jfs/t1/99974/11/6214/24455/5df19dd7E487651ef/6380940668bb3c93.jpg.webp" /></a><ahref="https://ccc-x.jd.com/dsp/nc?ext=aHR0cHM6Ly9wcm8uamQuY29tL21hbGwvYWN0aXZlLzNSVDlua25hbmc0MjFmWjhjZXM0V1ZDOThibUsvaW5kZXguaHRtbA&amp;log=yIWFf_DsBrchR_DAr1eeTcQ-JGhpO3I5OlkCe5y0_0Shs3GY62L2TRCVUEJsgQ3l_0KJb5LD5sKJSCQer9XfM8tb__6rw6Fv3PwdCivN6tUKKWIZ93FVpX4XKUKi75wZd8YdAyqkVi86uD4N-qFOgXiPvXwu_odwjrsl1XaX4NY1bSQhC5Frrs5OsdpZ1C2KLwWge8vdCcytcpEKMm3SP1iGdJ9I4AUlLRXKJdnpdC4JrmHKjgM904fHGFg5FSisl-AOEYCEYf68xUMArMVbuwb0bPxiBtMKPpO-KghGzPhj1xLFwIhQ0IHz3Ki8cOoxXAvYtamRH5l59ccD3sRhegc-stepOjkH5W_O44DJbYbBoLd32J5ncCw_WKRJQ2g3EicgdlGVCIf7lFfsDlUoQTeVl55DsY2g022IP7g4y0UwdwKxUBOzRcElvgjosaPVsZlmkC4ZpzT0r4EB2cJRJKWamasHaKuXeh1WVAIYqeD1C6oyyxSAiWRi-7tYIJ93fscsoeGdPukyQNS9w1ZZkbYIzv93-KZsohLmc0bEnJZHinD4z-KK0EkI_UUbsMFpZJ6TQaFRALLnXuAytGgH_B55S5kAjDiVt0NTuIyywVwUNaGZd1ZG-UbRdIqiYGpDm5Qsa8OZjwH_Lg3TFZM0ZDkY_oRKVsG70SV5rBMB900&amp;v=404"target="_blank" class="recommend-item fade-in" clstag="h|keycount|head|rmd_01c"aria-label="今日推荐 第1帧第3个坑位"><img class="recommend-item__image"src="https://img14.360buyimg.com/pop/s380x300_jfs/t1/96885/9/7189/79049/5df993a4E3e6316a0/2eb4b3c7ada97e9f.png.webp" /></a></div><div class="recommend-item "><a href="https://pro.jd.com/mall/active/2aRqdvBvQA8kinebZxp3ggGLsq4d/index.html" target="_blank"class="recommend-item fade-in" clstag="h|keycount|head|rmd_01a" aria-label="今日推荐 第1帧第1个坑位"><img alt=""class="recommend-item__image"src="https://img30.360buyimg.com/babel/s380x300_jfs/t1/56213/9/11485/98187/5de0c661E15e39c1b/3b154f04e67db943.jpg.webp" /></a><ahref="https://pro.jd.com/mall/active/4P9a2T9osR9JvtzHVaYTPvsecRtg/index.html" target="_blank"class="recommend-item fade-in" clstag="h|keycount|head|rmd_01b" aria-label="今日推荐 第1帧第2个坑位"><img alt=""class="recommend-item__image"src="https://img12.360buyimg.com/babel/s380x300_jfs/t1/99974/11/6214/24455/5df19dd7E487651ef/6380940668bb3c93.jpg.webp" /></a><ahref="https://ccc-x.jd.com/dsp/nc?ext=aHR0cHM6Ly9wcm8uamQuY29tL21hbGwvYWN0aXZlLzNSVDlua25hbmc0MjFmWjhjZXM0V1ZDOThibUsvaW5kZXguaHRtbA&amp;log=yIWFf_DsBrchR_DAr1eeTcQ-JGhpO3I5OlkCe5y0_0Shs3GY62L2TRCVUEJsgQ3l_0KJb5LD5sKJSCQer9XfM8tb__6rw6Fv3PwdCivN6tUKKWIZ93FVpX4XKUKi75wZd8YdAyqkVi86uD4N-qFOgXiPvXwu_odwjrsl1XaX4NY1bSQhC5Frrs5OsdpZ1C2KLwWge8vdCcytcpEKMm3SP1iGdJ9I4AUlLRXKJdnpdC4JrmHKjgM904fHGFg5FSisl-AOEYCEYf68xUMArMVbuwb0bPxiBtMKPpO-KghGzPhj1xLFwIhQ0IHz3Ki8cOoxXAvYtamRH5l59ccD3sRhegc-stepOjkH5W_O44DJbYbBoLd32J5ncCw_WKRJQ2g3EicgdlGVCIf7lFfsDlUoQTeVl55DsY2g022IP7g4y0UwdwKxUBOzRcElvgjosaPVsZlmkC4ZpzT0r4EB2cJRJKWamasHaKuXeh1WVAIYqeD1C6oyyxSAiWRi-7tYIJ93fscsoeGdPukyQNS9w1ZZkbYIzv93-KZsohLmc0bEnJZHinD4z-KK0EkI_UUbsMFpZJ6TQaFRALLnXuAytGgH_B55S5kAjDiVt0NTuIyywVwUNaGZd1ZG-UbRdIqiYGpDm5Qsa8OZjwH_Lg3TFZM0ZDkY_oRKVsG70SV5rBMB900&amp;v=404"target="_blank" class="recommend-item fade-in" clstag="h|keycount|head|rmd_01c"aria-label="今日推荐 第1帧第3个坑位"><img alt="" class="recommend-item__image"src="https://img14.360buyimg.com/babel/s380x300_jfs/t1/89364/25/6310/91610/5df306d8E089d7517/2c0ef14fa4e5313c.jpg.webp"></a></div></div></div><div class="fs-3"><div class="j-user"><div><img src="./image/logo.png" alt=""></div></div><div class="j-news"><div class="join"style="width:100px;height:100%;display: flex; flex-direction: column;margin-top: 40px;margin-left: 42px;"><buttonstyle="border-radius: 10px;background-color: #e1251b;border: none;height: 30px;color: #333;outline: none;"> 登录</button><buttonstyle="margin-top: 10px;border-radius: 10px;background-color: #363634;border: none;height: 30px;color: #e5d790;outline: none;"> 注册</button></div></div><div class="j-service"><div class="service-entry"><ul class="J_tab_head service_list"><li class="service_item service_frame mod_tab_head_item "><a href="https://chongzhi.jd.com/" class="service_lk" target="_blank" clstag="h|keycount|head|shortcut_01"aria-label="话费"><i class="service_ico service_ico_huafei"><img class="service_ico_img"src="https://m.360buyimg.com/babel/jfs/t1/30057/19/14881/720/5cbf064aE187b8361/eed6f6cbf1de3aaa.png"><img class="service_ico_img_hover"src="https://m.360buyimg.com/babel/jfs/t1/45423/33/385/778/5cd4f265E442a9342/0aff0a42cece09ee.png"></i><span class="service_txt">话费</span></a></li><li class="service_item service_frame mod_tab_head_item"><a href="https://jipiao.jd.com/" class="service_lk" target="_blank" clstag="h|keycount|head|shortcut_02"aria-label="机票"><i class="service_ico service_ico_jipiao"><img class="service_ico_img"src="https://m.360buyimg.com/babel/jfs/t1/36478/38/5384/2901/5cbf065aEb0c60a12/afb4399323fe3b76.png"><img class="service_ico_img_hover"src="https://m.360buyimg.com/babel/jfs/t1/34261/15/10242/3120/5cd4f256E10257aba/8f3f63ae04ff19af.png"></i><span class="service_txt">机票</span></a></li><li class="service_item service_frame mod_tab_head_item"><a href="https://hotel.jd.com/" class="service_lk" target="_blank" clstag="h|keycount|head|shortcut_03"aria-label="酒店"><i class="service_ico service_ico_jiudian"><img class="service_ico_img"src="https://m.360buyimg.com/babel/jfs/t1/31069/34/14642/979/5cbf0665Ec7dc8223/5fee386254dd2ebc.png"><img class="service_ico_img_hover"src="https://m.360buyimg.com/babel/jfs/t1/44601/19/915/1039/5cd4f1cfE2e46473c/b61f083872a7a1de.png"></i><span class="service_txt">酒店</span></a></li><li class="service_item service_frame service_frame2 mod_tab_head_item" data-row="2"><a href="https://game.jd.com/" class="service_lk" target="_blank" clstag="h|keycount|head|shortcut_04"aria-label="游戏"><i class="service_ico service_ico_youxi"><img class="service_ico_img"src="https://m.360buyimg.com/babel/jfs/t1/32403/22/14829/3699/5cbf0674E04723693/caa83ce9b881cd24.png"><img class="service_ico_img_hover"src="https://m.360buyimg.com/babel/jfs/t1/57520/8/375/4092/5cd4f1d8Ea1266047/1c590322ece537ba.png"></i><span class="service_txt">游戏</span></a></li><li class="service_item service_noframe"><a href="https://jiayouka.jd.com/" class="service_lk" target="_blank"clstag="h|keycount|head|shortcut_05" aria-label="加油卡"><i class="service_ico"><!-- 常态 icon --><img class="service_ico_img"src="https://m.360buyimg.com/babel/jfs/t1/83290/1/14259/3048/5db79948E303a060b/1c97b739ad3a29af.png"><!-- hover 态 icon --><img class="service_ico_img_hover"src="https://m.360buyimg.com/babel/jfs/t1/36002/35/9106/3311/5cd4f1bdE06ff07ed/9570fdd46ecd3a76.png"></i><span class="service_txt">加油卡</span></a></li><li class="service_item service_noframe"><a href="https://train.jd.com/" class="service_lk" target="_blank" clstag="h|keycount|head|shortcut_06"aria-label="火车票"><span class="service_corner"><i class="service_corner_txt">抢</i><i class="service_corner_ico"></i></span><i class="service_ico"><!-- 常态 icon --><img class="service_ico_img"src="https://m.360buyimg.com/babel/jfs/t1/82381/1/14214/1581/5db7994dE6c05d701/54c10e0e0e08ac31.png"><!-- hover 态 icon --><img class="service_ico_img_hover"src="https://m.360buyimg.com/babel/jfs/t1/58891/36/278/1745/5cd4f1e0Ef4cc50a7/f12276b17e5dcf3b.png"></i><span class="service_txt">火车票</span></a></li><li class="service_item service_noframe"><a href="https://z.jd.com/sceneIndex.html?from=jrscyn_20162" class="service_lk" target="_blank"clstag="h|keycount|head|shortcut_07" aria-label="众筹"><i class="service_ico"><!-- 常态 icon --><img class="service_ico_img"src="https://m.360buyimg.com/babel/jfs/t1/92419/13/987/1685/5db79953Eea36af2b/09001b9fa53ed4dc.png"><!-- hover 态 icon --><img class="service_ico_img_hover"src="https://m.360buyimg.com/babel/jfs/t1/50929/1/374/1847/5cd4f1eaE5daf90db/cebbff76b25dc22e.png"></i><span class="service_txt">众筹</span></a></li><li class="service_item service_noframe"><a href="https://licai.jd.com/?from=jrscyn_20161" class="service_lk" target="_blank"clstag="h|keycount|head|shortcut_08" aria-label="理财"><i class="service_ico"><!-- 常态 icon --><img class="service_ico_img"src="https://m.360buyimg.com/babel/jfs/t1/95477/26/1025/3447/5db7995bE5eb68f61/57f3bf5c1b72e9cc.png"><!-- hover 态 icon --><img class="service_ico_img_hover"src="https://m.360buyimg.com/babel/jfs/t1/47544/23/372/3943/5cd4f24eE92fbcf79/4b49b55af25a7bdf.png"></i><span class="service_txt">理财</span></a></li><li class="service_item service_noframe"><a href="https://baitiao.jd.com/?from=jrscyn_20160" class="service_lk" target="_blank"clstag="h|keycount|head|shortcut_09" aria-label="白条"><i class="service_ico"><!-- 常态 icon --><img class="service_ico_img"src="https://m.360buyimg.com/babel/jfs/t1/67644/4/13800/1443/5db79961Efb368a66/402e65e1817f37f0.png"><!-- hover 态 icon --><img class="service_ico_img_hover"src="https://m.360buyimg.com/babel/jfs/t1/39983/24/6834/1596/5cd4f247E8cf89f1e/b8a8418d5418f471.png"></i><span class="service_txt">白条</span></a></li><li class="service_item service_noframe"><a href="https://movie.jd.com/index.html" class="service_lk" target="_blank"clstag="h|keycount|head|shortcut_10" aria-label="电影票"><i class="service_ico"><!-- 常态 icon --><img class="service_ico_img"src="https://m.360buyimg.com/babel/jfs/t1/54685/28/14503/3066/5db79969E2d33e15d/a6f161f3f46e4cda.png"><!-- hover 态 icon --><img class="service_ico_img_hover"src="https://m.360buyimg.com/babel/jfs/t1/41106/15/4551/3300/5cd4f1c7E507148c7/90a218f053e903d2.png"></i><span class="service_txt">电影票</span></a></li><li class="service_item service_noframe"><a href="https://b.jd.com/" class="service_lk" target="_blank" clstag="h|keycount|head|shortcut_11"aria-label="企业购"><i class="service_ico"><!-- 常态 icon --><img class="service_ico_img"src="https://m.360buyimg.com/babel/jfs/t1/101244/35/1002/826/5db79971Ee4886d3f/ca32a4837ff7c72b.png"><!-- hover 态 icon --><img class="service_ico_img_hover"src="https://m.360buyimg.com/babel/jfs/t1/45316/3/388/884/5cd4f25eEea4c67ed/671f7c186c5e9b01.png"></i><span class="service_txt">企业购</span></a></li><li class="service_item service_noframe"><a href="https://o.jd.com/market/index.action" class="service_lk" target="_blank"clstag="h|keycount|head|shortcut_12" aria-label="礼品卡"><i class="service_ico"><!-- 常态 icon --><img class="service_ico_img"src="https://m.360buyimg.com/babel/jfs/t1/70559/5/14202/815/5db79976E1740efb5/b28104e90d667955.png"><!-- hover 态 icon --><img class="service_ico_img_hover"src="https://m.360buyimg.com/babel/jfs/t1/55911/31/402/858/5cd4f23eE6f536460/5da079255c6dfabe.png"></i><span class="service_txt">礼品卡</span></a></li></ul></div><div class="service-pop"><div class="service-content"></div><i class="iconfont close">&#xe685;</i></div></div></div></div></div><div class="seckill"><div class="w"><div class="timing"><img src="./image/3.jpg" alt=""></div><div class="slider-l" id="seckill-slider-l"><div class="item"><div class="slider-item"><img src="./image/4.png" alt=""></div><div class="slider-item"><img src="./image/3.png" alt=""></div><div class="slider-item"><img src="./image/2.png" alt=""></div><div class="slider-item"><img src="./image/pic3.jpg" alt=""></div></div><div class="item"><div class="slider-item"><img src="./image/pic2.jpg" alt=""></div><div class="slider-item"><img src="./image/4.png" alt=""></div><div class="slider-item"><img src="./image/4.png" alt=""></div><div class="slider-item"><img src="./image/4.png" alt=""></div></div><div class="item"><div class="slider-item"><img src="./image/4.png" alt=""></div><div class="slider-item"><img src="./image/4.png" alt=""></div><div class="slider-item"><img src="./image/4.png" alt=""></div><div class="slider-item"><img src="./image/4.png" alt=""></div></div></div><div class="slider-r" id="seckill-slider-r"><imgsrc="https://img12.360buyimg.com/mobilecms/s130x130_jfs/t1/83912/18/12603/40357/5d9ff43eEa6714442/7cf6b5d77cf49b0f.jpg.webp"alt="" /><imgsrc="https://img12.360buyimg.com/mobilecms/s130x130_jfs/t1/103766/1/6275/258290/5df27248E876260d6/37bc6222fb89be7d.png.webp"alt="" /></div></div></div><script src="./jquery-3.3.1.js"></script><script src="./dropdown/index.js"></script><script src="./swiper/index.js"></script><script src="./index.js"></script>
</body></html>

购物车的实现

购物车html

我的购物车

  •         </ul></div></header>
<div id="shopping"><table class="product"><tbody><tr><td><img src="data:images/img_01-1.png"></td><td><p>打不翻的吸盘碗</p><div class="color"><span data-id="10001">粉色</span><span data-id="10002">蓝色</span><spandata-id="10003">黄色</span><span data-id="10004">绿色</span></div></td><td>21.00</td><td><span>-</span><strong>0</strong><span>+</span></td><td><button>加入购物车</button></td></tr><tr><td><img src="data:images/img_02-1.png"></td><td><p>韩式帆布电脑双肩包</p><div class="color"><span data-id="10005">黑色</span><span data-id="10006">青色</span><spandata-id="10007">蓝色</span></div></td><td>227.00</td><td><span>-</span><strong>0</strong><span>+</span></td><td><button>加入购物车</button></td></tr><tr><td><img src="data:images/img_03-1.png"></td><td><p>Carat钻石汤锅24cm</p><div class="color"><span data-id="10008">绿色</span><span data-id="10009">黄色</span><spandata-id="10010">银色</span></div></td><td>78.00</td><td><span>-</span><strong>0</strong><span>+</span></td><td><button>加入购物车</button></td></tr><tr><td><img src="data:images/img_04-1.png"></td><td><p>中筒皮毛一体雪地靴</p><div class="color"><span data-id="10011">栗色</span><span data-id="10012">蓝色</span><spandata-id="10013">紫色</span><span data-id="10014">红色</span></div></td><td>359.00</td><td><span>-</span><strong>0</strong><span>+</span></td><td><button>加入购物车</button></td></tr></tbody></table><table class="selected"><thead><tr><th>已选中商品</th><th colspan="5"><span>应付总额：</span><strong>0.00元</strong></th></tr></thead><tbody><!-- <tr><td><img src="data:images/img_04-1.png" /></td><td><p>中筒皮毛一体雪地靴</p></td><td>红色</td><td>359.00元</td><td>x2</td><td><button>删除</button></td></tr> --></tbody></table>
</div><script src="js/shopping.js"></script>

## 购物车css

.header{width: 100%;height: 50px;background: #e1251b;box-shadow: 10px 12px 13px 1px burlywood;
}
.container{position: relative;width: 1170px;height: 50px;margin: 0px auto;
}
.container .title{display: inline-block;color: black;font-size: 22px;margin-top: 10px;
}
dl,dd,p{margin: 0;
}
table{border-collapse:collapse;
}
th,td{padding:0;
}
input{margin: 0;padding: 0;vertical-align: middle;
}
label{vertical-align: middle;
}
body{font-family: "微软雅黑";
}
img{vertical-align: middle;
}
a{text-decoration: none;
}
.clearfix:after{content: '';display: block;clear: both;
}#shopping{width: 1000px;margin: 100px auto;
}
#shopping table{width: 100%;
}
/* #shopping th{height: 50px;color: #333;font-size: 16px;font-weight: normal;
} */
#shopping img{background: #f4f4f4;border: 1px solid #eaeaea;
}.product{border: 1px solid #ddd;
}
.product tr{border-bottom: 1px dashed #ddd;
}
.product tr:hover,.product tr.active{background: #fffbf0;
}.product td{text-align: center;padding: 15px 0;
}
.product td:nth-of-type(1){width: 180px;
}
.product td:nth-of-type(2){width: 300px;text-align: left;
}
.product td:nth-of-type(5) button{height: 50px;padding: 0 20px;background: #cb4a61;color: #fff;cursor: pointer;border: none;outline: none;
}
.product p{color: #333;font-weight: bold;margin-bottom: 15px;
}.product .color span{display: inline-block;width: 54px;height: 26px;line-height: 26px;text-align: center;color: #666;font-size: 12px;border: 1px solid #ddd;margin-right: 10px;cursor: pointer;box-sizing: border-box;
}.product .color span.active{border:2px solid #b4a078;line-height: 24px;background: url(../images/ico_02.gif) no-repeat right bottom;
}
.product td:nth-of-type(3){color: #d90808;width: 200px;
}
.product td:nth-of-type(4){font-size: 0;width: 200px;
}
.product td:nth-of-type(4) span{width: 24px;height: 24px;display: inline-block;border: 1px solid #ddd;text-align: center;line-height: 24px;font-size: 12px;vertical-align: middle;cursor: pointer;font-size: 14px;
}
.product td:nth-of-type(4) strong{width: 58px;height: 24px;line-height: 24px;display: inline-block;font-size: 12px;text-align: center;vertical-align: middle;border-top: 1px solid #ddd;border-bottom: 1px solid #ddd;
}
.product td:nth-of-type(5){color: #d90808;width: 200px;
}.selected{border: 1px solid #ddd;margin-top: 30px;
}
.selected thead{background: #f5f5f5;border: 1px solid #ddd;
}
.selected th{height: 50px;
}
.selected th span,.selected th strong{vertical-align: middle;
}
.selected th strong{color: #d90808;font-size: 24px;
}
.selected tbody{font-size: 14px;color: #999;
}
.selected tr{border-bottom: 1px dashed #ddd;
}
.selected td{text-align: center;padding: 15px 0;
}

购物车js

/*获取本地存储，选中商品的详细信息1、这个变量只有一个，别的地方也都有用，所以要在全局声明。2、这个变量的值要先去取本地存储，因为从第二次操作时候本地存储就已经有值了，这些值是要变成DOM展示出来的3、千万不能单声明一个空对象，那样的话再次添加的时候会清空已有的4、第一次取到的结果为null，所以做一个容错处理5*/
var selectData={};
function init() {// var selectData={};selectData = JSON.parse(localStorage.getItem('shoppingCart')) || {};// console.log(selectData);createSelectDom();addEvent();
}
init();//添加商品操作事件
function addEvent() {var trs = document.querySelectorAll(".product tr");           //表格行for (var i = 0; i < trs.length; i++) {action(trs[i],i);}//具体处理逻辑function action(tr,n) {var tds = tr.children,  //当前行里的tdimg = tds[0].children[0], //商品图片imgSrc = img.getAttribute('src'),  //商品图片地址name = tds[1].children[0].innerHTML,    //商品名称colors = tds[1].children[1].children, //颜色按钮price = tds[2],     //单价（在第3个td里）spans = tds[3].querySelectorAll('span'),    //加减按钮（在第4个td里）strong = tds[3].querySelector('strong'),  //数量（一行只有一个）joinBtn = tds[4].children[0],    //加入购物车按钮slectNum = 0;//颜色按钮点击var last = null;var colorValue = '';var colorId = '';for (var i = 0; i < colors.length; i++) {colors[i].index = i;colors[i].onclick = function () {last && last != this && (last.className = '');this.className = this.className ? '' : 'active';  //colorValue = this.className ? this.innerHTML : '';colorId = this.className ? this.dataset.id : '';imgSrc = this.className ? 'images/img_0' + (n + 1) + '-' + (this.index + 1) + '.png' : 'images/img_0' + (n + 1) + '-1.png';   //更新图片地址img.src = imgSrc;//清空选中的数量strong.innerHTML = slectNum = 0;last = this;}}//减按钮点击功能spans[0].onclick = function () {slectNum--;if (slectNum < 0) {slectNum = 0;}strong.innerHTML = slectNum;};//加按钮点击功能spans[1].onclick = function () {slectNum++;strong.innerHTML = slectNum;};//加入购物车点击joinBtn.onclick = function () {if (!colorValue) {alert('请选颜色');return;}if (!slectNum) {alert('请添加购买数量');return;}selectData[colorId] = {"id": colorId, //用于删除的时候取到对应的数据"name": name,"color": colorValue,"price": parseFloat(price.innerHTML),"num": slectNum,"img": imgSrc,'time': new Date().getTime(),   //为了排序};localStorage.setItem('shoppingCart', JSON.stringify(selectData));img.src = 'images/img_0' + (n + 1) + '-1.png';last.className = '';strong.innerHTML = slectNum = 0;createSelectDom(); //存储完就渲染购物车的商品结构};}
}//创建购物车商品结构
function createSelectDom() {var tbody = document.querySelector('.selected tbody');var totalPrice = document.querySelector('.selected th strong');var str = '';var total = 0;  //共多少钱console.log(selectData);var goods = Object.values(selectData);console.log(goods);//排序，让后选的排在上面goods.sort(function (g1, g2) {return g2.time - g1.time;});tbody.innerHTML = '';   //先清空一下for (var i = 0; i < goods.length; i++) {str += '<tr>' +'<td>' +'<img src="' + goods[i].img + '" />' +'</td>' +'<td>' +'<p>' + goods[i].name + '</p>' +'</td>' +'<td>' + goods[i].color + '</td>' +'<td>' + goods[i].price * goods[i].num + '.00元</td>' +'<td>x' + goods[i].num + '</td>' +'<td><button data-id="' + goods[i].id + '">删除</button></td>' +'</tr >';total += goods[i].price * goods[i].num;}tbody.innerHTML = str;totalPrice.innerHTML = total + '.00元';del();
}//删除功能
function del() {var btns = document.querySelectorAll('.selected tbody button');var tbody = document.querySelector('.selected tbody');for (var i = 0; i < btns.length; i++) {btns[i].onclick = function () {delete selectData[this.dataset.id];   //删除属性//console.log(selectData);localStorage.setItem('shoppingCart', JSON.stringify(selectData));   //更新本地存储tbody.removeChild(this.parentNode.parentNode);  //删除DOM结构//更新价格var totalPrice = document.querySelector('.selected th strong');totalPrice.innerHTML=parseFloat(totalPrice.innerHTML)-parseFloat(this.parentNode.parentNode.children[3].innerHTML)+'.00元';};}
}window.addEventListener('storage', init);

轮播图dropdown

(function () {function Dropdown(options, wrap) {this.wrap = wrap;this.width = options.width;this.widthCol = options.widthCol;this.justifyContent = options.justifyContent || 'start';this.menuList = options.menuList || [];this.direction = options.direction || 'y';this.init = function () {this.createDom();this.initStyle();}}Dropdown.prototype.createDom = function () {var dropdownDiv = $('<div class="my-dropdown"></div>');this.menuList.forEach(function (menuDl, index) {var oDl = $('<dl></dl>');if (menuDl.title) {$('<dt></dt>').text(menuDl.title).appendTo(oDl);}menuDl.items.forEach(function (item) {$('<dd><a href="' + item.href + '">' + item.name + '</a></dd>').appendTo(oDl)})dropdownDiv.append(oDl);})$(this.wrap).append(dropdownDiv)}Dropdown.prototype.initStyle = function () {$('.my-dropdown', this.wrap).css({width: this.width})$('.my-dropdown > dl > dd', this.wrap).css({width: this.widthCol})if (this.justifyContent == 'end') {$('.my-dropdown', this.wrap).css({right: -1,left: 'auto',})}if (this.direction == 'x') {$('.my-dropdown', this.wrap).css({right: -84,left: 'auto',padding: '15px 0'}).find('dl').css({float: 'left'});for (var i = 0; i < this.menuList.length; i++) {$('.my-dropdown', this.wrap).find('dl').css({width: this.menuList[i].width,borderLeft: '1px solid #eee',borderBottom: 'none'}).find('dd').css({width: this.menuList[i].widthCol,});}}}$.fn.extend({addDropdown: function (options) {var obj = new Dropdown(options, this);obj.init()}})
} ())

web期末实验 自选 京东网站相关推荐

  1. web期末设计 自选3 明日方舟网站

    web设计 自选3 明日方舟网站 首页 <!DOCTYPE html> <html lang="en"><head><meta chars ...

  2. 分享java web 期末项目实验源码20套，BBS论坛，ERP管理系统，OA自动化等等

    分享java web 期末项目实验源码20套,BBS论坛,ERP管理系统,OA自动化等等 我自己也从里面学习到了很多东西! 1.BBS论坛系统(jsp+sql) 2.ERP管理系统(jsp+servl ...

  3. HTML5期末大作业：网站——响应式网络游戏官网HTML+CSS+JavaScript ~ 学生HTML个人网页作业作品下载 ~ web课程设计网页规划与设计 ~大学生个人网站作业模板 ~简单个人网页

    HTML5期末大作业:网站--响应式网络游戏官网HTML+CSS+JavaScript ~ 学生HTML个人网页作业作品下载 ~ web课程设计网页规划与设计 ~大学生个人网站作业模板 ~简单个人网页 ...

  4. HTML5期末大作业：网站——卡通漫画游戏官方网页 (萌王) 13个页面 HTML+CSS+JavaScript ~ 学生HTML个人网页作业作品下载 ~ web课程设计网页规划与设计

    HTML5期末大作业:HTML5期末大作业:网站--卡通游戏官方网页 (萌王)HTML+CSS+JavaScript ~ 学生HTML个人网页作业作品下载 ~ web课程设计网页规划与设计 ~大学生个 ...

  5. java实验项目代码_java web 期末项目实验源码20套，自用学习非常不错！

    分享java web 期末项目实验源码20套,自用学习非常不错! 我自己也从里面学习到了很多东西! 1.BBS论坛系统(jsp+sql) 2.ERP管理系统(jsp+servlet) 3.OA办公自动 ...

  6. HTML5期末大作业：网站——个人网站介绍 (7页面带轮播特效)明星赵丽颖 学生DW网页设计作业源码 web课程设计网页规划与设计 大学生个人网站作业模板

    HTML5期末大作业:网站--个人网站介绍 (7页面带轮播特效)明星赵丽颖 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合 ...

  7. HTML5期末大作业：英雄联盟网站设计——英雄联盟LOL(4页) HTML+CSS+JavaScript web期末网站设计大作业

    HTML5期末大作业:英雄联盟网站设计--英雄联盟LOL(4页) HTML+CSS+JavaScript web期末网站设计大作业 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商 ...

  8. HTML5期末大作业：宠物之家网站设计——代码质量好宠之家(5页) HTML+CSS+JavaScript web期末作业设计网页

    HTML5期末大作业:宠物之家网站设计--代码质量好宠之家(5页) HTML+CSS+JavaScript web期末作业设计网页 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商 ...

  9. HTML5期末大作业：京东网站设计——仿2016版京东首页(1页) HTML+CSS+JavaScript 大学生网页作品 电商网页设计作业模板 学生网页制作源代码下载

    HTML5期末大作业:京东网站设计--仿2016版京东首页(1页) HTML+CSS+JavaScript 大学生网页作品 电商网页设计作业模板 学生网页制作源代码下载 常见网页设计作业题材有 个人. ...

最新文章

  1. Planetary Science and Life in the Universe
  2. Qt for Android解决启动时黑屏（或白屏）的问题
  3. Linux 监控命令 iostat
  4. uart口图片_uart 加强了的串口调试助手，可以自动记录传输数据，并且显示图片，示波器等功能 Com Port 编程 267万源代码下载- www.pudn.com...
  5. 机器视觉 光学工程专业_瑞士Idonus MEMS制造设备 创新技术 机器视觉测量（远心光学）...
  6. 第一次使用博客及Coursera课程体验
  7. 如何将jar包加入到Maven本地仓库
  8. GPS精确授时方法研究-基于ublox GPS
  9. 增加项目报告功能，支持与TAPD、Jira、禅道双向同步缺陷，MeterSphere开源持续测试平台v1.15.0发布
  10. 配置ouster雷达过程
  11. python，在格式化字符串中使用半个大括号
  12. 电信网通证实台湾地震影响内地访问国际网站(12月27日)
  13. 程序员写了个开源软件，完成了舔狗的绝地反杀...
  14. Bob，我要怎样才能成为一名 iOS 开发者
  15. 数据、元数据、数据库、数据仓库、数据中心、数据中台、业务中台 、（垂直数据中心、全域数据中心（公共数据中心）、萃取数据中心）
  16. 贝加莱PLC编程总结
  17. 韩云 计算机世界,韩云计算机辅助工艺过程设计.ppt
  18. PHP程序员面试经历分享，做好开发软件工作要做到这几点
  19. C语言实现求解斐波那契数列的四种方法及优化处理（递归，迭代，特殊性质公式，矩阵快速幂）
  20. 让小屏幕kindlePaperWhite2支持PDF

热门文章

  1. JSD-2204-配置Java环境变量-安装idea-Java语言基础-Day01
  2. html中加一个边框,用HTML代码制作边框（上）
  3. 蝉知CMS本地迁移到服务器具体步骤
  4. 中高级测试工程师68道面试题
  5. 和12岁小同志搞创客开发：有意思的激光切割技术
  6. 北师大 外国教育史-7（进步主义教育运动）
  7. 卸载jdk(JAVA开发环境)
  8. python对象方法 反射
  9. 【Chrome+selenium】使用selenium时报错显示，如何查看Chrome 版本并安装相对应的webdriver 驱动
  10. 谷歌浏览器书签栏书签丢失问题