Web前端-综合网站设计
一、综合网站整体描述
综合网站主要包括五个页面，主页、列表页、详情页、购物车页、注册页
1．主页: 二级菜单、轮播图、Tab显示、克隆、电梯导航
2．列表页：Tab显示、手风琴效果
3. 详细页：数量加减、金额同步、评论发布与删除
4．购物车：数量加减、小计同步、总计计算、单选与全选
5. 注册页：表单与验证
二、综合网站各页面的描述
主页包括二级菜单、轮播图、内容、活动及电梯导航，内容部分单击左侧，右侧同步变换，双击活动部分的标题行，克隆下方的活动列表，图片和活动序号自增（从123到456）。设置一个电梯导航，当滚轮滚到最顶部时，电梯导航隐藏；当滚轮滚动到菜单及以下部分时，电梯导航显示；随着滚轮滚到对应的位置，电梯导航显示对应标题的背景色改变；点击电梯导航的标题，其背景色改变，页面内容也会显示到与标题对应的位置。
列表页的顶部和底部与主页相同，左侧是网站的主题和图片的内容标题，右侧是标题具体内容，点击相应内容，内容自动跳转，下方设置一个手风琴样式。
详情页的顶部和底部与主页相同，是网页产品的详情信息页。有着产品的特点、功能、细节以及实物展示。顶部为产品介绍；左侧为实物图片；右侧有着产品的详细信息包括名称、价格等。可以选择购买的数量，单击“+”或“-”按钮，数量会增加或减少，也可以文本输入数量，下面的总金额会随之改变；单击重置按钮会使数量变为1，总金额变成单个数量的金额。可进行微博发布功能，输入微博内容，单击发布按钮以后，会在下方呈现，单击删除可将其单行数据删除。单击清空按钮会将所有内容全部清空。
购物车页的顶部和底部与主页相容，是网页全部产品的展示页。左侧为产品图片与名称，右侧为数量与金额。右下角会显示所选产品的数量以及总金额。勾选产品后背景色会随之改变。当未勾选产品时进行数量的增加或减少只有小计的金额随之改变总计不变，勾选中产品再进行数量的增加或减少时小计与总计都会随之改变。单击“全选”按钮会勾选所有产品，再次单击会取消勾选；单击“删除选中的商品”的按钮，选中商品的所有内容被删除；单击“清理购物车”，购物车中所有的商品内容被删除。
注册页的顶部和底部与主页相同，是网页的登陆注册页。左侧为图片展示右侧则是注册表。其注册信息包括：姓名、密码、性别、爱好、照片选择、电子邮箱、出生日期、学历以及个人描述。未输入姓名密码时会提示：非空，长度六位以上。当输入格式正确时会显示：输入正确。性别只能选择一个，爱好可以进行多选。未输入电子邮箱时会提示：输入正确的电子邮箱格式。输入正确后会变为绿色字体的：输入正确提示。设有重置按钮，当单击时会清空所有选择以及填写记录。单击选择文件按钮，选择所需的图片文件，读取图片，实现当用户选择图片文件后，将该图片显示在网页上。
三、部分代码展示
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>校园网站</title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<script src="js/jquery-1.12.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/电梯导航.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/listImg.css"/>
<script src="js/listImg.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="top" class="right rightCss r1">
<iframe src="top.html" width="100%" height="100px" scrolling="no"></iframe>
</div>
<div id="menu" class="right rightCss r2">
<iframe src="menu.html" width="100%" height="100px" scrolling="no" ></iframe>
</div>
<div id="img" class="right rightCss r3">
<iframe src="bigImg.html" width="100%" height="400px" scrolling="no" marginwidth="0" marginheight="0"></iframe>
</div>
<div id="content" class="right rightCss r4">
<iframe src="content.html" width="100%" height="450px" scrolling="no"></iframe>
</div>
<div id="listImg" class="right rightCss r5">
<!-- <iframe src="listImg.html" width="100%" height="240px" scrolling="no"></iframe> -->
<div id="listImg">
<div id="listJpg">
<li id="clone" style="height: 10px; list-style: none;">校园活动</li>
<div id="one" class="rotateImg">
<a href="https://blog.csdn.net/" target="_blank">
<img src="img/p01.jpg" alt="">
</a>
<li>校园活动1</li>
</div>
<div id="two" class="rotateImg">
<a href="https://www.bilibili.com/video/BV1a4411w7Gx/?p=16">
<img src="img/p02.jpg" alt="">
</a>
<li>校园活动2</li>
</div>
<div id="three" class="rotateImg">
<a href="">
<img src="img/p03.jpg" alt="">
</a>
<li>校园活动3</li>
</div>
</div>
</div>
</div>
<div id="bottom" class="right rightCss r6">
<iframe src="bottom.html" width="100%" height="100px" scrolling="no" marginwidth="0" marginheight="0"></iframe>
</div>
<div class="left">
<ul class="leftBar">
<li class="current">顶部</li>
<li>菜单</li>
<li>图片</li>
<li>内容</li>
<li>图像列表</li>
<li>底部</li>
</ul>
</div>
</body>
</html>
top.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>顶部</title>
<link rel="stylesheet" type="text/css" href="css/top.css"/>
</head>
<body>
<div id="top">
<div id="top">
<div id="left">
<img src="img/the.jpg" width="300px" height="100px" style="padding-left: 0px;padding-top: 0px;">
<!-- <img src="img/logo_back.gif" > -->
</div>
<div id="right">
<ul>
<li><a href="">网站首页</a></li>
<li><a href="">行业动态</a></li>
<li style="border-right: 0px;"><a href="">联系我们</a></li>
</ul>
<input type="text" name="" id="" value="" />
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜单</title>
<link rel="stylesheet" type="text/css" href="css/menu.css"/>
<script src="js/jquery-1.12.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/menu.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="menu">
<ul>
<li style="margin-left: 200px;">首页</li>
<li>
<a>新闻公告</a>
<ul class="menu1">
<li>
<a href="http://www.baidu.com" target="_blank">校内新闻</a>
</li>
</ul>
</li>
<li>
<a>课程中心</a>
<ul class="menu1">
<li>
<a href="http://127.0.0.1:5500/%E9%A6%96%E9%A1%B52.html" target="_blank">列表页</a>
</li>
</ul>
</li>
<li>
<a>教学案例</a>
<ul class="menu1">
<li>
<a href="http://127.0.0.1:5500/%E9%A6%96%E9%A1%B53.html" target="_blank">注册表</a>
</li>
</ul>
</li>
<li>
<a>资源购买中心</a>
<ul class="menu1">
<li><a href="http://127.0.0.1:5500/%E9%A6%96%E9%A1%B5.html" target="_blank">购物车</a></li>
</ul>
</li>
<li>
<a>发展中心</a>
<ul class="menu1">
<li>
<a href="http://127.0.0.1:5500/%E9%A6%96%E9%A1%B51.html" target="_blank">微博</a>
</li>
</ul>
</li>
</ul>
<div id="two">
<ul>
<li style="margin-left: 600px;">公共必修</li>
<li>创新创业</li>
<li>成长基础</li>
<li>考研辅导</li>
</ul>
</div>
</div>
</body>
</html>
bigImg.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
<link rel="stylesheet" type="text/css" href="css/bigImg.css"/>
<script src="js/jquery-1.12.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bigImg.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="content">
<!-- <div id="imgLeft">
<button type="button" id="addImg">增加</button>
<button type="button" id="subImg">减少</button>
<input type="text" name="imgNum" id="imgNum" value="5" style="width: 50px;">
</div> -->
<div id="imgMiddle">
<ul id="imgs">
<li class="item">1</li>
<li class="item">2</li>
<li class="item imgShow">3</li>
<li class="item">4</li>
<li class="item imgShow">5</li>
</ul>
<button type="button" class="btn" id="goLeft"> << </button>
<button type="button" class="btn" id="goRight"> >> </button>
<ul id="ulNum">
<li class="num">1</li>
<li class="num">2</li>
<li class="num">3</li>
<li class="num">4</li>
<li class="num numShow">5</li>
</ul>
</div>
</div>
</body>
</html>
listImg.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
<link rel="stylesheet" type="text/css" href="css/bigImg.css"/>
<script src="js/jquery-1.12.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bigImg.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="content">
<!-- <div id="imgLeft">
<button type="button" id="addImg">增加</button>
<button type="button" id="subImg">减少</button>
<input type="text" name="imgNum" id="imgNum" value="5" style="width: 50px;">
</div> -->
<div id="imgMiddle">
<ul id="imgs">
<li class="item">1</li>
<li class="item">2</li>
<li class="item imgShow">3</li>
<li class="item">4</li>
<li class="item imgShow">5</li>
</ul>
<button type="button" class="btn" id="goLeft"> << </button>
<button type="button" class="btn" id="goRight"> >> </button>
<ul id="ulNum">
<li class="num">1</li>
<li class="num">2</li>
<li class="num">3</li>
<li class="num">4</li>
<li class="num numShow">5</li>
</ul>
</div>
</div>
</body>
</html>
content.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内容</title>
<link rel="stylesheet" type="text/css" href="css/content.css"/>
<script src="js/jquery-1.12.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/content.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="content">
<div id="leftContent">
<div id="first">
<img src="img/text-image.jpg" alt="" width="100%" height="100px">
</div>
<ul id="mid">
<li>课前5分钟</li>
<li>思政学习</li>
<li>html强化</li>
<li>css规范</li>
<li>德育教育</li>
</ul>
<div id="final" class="text">
<input type="text" name="" id="" value="" />
<img src="img/search_btn.gif" alt="">
</div>
</div>
<div id="rightContent">
<br>
<h2>新闻公告</h2>
<div id="title">
<a>类型 标题 </a><span>日期</span>
</div>
<div id="tent">
<ul>
<li>
<a href="">1 [新闻] 推动高校思想政治教育实践走深走实</a><span>2021-08</span>
</li>
<li><a href="">2 [新闻] 扎实做好新时代思想政治工作</a><span>2021-09</span></li>
<li><a href="">3 [公告] 思政课是落实立德树人根本任务的关键课程</a><span>2020-08</span></li>
<li><a href="">4 [新闻] 关于新时代加强和改进思想政治工作的意见</a><span>2021-08</span></li>
<li><a href="">5 [公告] 课程思政建设内容要紧紧围绕坚定学生理想信念</a><span>2020-05</span></li>
<li><a href="">6 [新闻] 全面推进“大思政课”建设</a><span>2020-07</span></li>
<li><a href="">7 [新闻] 着力推动思想政治工作贯通人才培养体系</a><span>2023-02</span></li>
</ul>
</div>
<div id="right">
<ul id="rightUl">
<li class="imghide"><img src="img/p09.jpg" ></li>
<li class="imghide"><img src="img/p010.jpg" ></li>
<li class="imghide"><img src="img/p011.jpg" ></li>
<li class="imghide"><img src="img/p012.jpg" ></li>
<li class="imghide"><img src="img/p013.jpg" ></li>
</ul>
</div>
</div>
</div>
</body>
</html>
购物车.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>购物车</title>
<!-- <meta name="description" content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购" /> -->
<!-- 引入facicon.ico网页图标 -->
<!-- <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> -->
<!-- 引入css 初始化的css 文件 -->
<link rel="stylesheet" href="css/base.css">
<!-- 引入公共样式的css 文件 -->
<link rel="stylesheet" href="css/common.css">
<!-- 引入car css -->
<link rel="stylesheet" href="css/car.css">
<!-- 先引入jquery -->
<script src="js/jquery.min.js"></script>
<!-- 在引入我们自己的js文件 -->
<script src="js/购物车.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- <div class="car-header">
<div class="w">
<div class="car-logo">
<b>购物车</b>
</div>
</div>
</div> -->
</div>
<div class="c-container">
<div class="w">
<div class="cart-filter-bar">
<em>全部商品</em>
</div>
<!-- 购物车主要核心区域 -->
<div class="cart-warp">
<!-- 头部全选模块 -->
<div class="cart-thead">
<div class="t-checkbox">
<input type="checkbox" name="" id="" class="checkall"> 全选
</div>
<div class="t-goods">商品</div>
<div class="t-price">单价</div>
<div class="t-num">数量</div>
<div class="t-sum">小计</div>
<div class="t-action">操作</div>
</div>
<!-- 商品详细模块 -->
<div class="cart-item-list">
<div class="cart-item check-cart-item">
<div class="p-checkbox">
<input type="checkbox" name="" id="" checked class="j-checkbox">
</div>
<div class="p-goods">
<div class="p-img">
<img src="img/book1.jpg" alt="">
</div>
<div class="p-msg">人间值得原版书 正版 以自己喜欢的方式过一生成长励志书初高中生</div>
</div>
<div class="p-price">￥17.29</div>
<div class="p-num">
<div class="quantity-form">
<a href="javascript:;" class="decrement">-</a>
<input type="text" class="itxt" value="1">
<a href="javascript:;" class="increment">+</a>
</div>
</div>
<div class="p-sum">￥17.29</div>
<div class="p-action"><a href="javascript:;">删除</a></div>
</div>
<div class="cart-item">
<div class="p-checkbox">
<input type="checkbox" name="" id="" class="j-checkbox">
</div>
<div class="p-goods">
<div class="p-img">
<img src="img/book2.jpg" alt="">
</div>
<div class="p-msg">城南旧事正版 林海音原著艺术再现 中小学生课外阅读文学名著小说</div>
</div>
<div class="p-price">￥24.80</div>
<div class="p-num">
<div class="quantity-form">
<a href="javascript:;" class="decrement">-</a>
<input type="text" class="itxt" value="1">
<a href="javascript:;" class="increment">+</a>
</div>
</div>
<div class="p-sum">￥24.80</div>
<div class="p-action"><a href="javascript:;">删除</a></div>
</div>
<div class="cart-item">
<div class="p-checkbox">
<input type="checkbox" name="" id="" class="j-checkbox">
</div>
<div class="p-goods">
<div class="p-img">
<img src="img/book3.jpg" alt="">
</div>
<div class="p-msg">平凡的世界路遥正版原著精华版茅盾文学作品初高中年级课外阅读书</div>
</div>
<div class="p-price">￥29.80</div>
<div class="p-num">
<div class="quantity-form">
<a href="javascript:;" class="decrement">-</a>
<input type="text" class="itxt" value="1">
<a href="javascript:;" class="increment">+</a>
</div>
</div>
<div class="p-sum">￥29.80</div>
<div class="p-action"><a href="javascript:;">删除</a></div>
</div>
</div>
<!-- 结算模块 -->
<div class="cart-floatbar">
<div class="select-all">
<input type="checkbox" name="" id="" class="checkall">全选
</div>
<div class="operation">
<a href="javascript:;" class="remove-batch"> 删除选中的商品</a>
<a href="javascript:;" class="clear-all">清理购物车</a>
</div>
<div class="toolbar-right">
<div class="amount-sum">已经选<em>1</em>件商品</div>
<div class="price-sum">总价： <em>￥17.29</em></div>
<div class="btn-area">去结算</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>手风琴.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>手风琴</title>
<link rel="stylesheet" type="text/css" href="css/手风琴.css"/>
<script src="js/jquery-1.12.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/手风琴.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- 创建盒子存放元素 -->
<div class="bigbox">
<!-- 盒子里创建ul存放每一个li小块 -->
<ul>
<!-- 利用li存放俩张图片 -->
<!-- 思路：鼠标移动到li上，让li的大图显示，小图隐藏 -->
<li class="current">
<a href="#">
<img src="images/11.jpg" alt="" class="small">
<img src="images/1.jpg" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/22.jpg" alt="" class="small">
<img src="images/2.jpg" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/33.jpg" alt="" class="small">
<img src="images/3.jpg" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/44.jpg" alt="" class="small">
<img src="images/4.jpg" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/55.jpg" alt="" class="small">
<img src="images/5.jpg" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/66.jpg" alt="" class="small">
<img src="images/6.jpg" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/77.jpg" alt="" class="small">
<img src="images/7.jpg" alt="" class="big">
</a>
</li>
</ul>
</div>
</body>
</html>
首页1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>详细页微博</title>
<link rel="stylesheet" type="text/css" href="css/首页1.css"/>
</head>
<body>
<div id="top">
<iframe src="top.html" width="100%" height="100px" scrolling="no"></iframe>
</div>
<div id="menu">
<iframe src="menu.html" width="100%" height="100px" scrolling="no"></iframe>
</div>
<div id="content1">
<iframe src="微博.html" width="100%" height="750px" scrolling="no"></iframe>
</div>
<div id="bottom">
<iframe src="bottom.html" width="100%" height="100px" scrolling="no" marginwidth="0" marginheight="0"></iframe>
</div>
</body>
</html>
注册表.css
#right{
width: 33%;
height: 600px;
/* border: 1px solid lightpink; */
background: white;
float: right;
}
#divCss{
line-height: 25px;
padding: 10px;
background:#e5f9ff;
width: 500px;
margin: auto;
margin-left: 680px;
margin-top: 80px;
border: 1px solid gray;
}
#divCss p{
margin: 10px;
}
#divCss label{
padding-left: 10px;
width: 30px;
}
#divCss .inputCSS{
width: 200px;
height: 30px;
border: 1px solid darkred;
}
form{
position: relative;
}
.formImg{
position: absolute;
top:1px;
right: 10px;
}
.formImg img{
width: 120px;
height: 160px;
border: 3px solid gray;
}
#divCss textarea{
width: 480px;
height: 100px;
}
.btnCSS{
width: 80px;
height: 40px;
padding: 10px;
background: lightskyblue;
}
/*验证用样式*/
.high{ color: red; }
.msg{ font-size: 13px; position: relative; z-index: 999;}
.onError{ color: red; }
.onSuccess{ color: green; }
#img1 img{
float: left;
width: 50%;
height: 400px;
margin-left: 40px;
margin-top: 70px;
}微博.css
.box{
width: 450px;
height: 600px;
border: 1px solid gray;
margin: 0 auto;
padding-left: 25px;
overflow-y: auto;/* 溢出在y方向上加滚动条 */
margin-left: 700px;
}
ul li{
line-height: 25px;
/* width: 400px; */
border-bottom: 2px solid gray;
/*display: none;*/
}
ul li a{
float: right;
}
#leftImg img{
float: left;
width: 50%;
height: 400px;
margin-left: 20px;
}
.decrement,
.increment {
border: 1px solid #cacbcb;
color: #666;
background: #cacbcb;
text-decoration: none;
display: inline-block;
width: 20px; /* 设置宽度 */
height: 20px; /* 设置高度 */
text-align: center; /* 文本居中 */
line-height: 20px; /* 行高与高度相同，使文本垂直居中 */
vertical-align: middle; /* 垂直居中 */
}
电梯导航.js
//显示隐藏左侧按钮
//进入就执行显示与隐藏，解决在下方显示时刷新。，左侧按钮不显示问题
//互斥锁
$(document).ready(function() {
var flag=true;
toggTool()
//滚动函数
function toggTool(){
if($(document).scrollTop()>=rightTop)
{
$(".left").fadeIn();
}else{
$(".left").fadeOut();
}
}
var rightTop=$(".r1").offset().top;
$(window).scroll(function(){
toggTool();
//滚动页面时，左侧按钮同时改变颜色
if(flag){
$(".rightCss").each(function(i,e){
if($(document).scrollTop()>=$(e).offset().top){
$('.leftBar>li').eq(i).addClass("current").siblings().removeClass("current")
}
})
}
})
//单击左侧的小盒子，右侧滚动到相应位置
//1. 获取当前左侧按钮的索引号
//2. 计算右侧该索引号div的顶部位置
//3. 页面滚动时，将移动块的顶部值赋值
$('.leftBar>li').click(function(){
flag=false;
var num=$(this).index();
var rPosition=$(".rightCss").eq(num).offset().top;
//每次单击后，滚动一次页面。每次滚动均触发$(window).scroll事件
$("body,html").stop().animate({
scrollTop: rPosition
},function(){
flag=true;
})
//为单击的li添加底纹
$(this).addClass("current").siblings().removeClass("current")
})
});listImg.js
$(document).ready(function() {
// // 设置初始样式
// $(".rotateImg img").css({
// "width": "50%",
// "height": "150px",
// "-webkit-transition-duration": "0.8s"
// });
// // 鼠标悬停时应用动画效果
// $(".rotateImg img").hover(function() {
// $(this).css({
// "-webkit-transform": "rotate(360deg) scale(1.3)"
// });
// }, function() {
// $(this).css({
// "-webkit-transform": "none"
// });
// });
//克隆
var index =0;
var nums = 1;
$("#clone").click(function(){
if(nums>=4){
alert("达到最大值，不能再继续添加")
return
}
//克隆元素
var div=$("#listJpg").clone()
$("#listImg").append(div)
//修改图片的样式
$(".rotateImg img").css("border-radius","120px")
//修改li的内容
div.find("li").eq(1).text("校园活动"+(3*nums+1))
div.find("li").eq(2).text("校园活动"+(3*nums+2))
div.find("li").eq(3).text("校园活动"+(3*nums+3))
//修改图片的内容
$(".rotateImg img").eq(3*nums).attr("src","img/p0"+(3*nums+1)+".jpg")
$(".rotateImg img").eq(3*nums+1).attr("src","img/p0"+(3*nums+2)+".jpg")
$(".rotateImg img").eq(3*nums+2).attr("src","img/p0"+(3*nums+3)+".jpg")
nums++
})
});
购物车.js
$(function(){
$(".checkall").change(function(){
//单击全选框，状态发生变化，当前状态值为True或False
//$(this).prop("checked")获取复选框的状态
// alert($(this).prop("checked"))
//三个商品的选中框状态，与全选框同步;两个全选框同步
$(".j-checkbox, .checkall").prop("checked",$(this).prop("checked"))
//如果全选按钮处于选中状态，所有商品加底纹；否则，取消底纹
if($(this).prop("checked")){
$(".cart-item").addClass("check-cart-item")
}else{
$(".cart-item").removeClass("check-cart-item")
}
getSum();
})
//每个商品的复选框
$(".j-checkbox").change(function(){
// alert($(this).prop("checked"))
//如果当前复选框处于选中状态，加底纹，否则取消底纹
if($(this).prop("checked")){
$(this).parents(".cart-item").addClass("check-cart-item")
}else{
$(this).parents(".cart-item").removeClass("check-cart-item")
}
//如果三个商品的选择框都处于选中状态，则全选按钮选中；只要有一个不处于选中状态，全选不能选中
if($(".j-checkbox:checked").length==$(".j-checkbox").length){
$(".checkall").prop("checked",true)
}else{
$(".checkall").prop("checked",false)
}
getSum();
})
//商品数量增加
$(".increment").click(function(){
// alert($(this).siblings(".itxt").val())
//val()获取input框的值；括号中有参数，表示赋值
var n=$(this).siblings(".itxt").val()
n++
$(this).siblings(".itxt").val(n)
//计算当前商品的小计金额：单价*数量
console.log($(this).parents(".p-num").siblings(".p-price").html())
var p=$(this).parents(".p-num").siblings(".p-price").html()//当前值是￥12.60
p=p.substr(1)//截取字符串，从下标为1开始到最后
var price=(p*n).toFixed(2)//保留两位小数
//将计算的结果放到小计中
$(this).parents(".p-num").siblings(".p-sum").html("￥"+price)
getSum();
})
//商品数量减少
$(".decrement").click(function(){
// alert($(this).siblings(".itxt").val())
//val()获取input框的值；括号中有参数，表示赋值
var n=$(this).siblings(".itxt").val()
if(n==0){
return
}
n--
$(this).siblings(".itxt").val(n)
//计算当前商品的小计金额：单价*数量
console.log($(this).parents(".p-num").siblings(".p-price").html())
var p=$(this).parents(".p-num").siblings(".p-price").html()//当前值是￥12.60
p=p.substr(1)//截取字符串，从下标为1开始到最后
var price=(p*n).toFixed(2)//保留两位小数
//将计算的结果放到小计中
$(this).parents(".p-num").siblings(".p-sum").html("￥"+price)
getSum();
})
//修改文本框的值，计算小计
$(".itxt").change(function(){
//先得到文本框的里面的值 乘以 当前商品的单价
var n=$(this).val()
//当前商品的单价
var p=$(this).parents(".p-num").siblings(".p-price").html()
// console.log(p)
p=p.substr(1)
$(this).parents(".p-num").siblings(".p-sum").html("￥"+(p*n).toFixed(2))
getSum();
var isInt = isInteger(n);
if (isInt == false) {
alert('修改数量失败');
n = parseInt(parseFloat($(this).parents(".p-num").siblings(".p-sum").html().substr(1)) / parseFloat(p));
$(this).val(n);
}
})
//功能函数判断是否为整数：
function isInteger(obj) {
return obj % 1 == 0
}
//计算总数量和金额，需考虑是计算所有商品的数量和金额，还是选中商品的总数量和总金额
// getSum();
function getSum() {
var count = 0; // 计算总件数
var money = 0; // 计算总价钱
$(".j-checkbox:checked").parents(".p-checkbox").siblings(".p-num").find(".itxt").each(function (i, ele) {
count += parseInt($(ele).val());
});
$(".amount-sum em").text(count);
$(".j-checkbox:checked").parents(".p-checkbox").siblings(".p-sum").each(function (i, ele) {
money += parseFloat($(ele).text().substr(1));
});
$(".price-sum em").text("￥" + money.toFixed(2));
}
//删除商品
//商品后面的删除按钮
$(".p-action a").click(function(){
//删除的是当前商品
$(this).parents(".cart-item").remove();
getSum();
});
//删除选中商品
$(".remove-batch").click(function(){
//删除的是小复选框选中的商品
$(".j-checkbox:checked").parents(".cart-item").remove();
getSum();
});
//清空购物车 删除全部商品
$(".clear-all").click(function(){
$(".cart-item").remove();
getSum();
});
})手风琴.js
$(function(){
// console.log($(".bigbox>ul li"));
//获取到li元素，注册一个鼠标经过事件
$(".bigbox>ul li").mouseenter(function(){
// console.log(this);
//为当前经过的这个li创建一个自定义动画效果，在动画效果前加上stop()之前我们讲过
//是为了停止上一层动画，直接执行当前动画，防止出现动画排队执行的bug
$(this).stop().animate({
width: 180
//当前元素中子代类名为small的元素淡出，其兄弟元素淡入
//经过当前li，让当前li的小图片淡出，大图片淡入
}).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
//当前元素的所有li兄弟的元素执行动画
$(this).siblings("li").stop().animate({
width: 69
//经过当前li，让当前li的所有兄弟元素的小图片淡入，大图片淡出
//指定的子代元素中类名为small的元素淡入，其兄弟元素淡出
}).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
})
})四、效果展示
首页
点击以上菜单项可跳转页面
列表页
注册页
购物车
详细页-微博
