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 © 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"></i>
</a>`).appendTo(tabsDiv)
});
data.subs.forEach(function (sub) {
var oDl = $('<dl></dl>');
$(`<dt><a href="#">电视
<i class="iconfont"></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"></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"></i>
</li>
<li class="spacer"></li>
<li id="service" class="dropdown">
<a href="#">客户服务</a>
<i class="iconfont"></i>
</li>
<li class="spacer"></li>
<li id="bar-navs" class="dropdown">
<a href="#">网站导航</a>
<i class="iconfont"></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"></button>
</div>
<ul id="search-box"></ul>
</div>
<div class="settleup">
<i class="iconfont"></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">
<img
src="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"></i>
</a>
<a href="#">家电专卖店
<i class="iconfont"></i>
</a>
<a href="#">家电服务
<i class="iconfont"></i>
</a>
<a href="#">企业采购
<i class="iconfont"></i>
</a>
<a href="#">商业服务
<i class="iconfont"></i>
</a> -->
</div>
<div class="detail">
<!-- <dl>
<dt>
<a href="#">电视
<i class="iconfont"></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&ev=4155_76344&sort=sort_rank_asc&trans=1&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&ev=4155_97865&sort=sort_rank_asc&trans=1&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&ev=4155_100812&sort=sort_rank_asc&trans=1&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&ev=4155_88234&sort=sort_rank_asc&trans=1&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&ev=4155_122030" class="cate_detail_con_lk" target="_blank">智慧屏</a><a href="//list.jd.com/list.html?cat=737,794,798&ev=4155_110018&sort=sort_rank_asc&trans=1&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&ev=244_1486&sort=sort_rank_asc&trans=1&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&ev=244_58269&sort=sort_rank_asc&trans=1&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"></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&ev=1554_584893&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&ev=1554_584894&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"></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&ev=998_605429&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&ev=998_5006&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&ev=998_5005&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&ev=998_77402&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">
<img
src="https://img20.360buyimg.com/babel/s590x470_jfs/t1/105258/39/5383/98045/5dedbd1bEbcd2cd83/d83ee98d128c006e.jpg.webp"
alt="" />
<img
src="https://img12.360buyimg.com/pop/s590x470_jfs/t1/102498/1/6201/69252/5df205ddE9ef307ee/49d6fb8555873342.jpg.webp"
alt="" />
<img
src="https://img20.360buyimg.com/pop/s590x470_jfs/t1/106050/5/7033/72549/5df99388Ed5c1018a/6eb231965d4b0432.jpg.webp"
alt="" />
<img
src="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><a
href="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><a
href="https://ccc-x.jd.com/dsp/nc?ext=aHR0cHM6Ly9wcm8uamQuY29tL21hbGwvYWN0aXZlLzNSVDlua25hbmc0MjFmWjhjZXM0V1ZDOThibUsvaW5kZXguaHRtbA&log=yIWFf_DsBrchR_DAr1eeTcQ-JGhpO3I5OlkCe5y0_0Shs3GY62L2TRCVUEJsgQ3l_0KJb5LD5sKJSCQer9XfM8tb__6rw6Fv3PwdCivN6tUKKWIZ93FVpX4XKUKi75wZd8YdAyqkVi86uD4N-qFOgXiPvXwu_odwjrsl1XaX4NY1bSQhC5Frrs5OsdpZ1C2KLwWge8vdCcytcpEKMm3SP1iGdJ9I4AUlLRXKJdnpdC4JrmHKjgM904fHGFg5FSisl-AOEYCEYf68xUMArMVbuwb0bPxiBtMKPpO-KghGzPhj1xLFwIhQ0IHz3Ki8cOoxXAvYtamRH5l59ccD3sRhegc-stepOjkH5W_O44DJbYbBoLd32J5ncCw_WKRJQ2g3EicgdlGVCIf7lFfsDlUoQTeVl55DsY2g022IP7g4y0UwdwKxUBOzRcElvgjosaPVsZlmkC4ZpzT0r4EB2cJRJKWamasHaKuXeh1WVAIYqeD1C6oyyxSAiWRi-7tYIJ93fscsoeGdPukyQNS9w1ZZkbYIzv93-KZsohLmc0bEnJZHinD4z-KK0EkI_UUbsMFpZJ6TQaFRALLnXuAytGgH_B55S5kAjDiVt0NTuIyywVwUNaGZd1ZG-UbRdIqiYGpDm5Qsa8OZjwH_Lg3TFZM0ZDkY_oRKVsG70SV5rBMB900&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><a
href="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><a
href="https://ccc-x.jd.com/dsp/nc?ext=aHR0cHM6Ly9wcm8uamQuY29tL21hbGwvYWN0aXZlLzNSVDlua25hbmc0MjFmWjhjZXM0V1ZDOThibUsvaW5kZXguaHRtbA&log=yIWFf_DsBrchR_DAr1eeTcQ-JGhpO3I5OlkCe5y0_0Shs3GY62L2TRCVUEJsgQ3l_0KJb5LD5sKJSCQer9XfM8tb__6rw6Fv3PwdCivN6tUKKWIZ93FVpX4XKUKi75wZd8YdAyqkVi86uD4N-qFOgXiPvXwu_odwjrsl1XaX4NY1bSQhC5Frrs5OsdpZ1C2KLwWge8vdCcytcpEKMm3SP1iGdJ9I4AUlLRXKJdnpdC4JrmHKjgM904fHGFg5FSisl-AOEYCEYf68xUMArMVbuwb0bPxiBtMKPpO-KghGzPhj1xLFwIhQ0IHz3Ki8cOoxXAvYtamRH5l59ccD3sRhegc-stepOjkH5W_O44DJbYbBoLd32J5ncCw_WKRJQ2g3EicgdlGVCIf7lFfsDlUoQTeVl55DsY2g022IP7g4y0UwdwKxUBOzRcElvgjosaPVsZlmkC4ZpzT0r4EB2cJRJKWamasHaKuXeh1WVAIYqeD1C6oyyxSAiWRi-7tYIJ93fscsoeGdPukyQNS9w1ZZkbYIzv93-KZsohLmc0bEnJZHinD4z-KK0EkI_UUbsMFpZJ6TQaFRALLnXuAytGgH_B55S5kAjDiVt0NTuIyywVwUNaGZd1ZG-UbRdIqiYGpDm5Qsa8OZjwH_Lg3TFZM0ZDkY_oRKVsG70SV5rBMB900&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;">
<button style="border-radius: 10px;background-color: #e1251b;border: none;height: 30px;color: #333;outline: none;"> 登录</button>
<button style="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"></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">
<img
src="https://img12.360buyimg.com/mobilecms/s130x130_jfs/t1/83912/18/12603/40357/5d9ff43eEa6714442/7cf6b5d77cf49b0f.jpg.webp"
alt="" />
<img
src="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
.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, //当前行里的td
img = 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()
}
})
} ())
扫一扫
4876
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
